menu essentielle v3

by pixeline

HTML

<nav id="menu-secondary" class="site-navigation menu-container" role="navigation">
    <div class="wrap"> <span class="menu-toggle">Menu</span>

        <div class="menu">
            <ul id="menu-secondary-items" class="nav-menu">
                <li id="menu-item-15994" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-15994"> <a href="http://staging.essentielle.be/actu-people">People</a>

                    <ul class="sub-menu">
                        <li id="menu-item-15995" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-15995"><a href="http://staging.essentielle.be/actu-people/actualites">Actus</a>
                        </li>
                        <li id="menu-item-15997" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-15997"><a href="http://staging.essentielle.be/actu-people/people">People</a>
                        </li>
                    </ul>
                </li>
                <li id="menu-item-16035" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-16035"> <a href="http://staging.essentielle.be/mode">Style</a>

                    <ul class="sub-menu">
                        <li id="menu-item-16038" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-16038"><a href="http://staging.essentielle.be/mode/mode-femmes">Femmes</a>
                        </li>
                        <li id="menu-item-16039" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-16039"><a href="http://staging.essentielle.be/mode/mode-hommes">Au masculin</a>
                        </li>
                        <li id="menu-item-16037" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-16037"><a href="http://staging.essentielle.be/mode/defiles-mode">Défilés</a>
                        </li>
                    </ul>
                </li>
                <li id="menu-item-15998"...

CSS

/* Secondary menu 
-------------------------------------------------------------- */
 #menu-secondary {
    clear: both;
    width: 100%;
    margin: 10px 0 30px 0;
    float: left;
    clear: left;
    position: relative;
    z-index: 2;
    padding: 0;
    border-top: 3px solid #444;
    border-bottom: 1px solid #d5d5d5;
}
#menu-secondary li {
    display: block;
    float: left;
    padding-left: 21px;
    background: url(http://staging.essentielle.be/wp-content/themes/proxima/images/menu-separator.png) no-repeat left 49%;
}
#menu-secondary li:first-child {
    padding-left: 0;
    background: none;
}
#menu-secondary li a {
    font-size: 13px;
    font-weight: bold;
    line-height: 45px;
    padding-bottom: 2px;
    margin-right: 14px;
    display: block;
    color: #333;
}
#menu-secondary li:last-child a {
    margin-right: 0;
}
#menu-secondary li a:hover {
    color: #f87421;
}
#menu-secondary li.current-menu-item a {
    color: #aaa;
}
#menu-secondary li li, #menu-secondary li li.current-menu-item li {
    clear: both;
    float: none;
    border-top: 1px solid #ddd;
    padding-left: 0;
    background: none;
}
#menu-secondary li li:first-child, #menu-secondary li li.current-menu-item li:first-child {
    border-top: none;
}
#menu-secondary li li a, #menu-secondary li li.current-menu-item li a {
    font-weight: normal;
    line-height: 44px;
    text-transform: none;
    color: #666;
    margin: 0 5px;
    padding: 0 15px;
}
#menu-secondary ul li a:hover, #menu-secondary li ul li a:hover {
    border-bottom: none;
}
#menu-secondary .menu {
    float: left;
    width: 82%;
}
#menu-secondary .search {
    margin: 10px 0;
    float: right;
    width: 17%;
}
#menu-secondary .search input[type="text"] {
    padding: 5px 7px 5px 7px;
    width: 90%;
}
/* Dropdowns (secondary)
-------------------------------------------------------------- */
 .menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu li:hover {
    visibility: inherit
}
.menu li {
...

JavaScript

/**
 * Drop-downs
 * 
 */;
(function ($) {
    $.fn.superfish = function (op) {
        var sf = $.fn.superfish,
            c = sf.c,
            $arrow = $(['<span class="', c.arrowClass, '"> &#187;</span>'].join('')),
            over = function () {
                var $$ = $(this),
                    menu = getMenu($$);
                clearTimeout(menu.sfTimer);
                $$.showSuperfishUl().siblings().hideSuperfishUl()
            }, out = function () {
                var $$ = $(this),
                    menu = getMenu($$),
                    o = sf.op;
                clearTimeout(menu.sfTimer);
                menu.sfTimer = setTimeout(function () {
                    o.retainPath = ($.inArray($$[0], o.$path) > -1);
                    $$.hideSuperfishUl();
                    if (o.$path.length && $$.parents(['li.', o.hoverClass].join('')).length < 1) {
                        over.call(o.$path)
                    }
                }, o.delay)
            }, getMenu = function ($menu) {
                var menu = $menu.parents(['ul.', c.menuClass, ':first'].join(''))[0];
                sf.op = sf.o[menu.serial];
                return menu
            }, addArrow = function ($a) {
                $a.addClass(c.anchorClass).append($arrow.clone())
            };
        return this.each(function () {
            var s = this.serial = sf.o.length;
            var o = $.extend({}, sf.defaults, op);
            o.$path = $('li.' + o.pathClass, this).slice(0, o.pathLevels).each(function () {
                $(this).addClass([o.hoverClass, c.bcClass].join(' ')).filter('li:has(ul)').removeClass(o.pathClass)
            });
            sf.o[s] = sf.op = o;
            $('li:has(ul)', this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over, out).each(function () {
                if (o.autoArrows) addArrow($('>a:first-child', this))
            }).not('.' + c.bcClass).hideSuperfishUl();
            var $a = $('a', this);
           ...