Question

我正在移动菜单中转换我的桌面菜单，但代码无效。

我正在使用复选框技巧，当选中复选框时，将出现菜单，否则菜单显示将为无。

在1280px我的桌面将切换到移动设备，但它无法按预期正常工作。

HTML代码

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Soofyantheband</title>

    <link rel="stylesheet" href="assets/css/style2.css"/>
    <link rel="stylesheet" type="text/css" href="assets/css/mini-nav_bar.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" href="assets/css/style.css"/>
</head>
<body>

    <!-- Webpage Wrap inside "wrapper" -->
    <div id="wrapper">
    <!--1.Header Section-->
        <div class="header">
            <div class="container">
                <div class="nav">       
                    <label for="toggle">&#9776;</label>
                    <input type="checkbox" id="toggle"/>
                    <header>
                        <div id="band_Logo">
                            <a href="#wrapper"></a>
                        </div>
                        <div id="menu" class="menu" style="line-height:94px; ">
                            <ul style="margin:0">           
                                <li><a href="#wrapper" style="color:#ffab00; margin-top: 2px;">Home</a></li>
                                <li ><a href="#section3" style="margin-top: 2px; color:#ffab00;">Events</a></li>
                                <li ><a href="#projectDesc" style="margin-top: 2px; color:#ffab00;">Projects</a></li>
                                <li ><a href="soofyan-unplugged.html" style="margin-top: 2px; color:#ffab00;">Unplugged</a></li>
                                <li ><a href="../Parallax/gallery.html" style="margin-top: 2px; color:#ffab00;">Gallery</a></li>
                                <li ><a href="../Parallax/videos.html" style="margin-top: 2px; color:#ffab00;">Videos</a></li>
                                <li ><a href="../Parallax/about.html" style="margin-top: 2px; color:#ffab00;">About</a></li>
                                <li ><a href="../Parallax/contact.html" style="margin-top: 2px; color:#ffab00;">Contact Us</a></li>
                            </ul>
                        </div>
                    </header>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS代码

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
}

html {
    font-family: "helvetica neue", sans-serif;
}

.nav {
    /*border-bottom: 1px solid #EAEAEB;*/
    text-align: right;
    height: 70px;
    line-height: 70px;
}

.menu {
    margin: 0 30px 0 0;
}

.menu ul li  {
    clear: right;
    text-decoration: none;
    color: gray;
    margin: 0 10px;
    line-height: 70px;
    display:none;
}

span {
    color: #54D17A;
}  

label {
    margin: 0 40px 0 0;
    font-size: 26px;
    line-height: 70px;
    display: none;
    width: 26px;
    float: right;
}

#toggle {
    display: none;
}

@media only screen and (max-width: 1280px) {
    label {
        display: block;
        cursor: pointer;
    }
    .menu ul {
        text-align: center;
        width: 100%;
        display: none;
    }
    .menu ul li a{
        display: block;
        border-bottom: 1px solid #EAEAEB;
        margin: 0;
    }
    #toggle:checked + .menu ul li a{
        display: block;
    }
}

Answer 1

您的代码中存在一些问题。

此行#toggle:checked + .menu ul li a不起作用。 .menu不是#toggle的兄弟姐妹，而是兄弟姐妹（header）的孩子。相反，使用通用兄弟组合器（~）来定位标题。
您为display: none和ul设置了li，但之后只更改了display的{{1}}类型。为ul设置display: none就足够了。

ul

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

html {
  font-family: "helvetica neue", sans-serif;
}

.nav {
  /*border-bottom: 1px solid #EAEAEB;*/
  text-align: right;
  height: 70px;
  line-height: 70px;
}

.menu {
  margin: 0 30px 0 0;
}

.menu ul li {
  clear: right;
  text-decoration: none;
  color: gray;
  margin: 0 10px;
  line-height: 70px;
}

span {
  color: #54D17A;
}

label {
  margin: 0 40px 0 0;
  font-size: 26px;
  line-height: 70px;
  display: none;
  width: 26px;
  float: right;
}

#toggle {
  display: none;
}

@media only screen and (max-width: 1280px) {
  label {
    display: block;
    cursor: pointer;
  }
  .menu ul {
    text-align: center;
    width: 100%;
    display: none;
  }
  .menu ul li a {
    display: block;
    border-bottom: 1px solid #EAEAEB;
    margin: 0;
  }
  #toggle:checked ~ header .menu ul {
    display: block;
  }
}

汉堡菜单未打开

1 个答案: