• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 176
  • Last Modified:

How do I create a specific navigation menu with CSS and Javascript

Hello,

I am building a personal website and I would like to make a navigation menu at the top of the page where a user clicks on the link name to have a div list of options pop up underneath.  The menu can be cancelled by either a close icon or by hovering the mouse outside the menu.  The opened menu will a list of links with images like a regular html page.

I have found many examples where a user simply hovers of the link name, but I want to have them click on it instead.

Ford's website (www.ford.com) has a perfect example of this with their top navigation bar (CARS | CROSSOVERS | SUVs) click on any of those and you'll get the point, but I'm not sure how to create that myself.

Does anyone know where to or how I can make a script that can mimic this?  I'll obviously want to change the color scheme and fonts, etc.

Thanks!
0
bigeven2002
Asked:
bigeven2002
  • 7
  • 6
1 Solution
 
RobOwner (Aidellio)Commented:
They are essentially using a tabbed system

eg

http://jqueryui.com/demos/tabs/
0
 
RobOwner (Aidellio)Commented:
I've created a demo for you using jquery: http://jsfiddle.net/rjurd/et5c8/
0
 
bigeven2002Author Commented:
This is fantastic!  Thanks for the demo.  Also, I'm glad to learn of jsfiddle, looks like a great site to test things out.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
RobOwner (Aidellio)Commented:
No problem and yeah I use that site all the time! :)
0
 
bigeven2002Author Commented:
tagit,

I think I might need a blit more help.  I applied the demo script to my test page but it is only showing text.  Can you advise on what I am missing?

http://beta.evancool.com/
0
 
bigeven2002Author Commented:
Ah I was missing the js ui script.  Thanks!
0
 
RobOwner (Aidellio)Commented:
that's it!  i see it's working now. good stuff :)
0
 
bigeven2002Author Commented:
Thanks!  It will take me a while to tweak.  I'm sure you can see that I want to apply this to the links above with the tiny arrows underneath them.  Now I just need to figure that out...  :)
0
 
RobOwner (Aidellio)Commented:
well this might get you started ;)

http://jsfiddle.net/rjurd/VLJgK/
0
 
bigeven2002Author Commented:
You're too kind!  :)

Is there an export option for the code on fiddle, I could not duplicate it correctly on my domain and all scripts are included that I know of.  

Also, I put some regular text in the body where the plant bg is, when the menu is activated, it shifts the body text over, rather,  I would like it to show over the text kind of like position absolute or z-index.  On the ford site, the document content is unaffected and the menu just shows over it.

Sorry to be of trouble.  I wish I could give 50000 points for this.
0
 
RobOwner (Aidellio)Commented:
you need to wrap a div around your menu and give it the id "tabs2", which is used in the javascript to set it up

I would suggest asking a related question as there is going to be more than just this to get it working.  It would also give other experts the opportunity to help you :)
0
 
bigeven2002Author Commented:
Will do, thanks again!
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

  • 7
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now