如何使Wordpress Mobile/Responsive Menu工作

我最近開始爲自己的網站製作自己的WordPress主題。但是，我沒有使用像bootstrap這樣的框架。從最小的視口開始，我創建了響應式菜單。我想創建一個滑入式菜單。我對JavaScript並不熟悉，所以我只打開了我的菜單，但當我單擊菜單或按鈕上時，我無法關閉它。另外，我注意到我的菜單項（鏈接）沒有按照菜單選項卡下的順序放置在Wordpress後端。如何使Wordpress Mobile/Responsive Menu工作

我真的很喜歡有人幫我修理我的菜單，並使它更接近或者有更好的主意或代碼結構以使菜單功能得到任何幫助。如果可能，請在菜單順序上回答一個問題。謝謝。

這裏是對代碼的鏈接我調整到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' 


) 
);

功能。 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"; 
    } 

}

來源

2017-03-08 Feyt

更改這一行

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

這個

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

來源

2017-03-08 07:45:37

嗨@Ruslan。謝謝回覆。不幸的是我已經測試過這個，但它也不起作用。這裏是我在Chrome中看到的錯誤 - 未捕獲的TypeError：無法在響應菜單中讀取屬性'樣式'null （responsive-menu.js是腳本所在的js文件） – Feyt

Hi @Feyt你有鏈接嗎？或者你可以通過https://jsfiddle.net過去嗎？ –

我可以創建一個Codepen，但它取決於你想測試什麼？我應該粘貼上面的所有代碼嗎？這是不是意味着來自WordPress的PHP將不再工作？ – Feyt

您可以使用這樣一個

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>

來源

2017-03-08 12:08:18

這確實工作在純html，css和js是。但在動態菜單內容中使用php在WordPress上工作很困難。我仍然收到一個錯誤 - 無法在response-menu.js？ver = 1：21設置屬性'onclick'爲null – Feyt

如何使Wordpress Mobile/Responsive Menu工作

回答

相關問題