How to create horizontal menu?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
blade_922
Forum Contributor
Posts: 132
Joined: Wed Jul 12, 2006 4:57 pm

How to create horizontal menu?

Post by blade_922 »

Hey,

Topic sounds easy. But what im looking for is knowing the best way to create a horizontal menu that has a sub menu underneath. Its a bit more complex.

There are 2 levels. Top row has all the menu pages and beneath that i want sub links for each of those menu's when on that page.

Perfect Example: http://www.videogamer.com 's menu



Home | News | Archive | Reviews | Previews
- Soap News - Sports News - Weird News



You see what i mean? I have fireworks photoshop and dreamweaver. What would be the best way to create a menu like this?

Regards
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Post by Christopher »

Take a look at their code (you can add line breaks ;)). They use a styled list. Here is the link to the stylesheet (the section PRIMARY NAV is the pertinent section).

http://static.videogamer.com/shared/css/style.css
(#10850)
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Re: How to create horizontal menu?

Post by RobertGonzalez »

blade_922 wrote:I have fireworks photoshop and dreamweaver. What would be the best way to create a menu like this?
Not with photoshop or dreamweaver.

Try playing around at http://www.cssplay.co.uk and look at the menus section. Stu Nichols has put together quite a collection of cool menus like what you want.
blade_922
Forum Contributor
Posts: 132
Joined: Wed Jul 12, 2006 4:57 pm

Post by blade_922 »

ive created a menu in fireworks and made scroll over images on the primary nav and when clicked it sits on that primary menu tab. But still confused a little on how to make a different secondary nav come up on different primary menu's
jmut
Forum Regular
Posts: 945
Joined: Tue Jul 05, 2005 3:54 am
Location: Sofia, Bulgaria
Contact:

Post by jmut »

blade_922 wrote:ive created a menu in fireworks and made scroll over images on the primary nav and when clicked it sits on that primary menu tab. But still confused a little on how to make a different secondary nav come up on different primary menu's
This is simple php... when you click on a link of primary menu...there is id passed with link... this id shows what submenues content should be...and when page reloads...you build the new menues for specific primary menu... style stays the same for all submenues ...just their content is different based on the id passed from clicking primary menue...
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Think of it just like simple html.
Different pages have different sub menus.

You could even hard code this in HTML if you'd like.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
blade_922
Forum Contributor
Posts: 132
Joined: Wed Jul 12, 2006 4:57 pm

Post by blade_922 »

oh kay i get it now.

So i could have the primary nav and each of those primary nav pages has an ID. I could make a mysql table and have same id's as the primary nav with the menu's in them tied to that ID. Then make whichever ID page its on load that menu.

Oh kay i get ya now.

Also If you go to the same website. You see at the bottom how they have a box when you click a tab it automatically loads the content without refreshing when you click. Thats javascript there using right?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

blade_922 wrote: Also If you go to the same website. You see at the bottom how they have a box when you click a tab it automatically loads the content without refreshing when you click. Thats javascript there using right?
Yes. Take a look at this example with jquery
http://www.stilbuero.de/jquery/tabs/
Post Reply