Question

你好，我在这个网络编程中真的很新，几天前刚刚学会了，并尝试制作我的响应式导航栏。我在w3school上找到了教程，我跟着它，并更改了一些代码，但它没有按预期工作。菜单成功折叠到所需的宽度，但汉堡菜单没有显示。我想我已经改变并将其与我的课程相匹配，但我不知道还有什么不对。

这是我到目前为止所尝试的内容：

＆＃13;

.navSection {
    width: 100%;
    display: inline-table;
    line-height: 30px;
    background: #1c948a;
    z-index: 3;
    box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, .3);
}

.navMenu .icon{
    display: none;
}

@media screen and (max-width: 700px) {
  .navMenu ul li:not(:first-child) {display: none;}
  .navMenu ul li.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 700px) {
  .navMenu.responsive {position: relative;}
  .navMenu.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navMenu.responsive ul li {
    float: none;
    display: block;
    text-align: left;
  }
}

.navSectionWrapper {
    width: 90%;
    margin: auto;
}

.homelink {
    text-decoration: none;
}

.navlogo {
    width: 30%;
    height: 70px;
    float: left;
}

.logo {
    display: inline-block;
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    color: #2C3E50;
    position: absolute;
}

.logoimg {
    height: 70px;
    float: left;
}

.logotext {
    font-weight: 600;
    float: right;
    line-height: 70px;
}

.logotext>span {
    color: white;
    text-shadow: 2px 2px 2px #33425B;
}

.navMenu {
    float: right;
    text-align: center;
    overflow: hidden;
}

.navMenu>ul {
    list-style: none;
}

.navMenu>ul>li {
    display: inline-block;
    line-height: 70px;
}

.navMenu>ul>li>a>span {
    color: white;
    font-weight: 700;
    font-size: 17px
}

.navMenu>ul>li>a {
    text-decoration: none;
    color: #2C3E50;
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    font-weight: 600;
    margin: 10px
}

.navMenu>ul>li>a:hover {
    color: snow;
}

＆＃13;

<div class="navSection">
        <div class="navSectionWrapper">
            <div class="navlogo">
                <a href="#" class="homelink">
                    <div class="logo">
                        <img src="img/logo.png" class="logoimg">
                        <h2 class="logotext">Let's<span>Go</span></h2>
                    </div>
                </a>
            </div>
            <div class="navMenu" id="mynavMenu">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Features</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">+<span>Download</span></a></li>
                    <li><a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a></li>
                </ul>
            </div>
        </div>
    </div>
<script>
        function myFunction() {
            var x = document.getElementById("mynavMenu");
            if (x.className === "navMenu") {
                x.className += " responsive";
            } else {
                x.className = "navMenu";
            }
        }
</script>

＆＃13;

THANKYOU

Answer 1

您的HTML使用a.icon，但您使用li.icon定位CSS。已将class="icon"移至li而非a，并稍稍修改了.icon的CSS。您在响应式视图中隐藏了:not(:first-child())，并且您要么使用:not(:last-child)，因为.icon是:last-child，或者仅使用:not(.icon)。

＆＃13;

.navSection {
    width: 100%;
    display: inline-table;
    line-height: 30px;
    background: #1c948a;
    z-index: 3;
    box-shadow: 0px 3px 5px 1px rgba(0, 0, 0, .3);
}

.navMenu .icon{
    display: none;
    float: right;
}

@media screen and (max-width: 700px) {
  .navMenu ul li:not(.icon) {display: none;}
  .navMenu ul li.icon {
    display: block;
  }
}

@media screen and (max-width: 700px) {
  .navMenu.responsive {position: relative;}
  .navMenu.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navMenu.responsive ul li {
    float: none;
    display: block;
    text-align: left;
  }
}

.navSectionWrapper {
    width: 90%;
    margin: auto;
}

.homelink {
    text-decoration: none;
}

.navlogo {
    width: 30%;
    height: 70px;
    float: left;
}

.logo {
    display: inline-block;
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    color: #2C3E50;
    position: absolute;
}

.logoimg {
    height: 70px;
    float: left;
}

.logotext {
    font-weight: 600;
    float: right;
    line-height: 70px;
}

.logotext>span {
    color: white;
    text-shadow: 2px 2px 2px #33425B;
}

.navMenu {
    float: right;
    text-align: center;
    overflow: hidden;
}

.navMenu>ul {
    list-style: none;
}

.navMenu>ul>li {
    display: inline-block;
    line-height: 70px;
}

.navMenu>ul>li>a>span {
    color: white;
    font-weight: 700;
    font-size: 17px
}

.navMenu>ul>li>a {
    text-decoration: none;
    color: #2C3E50;
    font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
    font-weight: 600;
    margin: 10px
}

.navMenu>ul>li>a:hover {
    color: snow;
}

＆＃13;

<div class="navSection">
        <div class="navSectionWrapper">
            <div class="navlogo">
                <a href="#" class="homelink">
                    <div class="logo">
                        <img src="img/logo.png" class="logoimg">
                        <h2 class="logotext">Let's<span>Go</span></h2>
                    </div>
                </a>
            </div>
            <div class="navMenu" id="mynavMenu">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Features</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">+<span>Download</span></a></li>
                    <li class="icon"><a href="javascript:void(0);" onclick="myFunction()">&#9776;</a></li>
                </ul>
            </div>
        </div>
    </div>
<script>
        function myFunction() {
            var x = document.getElementById("mynavMenu");
            if (x.className === "navMenu") {
                x.className += " responsive";
            } else {
                x.className = "navMenu";
            }
        }
</script>

＆＃13;

汉堡菜单不会显示在响应式导航栏中

1 个答案: