时间戳

首页 > 解决方案 > 如何使用 html、css 和 javascript 正确隐藏和显示导航菜单

javascript - 如何使用 html、css 和 javascript 正确隐藏和显示导航菜单

问题描述

我正在尝试这样做，以便当单击屏幕右上角的菜单图标时，导航菜单将在显示和隐藏之间切换。

这是上下文的图像。

在此处输入图像描述

单击右上角的按钮时，它根本不会在显示和隐藏之间切换。

这是到目前为止的代码。

var menuBtn = document.getElementById("menuBtn")
var sideNav = document.getElementById("sideNav")
var menu = document.getElementById("menu")

menuBtn.onclick = function(){
    if(sideNav.style.right == "-250px"){
        sideNav.style.right = "0";
    }
    else{
        sideNav.style.right = "-250px";
    }
}
#sideNav{
    width: 250px; /*change font size of text in nav bar*/
    height: 100vh;
    position: fixed;
    right: 0;
    top:0;
    background: #009688;
    z-index: 2;
}
nav ul li{
    list-style: none;   
    margin: 45px 15px;
}
nav ul li a{
    text-decoration: none;
    color: #fff;
}
#menuBtn{
    width: 50px;
    height: 50px;
    background: #009688;
    text-align: center;
    position: fixed;
    right: 30px;
    top: 20px;
    border-radius: 3px;
    z-index: 3;
    cursor: pointer;
}
#menuBtn img{
    width: 20px;
    margin-top: 15px;
}
<div id="sideNav">
    <nav>
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">COVID-19</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">REVIEWS</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>
    </nav>      
</div>
<div id="menuBtn">
    <img src="images/menu.PNG" id="menu">
</div>

标签： javascripthtmlcssonclickshow-hide

解决方案

您在 javascript 文件的第 2 行有错字。 ...document.getElementById("sideNav ")应该 var sideNav = document.getElementById("sidNav")

var menuBtn = document.getElementById("menuBtn")
    var sideNav = document.getElementById("sidNav")
    var menu = document.getElementById("menu")
    
    menuBtn.onclick = function(){
        if(sideNav.style.right == "-250px"){
            sideNav.style.right = "0";
        }
        else{
            sideNav.style.right = "-250px";
        }
    }
#sidNav{
    width: 250px; /*change font size of text in nav bar*/
    height: 100vh;
    position: fixed;
    right: 0;
    top:0;
    background: #009688;
    z-index: 2;
}
nav ul li{
    list-style: none;   
    margin: 45px 15px;
}
nav ul li a{
    text-decoration: none;
    color: #fff;
}
#menuBtn{
    width: 50px;
    height: 50px;
    background: #009688;
    text-align: center;
    position: fixed;
    right: 30px;
    top: 20px;
    border-radius: 3px;
    z-index: 3;
    cursor: pointer;
}
#menuBtn img{
    width: 20px;
    margin-top: 15px;
}
<div id="sidNav">
        <nav>
            <ul>
                <li><a href="#">HOME</a></li>
                <li><a href="#">COVID-19</a></li>
                <li><a href="#">SERVICES</a></li>
                <li><a href="#">REVIEWS</a></li>
                <li><a href="#">CONTACT</a></li>
            </ul>
        </nav>      
    </div>
    <div id="menuBtn">
        <img src="images/menu.PNG" id="menu">
    </div>

推荐阅读