I came across the Porsche website yesterday and the menu on the left just draw my attention – graphically I liked it; after having studied carefully the code I noticed that it is not well-structured meaning that there is a lot of javascript in the html markup, a lot of divs and finally if you disable the css the links do not work .
So I decided to give it a try and rewrite the code using our beloved css, the jquery library (only for the alpha effects) and the ie7.js script for our less beloved IE6. Let me say first that my menu just works fine with the css and the ie7.js only but I wanted to use the jquery library to make it similar to the one you find in thr Porsche website.
The menu is free to use, if you like just drop me a line telling me where you used it.
This is the final result.
Download the .zip file: menu_porsche
grandi cose inserbo per noi….. complimenti …. bellissimo!
Very sweet work here, thank you! I woder if you might be able to help me with a problem. I am trying to integrate tabs (Spry/Ajax) into the design and am not having any luck getting it working. Accordian seems to work fine. Do you have any ideas? Maybe a javascript conflict? Check it out here:
http://www.diamondbackvideoproductions.com/porsche/
and look under the Cayman model-first Boxster choice. Thanks for any help and a great script!
Andrew,
you should check the class ‘.menu li ul ‘; it has ‘position:absolute’ and ‘display:hidden’; maybe you have to change your html markup as tabs rely on unordered lists.
Well done. I’m trying to integrate this menu into a project and need a way to make the 1st set of fly outs reverse order and stack up for the bottom menu items. Have you put any thought into targeting those line items?
Is it possible to make this work in IE6?
Hi Jeff,
actually this menu should work in IE6. I tried it the day I finished writing the code. At present I cannot test IE6 anymore as my pc passed away.
Hi Claudio, Unfortunately it doesn’t work. I’ve been playing with it for a couple hours and can’t seem to wrap my head around the solution.
Hi Jeff, unfortunately at present I cannot test sites on IE6 as my pc is gone and my copy of windows 7 updated itself and no longer seems to work with the xenocode website.
“Can you build me a site with navigation like the Porsche website” a client asked me last week…
I can’t believe I’ve found the entire solution ready-made with jQuery! Thanks!