Modifying Quick launch bar with JQuery

The Quick launch bar 

Many people are annoyed with the Quick Launchbar, because it quickly gets very large; I'm going to show how this can be solved with JQuery. I was inspired by a post made by Jan Tielens, you can read more about it here. I'm not going to claim to be any kind of expert with regards to JQuery so it's a learning experience for me too.

But what is wrong?

Well, there's nothing wrong with it by default, but it really takes up a lot of space and you need to scroll down the page just to see all the links, like this screenshot, not that many lists but a lot of space taken up. I know it's possible to remove the lists from the quick launch bar but then you need mere clicks to get the information. It's obvious that this needs to be fixed.

JQuery

Unfortunately all the items in the quick launch are all using the same CSS classes so I haven't been able to find a way (yet) to select the individual sections. So this will only work on all the sub items. Insert this code into a Content Editor Webpart:

<style type="text/css">
   .myRowHighlight {color:red; background-color:#FFCC66}
</style>

<script>
$(document).ready(function()
 {
       $("table[class='ms-navSubMenu2 zz2_QuickLaunchMenu_8']").hide("slow");
       $("table[class='ms-navheader zz2_QuickLaunchMenu_4']").hover
        (
            function() {
                $("table[class='ms-navSubMenu2 zz2_QuickLaunchMenu_8']").show("slow");
            }
        );

       $("#OuterLeftCell").hover
        (
             function() {
                 $("table[class='ms-navSubMenu2 zz2_QuickLaunchMenu_8']").hide("slow"); 
             }
        );
 }
);

</script>

I have tested this in IE8 in normal and compatibility mode, Firefox, Opera and Safari and it looks fine in every one of them.

Update Update I managed to find someone that made a better implementation where the individual sections are expaneded check out this great post http://www.endusersharepoint.com/?p=985