Wordpress 100% width drop down menu with javascript

Question

I have modified some code I found to try and achieve a 100% width drop down for my wordpress menu.

My issue is that my wordpres menu has a structure like this with the sub menu ul nested within the list for my nav.

<li><a href="">menu-1</a> 
<ul class="sub-menu">
<li>sub 1</li>
<li>sub 2</li>
</ul>
</li>

The dropdown will only work if my sub menu is not nested within the top level navigation list like this.

<li><a href="">menu-1</a> </li>
<ul class="sub-menu">
<li>sub 1</li>
<li>sub 2</li>
</ul>

My fiddle of the drop working on menu 1 and not working on menu 2

Please advise how to resolve this, how can i change my wordpress menu structuure or preferably how can i change my script so that the drop down works with the current html structure.

Javascript isn't something I am experienced in, so some clear expertise wold be helpful.

Allen Tellez Allen Tellez · Accepted Answer · 2015-05-18T22:42:37

I took the code from your fiddle and inserted it here. The jquery 'next' only works on next sibling. The second menu html structure put the 2nd sub menu outside of the li's so it was not a sibling and was not found to attach slide animation to when triggered.

var stop = true;
var hovered;
var timeout;

$('.menu-item').hover(
    function(){
        
        clearTimeout(timeout);
        stop = true;
        hovered = this;
        timeout = setTimeout(function() {
        if($(hovered).hasClass('menu-item')){
            $('.sub-menu').css({'z-index': 0});
            $(hovered).next('.sub-menu').css({'z-index': 5});
            hovered = $(hovered).next('.sub-menu').slideDown(350);
            timeout = setTimeout(function(){
                $('.sub-menu').not($(hovered).next('.sub-menu')).slideUp(350);  
            },200);
        }
        else
            $('.sub-menu').slideUp(350);    
        },400);
    },
    function(e){
        stop = false;
        clearTimeout(timeout);
        setTimeout(function(){
            if(!stop)
                $('.sub-menu').slideUp(350);
        },500);
    }
);

$('.sub-menu').hover(
    function(){
        stop = true;    
    },
    function(){
        
    }
);

$('#menu-main-navigation').hover(
    function(){

    },
    function(){
        timeout = setTimeout(function(){
            $('.sub-menu').slideUp(350);
        },200);
    }
);

* {   
margin: 0;
padding: 0;
}
    #menu-main-navigation {
        position: absolute;
        display: block;
        height: 80px;
        width: 100%;
        background: orange;
    }
    #menu-main-navigation li {
        list-style-type: none;
        text-decoration: none;
        vertical-align: middle;
        height: 80px;
        display: inline-block;
        position: relative;
    }
    #menu-main-navigation .menu-item a {
        color: black;
        font-size: 18px;
        height: 0;
        font-family: Arial;
        vertical-align: baseline;
        position: relative;
        display: inline-block;
        height: auto;
        padding: 29px;
    }
    #menu-main-navigation .menu-item a:hover {
        background: rgba(0, 0, 0, 0.4);
        color: #FFF;
        transition: all .2s;
    }
   #menu-main-navigation .menu-item a:hover .arrow.down {
        border-top-color: #FFF;
    }

    .sub-menu:hover {
        display: block !important;
        width: 100%;
        height: auto !important;
        position: absolute;
    }
     .sub-menu:hover {
        display: block !important;
        width: 100%;
        height: auto !important;
        position: absolute;
    }
    .sub-menu {
        width: 100%;
        height: auto;
        background: gray;
        display: none;
        position: absolute;
    }
 .sub-menu {
    
    border-bottom: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-main-navigation" class="menu">
 
    <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-22"><a href="http://localhost:8888/chat-headsets/">menu 1</a>
    </li>
           <ul class="sub-menu" id="s1">
	<li id="menu-item-7267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7267"><a href="">item 1</a></li>
	<li id="menu-item-7593" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7593"><a href="">item 2</a></li>
		<li id="menu-item-7267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7267"><a href="">item 3</a></li>
	<li id="menu-item-7593" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7593"><a href="">item 2</a></li>
</ul>

    <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-22"><a href="http://localhost:8888/chat-headsets/">menu 2</a>
     </li>
        <ul class="sub-menu" id="s2">
	<li id="menu-item-7267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7267"><a href="">item 1</a></li>
	<li id="menu-item-7593" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7593"><a href="">item 2</a></li>
		<li id="menu-item-7267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7267"><a href="">item 3</a></li>
	<li id="menu-item-7593" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7593"><a href="">item 2</a></li>
  
  
</ul>

Wordpress 100% width drop down menu with javascript

1 Answers