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

回答

相关问题