First of all let’s add JQuery to our page:

   <script type="text/javascript" src="jquery.js"></script>

Launching code:

 $(document).ready(function(){
   // Your code here
 });

These are the methods I find more useful:

1. the .noConflict() method enables the use of multiple JS libraries (like Prototype)
2. the .addClass and .removeClass

    $(document).ready(function(){
        $('#your_id').addClass('your_class');
   
    });
   

3. the negation pseudo-class:

   $('#your_id li:not(.your_class)').addClass('your_class');

4. the :eq custom selector – selects the third item from a matched set of div selectors with a ‘my_class’ class

    $('div.my_class:eq(2)')

5. the :nth-child custom selector – matches elements which are the indexth child of their parent element

   $('tr:nth-child(index)').addClass('your_class');

6. the :odd and :even custom selectors:

    $('tr:odd').addClass('your_class');

7. the :contains() selector:

    $('td:contains(name)').addClass('your_class');

8. form selectors: :text, :checkbox, :radio, :button, :enabled, :checked, :selected

Shorthand events:

1. .click()
2. .toggle and .toggleClass()

    $(document).ready(function() {
      $('#my_id').click(function() {
        $('#my_id .button').toggleClass('my_class');
      });
    });
   

This in particular is very useful as it can perform actions in alternation.

3. .hover

   $(document).ready(function() {
     $('#my_id .button').hover(function() {
      $(this).addClass('my_class');
     }, function() {
       $(this).removeClass('my_class');
      });
    });
   

4. .css

   $(document).ready(function() {
       $('#my_id').css('border', '1px solid #000')
    });
   

5. .hide and .show

   $(document).ready(function() {
       $('p').hide();
    });
   

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