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

/**
 * Handles toggling the navigation menu for small screens.
 */
(function(){var nav=document.getElementsByClassName('site-navigation')['0'],button,menu;if(!nav)return;button=nav.getElementsByClassName('menu-toggle')[0];menu=nav.getElementsByTagName('ul')[0];if(!button)return;if(!menu||!menu.childNodes.length){button.style.display='none';return}button.onclick=function(){if(-1==menu.className.indexOf('nav-menu'))menu.className='nav-menu';if(-1!=button.className.indexOf('toggled-on')){button.className=button.className.replace(' toggled-on','');menu.className=menu.className.replace(' toggled-on','')}else{button.className+=' toggled-on';menu.className+=' toggled-on'}}})();(function(){var nav=document.getElementsByClassName('site-navigation')['1'],button,menu;if(!nav)return;button=nav.getElementsByClassName('menu-toggle')[0];menu=nav.getElementsByTagName('ul')[0];if(!button)return;if(!menu||!menu.childNodes.length){button.style.display='none';return}button.onclick=function(){if(-1==menu.className.indexOf('nav-menu'))menu.className='nav-menu';if(-1!=button.className.indexOf('toggled-on')){button.className=button.className.replace(' toggled-on','');menu.className=menu.className.replace(' toggled-on','')}else{button.className+=' toggled-on';menu.className+=' toggled-on'}}})();
/* ========================================================
 * bootstrap-tab.js v2.0.4
 * http://twitter.github.com/bootstrap/javascript.html#tabs
 * ========================================================
 * Copyright 2012 Twitter, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the...