Question

我最近开始为自己的网站制作自己的WordPress主题。但是，我没有使用像bootstrap这样的框架。从最小的视口开始，我正在创建响应式菜单。我想创建一个滑入式菜单。我对Javascript并不熟悉，所以我只打开菜单，但是当我点击菜单外面或按钮时我无法关闭它。此外，我注意到我的菜单项（链接）不符合我将它们放在菜单选项卡下的Wordpress后端的顺序。

我真的希望有人帮我修改我的菜单并使其关闭或任何有更好的想法或代码结构的帮助来使菜单功能。如果可能的话，请在菜单顺序上找不到答案。谢谢。

以下是我调整为适用于WordPress https://www.w3schools.com/howto/howto_js_sidenav.asp

的代码的链接

我的header.php代码显示菜单

<!DOCTYPE html>

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>EGlobe</title>
<?php wp_head(); ?>
</head>
<body>
<div class="menu-button-holder"><span class="hamburger" style="font-size:30px;cursor:pointer" >&#9776;</span></div>



<?php

wp_nav_menu(
  array(
    'theme_location' => 'Header Menu',
    'menu_class' => 'header-menu',
    'menu_id' => 'header-menu'


  ) 
);

functions.php我在哪里注册菜单

//registering  the menu support for the site
function register_my_menus() {

    register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'footer-menu' => __( 'Footer Menu' )
     )
   );
 }
 add_action( 'init', 'register_my_menus' );

样式的CSS，如链接

.header-menu .page_item{
    list-style-type: none;
}

.hamburger{
    display:none;
}

@media screen and (max-width:320px){



    .menu-button-holder{
        position: fixed;
        width:90%;
    }   

    .hamburger{
        display:block;
        float: right;
        z-index: 1;
        top:0;
        margin-bottom: 20px;



    }

    .header-menu{
        height: 100%;
        width:0;
        background-color: black;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        padding-top: 60px;
        transition: 0.5s;
        overflow-x: hidden;

    }

    .header-menu a{
        padding: 8px 32px 8px 32px;
        text-decoration: none;
        font-size:20px;
        color: #fff;
        display: block;

    }

    .header-menu a:hover{
        color: #868686;
    }


}

我用来打开菜单的javascript。但是关闭功能不起作用

document.addEventListener("click", openNav);

function openNav() {
    document.getElementById("header-menu").style.width = "250px";
}



if(document.getElementById("header-menu").style.width = "250px"){

    document.addEventListener("click", closeNav);

    function closeNav(){

        document.getElementById("header-menu").style.width = "0px";
    }

}

Answer 1

更改此一行

if(document.getElementById("header-menu").style.width = "250px")

到这个

if(document.getElementById("header-menu").style.width == "250px")

Answer 2

你可以像这样使用

＆＃13;

document.getElementById("hamburger").onclick = function(){
  if(document.getElementById("header-menu").style.width == "250px"){
 document.getElementById("header-menu").style.width = "0px";
  } else {
 document.getElementById("header-menu").style.width = "250px";
  }
};

＆＃13;

.header-menu .page_item{
    list-style-type: none;
}

.hamburger{
    display:none;
}
    
   
    
    .menu-button-holder{
        position: fixed;
        width:90%;
    }   
    
    .hamburger{
        display:block;
        float: right;
        z-index: 1;
        top:0;
        margin-bottom: 20px;
        
        
      
    }
    
    #header-menu{
        height: 100%;
        width:0;
        background-color: black;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        padding-top: 60px;
        transition: 0.5s;
        overflow-x: hidden;
        background: red;
        
    }
    
    .header-menu a{
        padding: 8px 32px 8px 32px;
        text-decoration: none;
        font-size:20px;
        color: #fff;
        display: block;
    
    }
    
    .header-menu a:hover{
        color: #868686;
    }

＆＃13;

<div class="menu-button-holder">
<span  class="hamburger" id="hamburger" style="font-size:30px;cursor:pointer" >&#9776;</span>
</div>

<div id="header-menu">Menu content</div>

＆＃13;

如何使Wordpress移动/响应菜单工作

2 个答案: