问题：

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

南门鸿雪

2023-03-14

我最近开始为自己的网站制作自己的WordPress主题。但是，我使用的不是bootstrap这样的框架。从最小的视区开始，我正在创建响应菜单。我想创建一个幻灯片菜单。我不太熟悉Javascript，所以我只能打开我的菜单，但当我单击菜单外或按钮时，我不能关闭它。此外，我注意到我的菜单项（链接）不是我把它们放在Wordpress后端菜单选项卡下的顺序。

我真的希望有人帮助我修复我的菜单，使它关闭或任何帮助与一个更好的想法或代码结构，使菜单功能。如果可能的话，请回答菜单不起作用的顺序。谢谢.

这里是我为在WordPress上工作而调整的代码的链接https://www.w3schools.com/howto/howto_js_sidenav.asp

显示菜单的My header.php代码

<!DOCTYPE html>

null

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

}

共有2个答案

邓卓

2023-03-14

你可以像这个一样使用

null

js lang-js prettyprint-override">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>

倪鸿禧

2023-03-14

更改这一行

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

对此

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

类似资料：

WordPress div响应移动

我定制了这个摄影网站的家庭模板，包括4个div，以突出摄影师的投资组合的4个主要部分。在浏览器或移动设备上调整大小时，它们没有响应。我必须包括什么才能让他们做出反应？（媒体查询最小最大，不一定）地点：http://jeremy.insctest1.com 其中一个部门： div onhtml="window.location='/投资组合/架构/架构/'；"id="item1"style="宽：
WordPress移动响应不能正常工作

我使用的是wordpress主题突出。它已经有了针对移动响应的媒体查询，这些查询来自：正如你所见，它涵盖了从手机到平板电脑的宽度。我们的开发人员不希望在其所在的全局css中更改此默认代码，但我们需要使该站点在单个页面的css上的单独查询中响应手机和平板电脑。我希望手机的最大宽度为480px，平板电脑的最大宽度为1024，桌面电脑的最大宽度为2000。我应该提出的三个媒体查询的正确顺序和语法是什
如何使Superfish下拉菜单响应？

问题内容：我在skelton框架中使用superfish下拉菜单。我也希望它能在手机上使用。默认情况下，它显示下拉菜单项，但将鼠标悬停在其下面的项上。我想以某种方式使其具有将父项推到其下方的方式。有什么办法吗？问题答案：这是一个更好的答案我能够将Superfish的相同HTML转换为响应式抽屉菜单。JS非常简单，整个过程基本上都是使用CSS完成的。检查一下，让我知道你们的想法！
LI的Wordpress菜单类。当前菜单项未应用

我正在为客户创建一个Wordpress站点，网址是http://digitaldemo.net/vintage/about/。我遇到的唯一问题是，当我在给定的页面上时，li.current-menu-item类没有被应用。例如，在上面的URL上，关于菜单项应该有更深的灰色背景，而不是图标后面的白色“聚光灯”。下面是我的导航的CSS：每个li都有一个独特的背景图像（例如li.blog有blog
响应式菜单（Responsive Menu）

描述 (Description) 要将菜单更改为不同的屏幕大小，菜单包含一些响应式CSS类。使用响应式菜单插件，可以将默认模式应用于菜单，也可以更改不同大小的屏幕的菜单模式。例子 (Example) 以下示例演示了在Foundation中使用响应式导航菜单 - <!DOCTYPE html> <html> <head> <title>Foundation Template</
WordPress动态页面菜单导航

本文向大家介绍WordPress动态页面菜单导航，包括了WordPress动态页面菜单导航的使用技巧和注意事项，需要的朋友参考一下在编写了可以在Wordpress中创建给定页面的子页面列表的函数之后，我需要更强大，更自动的功能。为此，我创建了一个插件，该插件将创建一个包含动态创建的页面菜单的小部件。该小部件可以确定当前正在显示的页面，并将爬到页面树上，直到找到根页面为止。在攀爬页面树的同时，插

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

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档