The Porsche menu with css and Jquery
February 8th, 2009
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
May 23rd, 2009 at 07:49
grandi cose inserbo per noi….. complimenti …. bellissimo!
June 17th, 2009 at 15:56
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!
June 18th, 2009 at 01:26
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.
June 29th, 2009 at 10:19
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?
July 8th, 2009 at 13:56
Is it possible to make this work in IE6?
July 8th, 2009 at 15:10
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.
July 9th, 2009 at 08:13
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.
July 11th, 2009 at 03:45
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.
August 17th, 2010 at 06:41
“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!