使用javascript的Wordpress 100%宽度下拉菜单

时间:2015-05-18 21:52:36

标签: javascript jquery wordpress drop-down-menu navigation

我修改了一些代码,我发现尝试为我的wordpress菜单实现100%宽度下拉。

我的问题是我的wordpres菜单有这样的结构,子菜单ul嵌套在我的导航列表中。

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

下拉列表仅在我的子菜单没有嵌套在顶级导航列表中时才有效。

<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

请告知如何解决这个问题,如何更改我的wordpress菜单结构,或者最好如何更改我的脚本,以便下拉列表适用于当前的html结构。

Javascript并不是我所经历的事情,因此一些明确的专业知识会对您有所帮助。

1 个答案:

答案 0 :(得分:1)

我从小提琴中取出代码并将其插入此处。 jquery“next”仅适用于下一个兄弟。第二个菜单html结构将第二个子菜单放在li的外面,所以它不是兄弟,并且在触发时没有找到附加幻灯片动画。

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>