Accordion Nav - 1.7

by CheapSk8

HTML

<div class="accordionNav">
    <ul>
        <li><a href="#">Test 1</a>
            <ul>
                <li><a href="#">Test Sub 2</a></li>
                <li><a href="#">Test Sub 3</a>
                    <ul>
                        <li><a href="#">Test SubSub 1</a></li>
                        <li><a href="#">Test SubSub 2</a></li>
                        <li><a href="#">Test SubSub 3</a>
                             <ul>
                                 <li><a href="#">Test SubSub 1</a></li>
                                 <li><a href="#">Test SubSub 2</a></li>
                                 <li><a href="#">Test SubSub 1</a></li>
                                 <li><a href="#">Test SubSub 2</a></li>
                                 <li><a href="#">Test SubSub 1</a></li>
                                 <li><a href="#">Test SubSub 2</a></li>
                                 <li><a href="#">Test SubSub 1</a></li>
                                 <li><a href="#">Test SubSub 2</a></li>
                                 <li><a href="#">Test SubSub 1</a></li>
                                 <li><a href="#">Test SubSub 2</a></li>
                                 <li><a href="#">Test SubSub 1</a></li>
                                  <li><a href="#">Test SubSub 2</a></li>
                                 <li><a href="#">Test SubSub 1</a></li>
                                  <li><a href="#">Test SubSub 2</a></li>
                                 <li><a href="#">Test SubSub 1</a></li>
                                  <li><a href="#">Test SubSub 2</a></li>
                             </ul>
                         </li>
                    </ul>
                </li>
                
            </ul>
        </li>
        <li><a href="http://live.com">Test 4</a></li>
        <li><a href="#">Test 5</a></li>
        <li class="current"><a href="http://disney.com">Test 6</a>
            <ul>
                <li><a href="#">Test Sub 7</a></li>
               ...

CSS

.accordionNav {
    border: 2px solid black;
    width: 175px;
    color: #000000;
}

a {
    width: auto;
    line-height: 1.4em;
    color: #000000;
    display: block;
    font: 12px Tahoma,"Lucida Grande","Trebuchet MS",Helvetica,sans-serif;
    padding: 5px 2px 5px 8px;
    text-decoration: none;
    background: url("http://www.cloud.edu/common/images/greengradient.gif") repeat-x scroll left center white;
    
}
.topNav.open > a {
    background-image: url("http://www.cloud.edu/common/images/yellowgradient.gif");
    font-weight: bold;
}
.subNav a, .subNav.open a
{
    font-family: Helvetica,Arial,Sans-Serif;
    font-size: 0.75em;    
    font-weight: normal;
    display: block;
    padding: 5px 0 5px 8px;
    position: relative;
    text-decoration: none;
    width: auto;
    background: none;
}

.subNav a:hover {
    background-color: #ffd400;
}

.subNav > .topNav > a:hover {
    background-color: #BBE2B2;
}
.subNav .active a{
    font-weight: bold;
}

JavaScript

/* accordionNav plugin - v1.7
 * 
 * v1.7 - Changed setting ul height to width to correct jerky animation
 *      - Corrected initial "display:none" to handle multiple levels
 *
 * v1.6 - Updated handling of "activeClass" for topNav items
 * 
 * Copyright 2011, Daved Artemik
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 */
(function($) {
    var accordionNav = function($e, opts) {
        var $o = $.extend({
            activeClass: 'active',  // class indicating selected menu item
            autoClose: true, // closes any open navs upon clicking new nav
            autoExpand: true, // expands to current location
            currentClass: 'current', // class indicating current nav position for autoExpand
            homeLinkTxt: ' Home', // text to add to each homeLink item
            makeHomeLink: true, // copies each topNav to make a subNav item
            openClass: 'open',  // applied to expanded nav levels
            speed: 300, // slide up/down speed
            subNavCss: 'subNav', // class applied to subNav items
            topNavCss: 'topNav' // class applied to topNav items
        }, opts);

        if ($e.length <= 0) {
            return e;
        }
        return $e.each(function() {
            var $t = $(this); // current object
            $t.find('.' + $o.currentClass).last().data('isLast',true);
            $t.find('li > ul').each(function() { // loop through each nav group
                var $t2 = $(this);// ul subNav
                var $p = $t2.parent('li');// li topNav
                $t2.css('width',$t2.width()).addClass($o.subNavCss); // add subNav class to each subNav
                if ($o.makeHomeLink) { // if topNav should be a nav item, make it
                    var $c = $p.clone()
                        .find('ul')
                        .remove().end(); // based off the topNav link
                    if ($p.data('isLast')) {
                       ...