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!
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!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
This is fantastic! Thanks for the demo. Also, I'm glad to learn of jsfiddle, looks like a great site to test things out.
No problem and yeah I use that site all the time! :)
ASKER
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/
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/
You're just missing the ui library
js:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js
css:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css
js:
https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js
css:
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css
ASKER
Ah I was missing the js ui script. Thanks!
that's it! i see it's working now. good stuff :)
ASKER
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... :)
ASKER
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.
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.
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 :)
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 :)
ASKER
Will do, thanks again!
eg
http://jqueryui.com/demos/tabs/