如何使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