当我缩小窗口并单击汉堡图标时，什么也没显示

当我将窗口缩小到移动大小并单击汉堡包/下拉图标时，菜单的其余部分应该会显示。但它没有响应我的 javascript 下拉菜单函数（）。什么都没有出现。这是我的完整代码。请帮助我。

基本上在我的HTML代码中，我创建了一个导航栏。在常规窗口页面上，除下拉图标外，所有菜单项都显示。当我缩小大小时，只显示第一个菜单项（"主页"），并显示汉堡包下拉图标。我使用了一个javascript函数DropDownMenu，当浏览器检测到单击hambuger图标时运行，该图标应该下拉其余菜单项，但没有。

.HTML：

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <nav>
        <ul class="navmenu" id="dropdownClick">
            <li><a href=“#home”>Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="topnav-right"><a href="#signin">Sign In</a></li>
            <li class="topnav-right"><a href="#signup">Sign Up</a></li>
            <li class="dropdownIcon"><a href="javascript:void(0);" 
onclick="dropdownMenu()"></a>&#9776;</li>
        </ul>
    </nav>
<script>
    function dropdownMenu(){
        var x = document.getElementById("dropdownClick");
        if(x.className === "navmenu"){
             x.className += " responsive"; 
        }else{
            x.className = "navmenu";
        }
    }
</script>

.CSS：

/*****************DEFAULTS******************/
html{
    font-family: "Helvetica Neue", sans-serif;
}
nav, header, footer{
    display:block;
}
body{
    line-height: 1;
    margin:0;
}
/*****************NAV BAR******************/

ul.navmenu{
    background-color:aliceblue;
    font-size:14px;
    overflow:hidden;
    margin:0;
    padding:0;
}
ul.navmenu li{ 
    display: block;
    padding:12px;
    float:left;
}
ul.navmenu li:hover{
    background-color:aqua;
}
ul.navmenu li a{
    text-transform: uppercase;
    text-decoration:none;
    min-height:16px;
    color:gray
}
ul.navmenu li.topnav-right{
    float:right;
}
ul.navmenu li.dropdownIcon{
    display:none;
}
/*****************MOBILE******************/
@media only screen and (max-width: 680px){
    ul.navmenu li:not(:nth-child(1)){
        display:none;
    }
    ul.navmenu li.dropdownIcon{
        display:block;
        float: right;
    }
    ul.navmenu.responsive li.dropdownIcon{
        position:absolute;
        top:0;
        left:0;
    }
    ul.navmenu.responsive{
        position: relative;
    }
    ul.navmenu.responsive li{
        display:inline;
        float:none;
    }
    ul.navmenu.responsive li a{
        display: block;
    }
}

更改此行：

<li class="dropdownIcon"><a href="javascript:void(0);" onclick="dropdownMenu()"></a>&#9776;</li>

在正确的版本上：

<li class="dropdownIcon"><a href="javascript:void(0);" onclick="dropdownMenu()">&#9776;</a></li>

相关内容

最新更新

热门标签：