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

Question

我最近开始为自己的网站制作自己的WordPress主题。 但是，我没有使用引导程序之类的框架。 从最小的视口开始，我正在创建响应菜单。 我想创建一个滑入式菜单。 我对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

你可以这样用

 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"; } };

 .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; }

 <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>

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

问题描述

2 个解决方案

解决方案1
0 2017-03-08 07:45:37

解决方案2
0 2017-03-08 12:08:18

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

问题描述

2 个解决方案

解决方案1 0 2017-03-08 07:45:37

解决方案2 0 2017-03-08 12:08:18

解决方案1
0 2017-03-08 07:45:37

解决方案2
0 2017-03-08 12:08:18