PDA

View Full Version : CSS Menu Help (ya I know, sorry)



BlackReef
Apr 25th, 2010, 09:37 AM
Hello,

Regarding the CSS Menus, I believe I am suffering from information overload. I have searched high and low but alot of the stuff I find on Google is like a CSS Menu generator, which is not really what I am looking for. There are literally thousands of variations of menus and honestly Im getting confused, especially since I am very new to CSS.

Anyways, I have a site I am building that is very similar to this:

http://www.patagonia.com

I am basically trying to replicate a menu like on this site. I really like the animated rollout as well. I understand, through my research that this has to be done in javascript? Not sure though

If somebody could point me to a tutorial, for this kind of menu - it would be greatly appreciated.

Also - if somebody could replicate a menu identical to this that is SEO friendly Id be willing to pay $$, but I prefer to learn myself if its not too difficult

thanks

nikee
Apr 25th, 2010, 02:00 PM
Hello.

Would something like this do?
http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/

Check out the demo here:
http://nettuts.s3.amazonaws.com/590_menu/menu/index.html

effpeetee
Apr 25th, 2010, 02:04 PM
Some useful sites here.
(http://exitfegs.co.uk/Sources.html)
Frank

Excavator
Apr 25th, 2010, 06:46 PM
Hello BlackReef,
Have you tried duplicating their code structure and recreating the menu on your own site? They also use javascript for that menu, TopNav.js, and you'll will need that as well.

Many times, once you find the js that controls a menu, you can find a tutorial by searching the name of the .js file. In this case though, searching TopNav.js doesn't turn up much help. Looking inside the actual TopNav.js doesn't show any author's signature/address/info so it looks like they wrote that themselves.


//edit...
I did a little more research and learned this menu is commonly called a Mega Drop menu. Here's several tutorials and downloadable examples you can use - http://www.google.com/search?q=mega+drop+down&rls=com.microsoft:en-us&ie=UTF-8&oe=UTF-8&startIndex=&startPage=1

BlackReef
May 6th, 2010, 11:25 AM
Hello BlackReef,
Have you tried duplicating their code structure and recreating the menu on your own site? They also use javascript for that menu, TopNav.js, and you'll will need that as well.

Many times, once you find the js that controls a menu, you can find a tutorial by searching the name of the .js file. In this case though, searching TopNav.js doesn't turn up much help. Looking inside the actual TopNav.js doesn't show any author's signature/address/info so it looks like they wrote that themselves.


//edit...
I did a little more research and learned this menu is commonly called a Mega Drop menu. Here's several tutorials and downloadable examples you can use - http://www.google.com/search?q=mega+drop+down&rls=com.microsoft:en-us&ie=UTF-8&oe=UTF-8&startIndex=&startPage=1

Hello,

Sorry for the delay in responding. Ya if possible I would like to replicate the menu on the Patagonia.com website exactly. If I wanted to do this, is all the information available? (javascript files, etc) by 'Viewing Source' on the website itself? I would first like to replicate the menu on my own site with the necessary files and then tweak it to my liking