堆棧內存溢出
  簡體   English   中英

切換菜單列表項目顯示

[英]Toggle Menu list items display

 原文  2017-04-22 21:50:08  1   2    html/ css/ drop-down-menu/ menu

問題描述

當您單擊漢堡包圖標時，我有一個要下拉的菜單。 列表項在單擊按鈕后顯示，但在未單擊按鈕時仍可見。 我不知道如何隱藏菜單。

我在這里有代碼： Codepen 

 function myFunction() { var x = document.getElementById("myTopnav"); if (x.className === "topnav") { x.className += " responsive"; } else { x.className = "topnav"; } } $(document).ready(function() { $('#nav-icon3').on('click', function() { $(this).toggleClass('open'); }); }); 
 * { box-sizing: border-box; } html, body { padding: 0; margin: 0; width: 100%; height: 100%; font-size: 1rem; } .header { background-color: #FFF; width: 100%; margin: 0px auto; display: block; top: 0; margin-top: 7%; height: 80px; } h1 { margin-left: 5%; padding-left: 1%; font-family: 'Lobster', cursive; margin-top: 0; float: left; margin-bottom: 0; color: #D18E8F; } #nav-icon { width: 30px; height: 30px; position: relative; margin-right: 7%; margin-top: 8px; /*padding-right: 1%;*/ float: right; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; cursor: pointer; } #nav-icon3 span { display: block; position: absolute; height: 4px; width: 100%; background: #8c8c8c; border-radius: 6px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } #nav-icon3 span:nth-child(1) { top: 0px; } #nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) { top: 10px; } #nav-icon3 span:nth-child(4) { top: 20px; } #nav-icon3.open span:nth-child(1) { top: 10px; width: 0%; left: 50%; } #nav-icon3.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #nav-icon3.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #nav-icon3.open span:nth-child(4) { top: 10px; width: 0%; left: 50%; } .topnav.responsive { /*display: none;*/ clear: both; padding: 0; height: 160px; } ul.topnav.responsive { list-style: none; font-family: 'Raleway', 'sans-serif'; float: left; margin-left: 7%; /*padding-left: 2%;*/ margin-top: 0; width: 85%; margin-bottom: 0; } ul.topnav.responsive li { padding-top: 16px; padding-bottom: 16px; border-bottom: 1px solid #c6c6c6; } ul.topnav.responsive li a { text-decoration: none; color: #8c8c8c; } ul.topnav.responsive li a:hover { color: #7EBEA3; } 
 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial scale=1.0"> <title>Gabriella Farfan</title> <link href="https://fonts.googleapis.com/css?family=Lobster|Raleway" rel="stylesheet"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/main.js"></script> </head> <body> <div class="header"> <h1>Gabriella Farfan</h1> <div id="nav-icon"> <div id="nav-icon3"> <a id="nav-icon3" onclick="myFunction();"> <span></span> <span></span> <span></span> <span></span> </a> </div> </div> <ul class="topnav" id="myTopnav"> <li> <a href="#">Work</a> </li> <li> <a href="About.html">About Me</a> </li> <li style="border-bottom: none"> <a href="#">Contact</a> </li> </ul> </div> </body> </html>

2 個解決方案

解決方案1
 0  2017-04-23 04:29:54

我已經解決了這個問題。 希望能幫助到你。

CSS： 

* {
    box-sizing: border-box;
}

html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    font-size: 1rem;
}

.header {
    background-color: #FFF;
    width: 100%;
    margin: 0px auto;
    display: block;
    top: 0;
    margin-top: 7%;
    height: 80px;
}

h1 {
    margin-left: 5%;
    padding-left: 1%;
    font-family: 'Lobster', cursive;
    margin-top: 0;
    float: left;
    margin-bottom: 0;
    color: #D18E8F;
}

#nav-icon {
    width: 30px;
    height: 30px;
    position: relative;
    margin-right: 7%;
    margin-top: 8px;
    /*padding-right: 1%;*/
    float: right;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    cursor: pointer;
}

#nav-icon3 span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #8c8c8c;
    border-radius: 6px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#nav-icon3 span:nth-child(1) {
    top: 0px;
}

#nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) {
    top: 10px;
}

#nav-icon3 span:nth-child(4) {
    top: 20px;
}

#nav-icon3.open span:nth-child(1) {
    top: 10px;
    width: 0%;
    left: 50%;
}

#nav-icon3.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
    top: 10px;
    width: 0%;
    left: 50%;
}

.responsive {
    /*display: none;*/

    clear: both;
    padding: 0;
    height: 160px;
}

ul.responsive {
    list-style: none;
    font-family: 'Raleway', 'sans-serif';
    float: left;
    margin-left: 7%;
    /*padding-left: 2%;*/
    margin-top: 0;
    width: 85%;
    margin-bottom: 0;
}

ul.responsive li {
    padding-top: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #c6c6c6;
}

ul.responsive li a {
    text-decoration: none;
    color: #8c8c8c;
}

ul.responsive li a:hover {
    color: #7EBEA3;
}

.topnav{
    display:none;
}

JS： 

function myFunction() {
        var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className = " responsive";
        } else {
            x.className = "topnav";
        }
    }

請讓我知道這是否是您想要的。

解決方案2
 0 已采納  2017-04-23 15:17:59

只需添加.topnav { display: none; } .topnav { display: none; }和.topnav.responsive { display: block; } .topnav.responsive { display: block; } ，您的代碼將正常運行。 

.topnav {
  display: none;
}

.topnav.responsive {
  display: block;
  clear: both;
  padding: 0;
  height: 160px;
}

您也可以添加此選項以使整個漢堡包都可以點擊（不僅是行）。 

#nav-icon3 {
  width: 30px;
  height: 30px;
  display: block;
}

您的代碼的工作叉： Сodepen

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用 flexbox 和列表項切換顯示/隱藏菜單 在菜單中水平顯示列表項 下拉菜單jquery切換項目 水平顯示菜單項 jQuery切換列表菜單問題 單擊切換按鈕時顯示向下菜單 用wordpress博客中的所有菜單項替換手機上的菜單切換按鈕 wordpress垂直顯示菜單項 在水平顯示中添加菜單項 有條件地根據項目數量切換按鈕顯示
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM