Wordpress 100%宽度下拉菜单与javascript

Wordpress 100% width drop down menu with javascript

本文关键字：javascript 下拉菜单 100% Wordpress      更新时间：2023-09-26

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

我的问题是我的wordpress菜单有一个这样的结构，子菜单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>

我的小提琴的下降工作在菜单1和不工作在菜单2

请建议如何解决这个问题，我如何改变我的wordpress菜单结构或最好我如何改变我的脚本，使下拉工作与当前的html结构。

Javascript不是我有经验的东西，所以一些明确的专业知识会有所帮助。

我将代码从您的小提琴中取出并插入到这里。jquery的"next"只适用于下一个兄弟。第二个菜单html结构将第二个子菜单放在li's之外，因此它不是兄弟菜单，并且在触发时没有发现附加幻灯片动画。

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>

相关文章：