Question

您好我正在学习响应式设计，我正在尝试制作一个响应式导航栏，当您在手机或移动设备上访问时会转到菜单！除了移动设备上显示的所有导航项目外，一切正常，我不知道为什么！这是代码：

<div class="container">
    <div class="navbar">
      <ul style="padding-left: 0px;">

        <li class="logo"> <a href="#">RONNIE<b>GURR</b></a></li>

                            <section class="div_navbar_items">
                              <li class="navbar_items"> <a href="#home">HOME</a> </li>
                              <li class="navbar_items"> <a href="#about_me">ABOUT US</a> </li>
                              <li class="navbar_items"> <a href="#skills">GALLERY</a> </li>
                              <li class="navbar_items"> <a href="#projects">SHOP</a> </li>
                              <li class="navbar_items"> <a href="#contact">CONTACT</a> </li>
                            </section>

                            <li class="icon">
                              <a href="#" onclick="navBarFunction()"> &#9776;</a>
                            </li>
                        </ul>
                    </div>
                </div>

    <script src="js/responsive.js"></script>

这是CSS：

.container {
  margin: auto;
  width: 90%;
}
.navbar {
  position: fixed;
  z-index: 100;
  overflow: hidden;
  margin: auto;
  width: 100%;
  left:0;
  top:0;
}
.navbar li.logo,
.navbar li.navbar_items {
  list-style-type: none;
  display: inline-block;
}
.navbar li a {
  margin-top: 50px;
  font-family: 'Cabin', sans-serif;
  font-size: 1.3em;
  color: white;
  font-weight: 700px;
  display: inline-block;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
}

.navbar li.navbar_items a:hover {
  border-bottom-style: solid;
  border-bottom-color: white;
  /*   padding-bottom: 5px; */
}

.navbar li.icon {
  display: none;
}

.div_navbar_items {
  float: right;
  padding-right:1%;
}
/*Start of mobile nav*/
@media screen and (max-width:875px) {
  .navbar li.navbar_items {
    display: none;
  }
  .navbar li.icon {
    float: right;
    display: inline-block;
    position: absolute;
    right: 0;
    top: 19px;
  }
}
@media screen and (max-width:875px) {
  .navbar.responsive {
    position:fixed;
    width: 100%;
    height: 100vh;
    background-color: rgba(236,201,205, 1);
    transition: background-color .6s;
  }

  .navbar.responsive li.logo {
    floatL: left;
    display: block;
  }
  .navbar.responsive .div_navbar_items {
    float: none;
    padding-right:0;
  }

  .navbar.responsive li.navbar_items {
    display: block;
    padding: 50px;
    font-size: 25px;
  }
  .navbar.responsive li.navbar_items a {
    display: block;
    text-align: center;
  }

  .navbar.responsive li.navbar_items a:hover{
    color:#17171e;
    border-bottom-color: transparent;

  }
}
/*End of mobile nav*/

这是JS：

function navBarFunction() {
    document.getElementsByClassName("navbar")[0].classList.toggle("responsive");
}

codepen：https://codepen.io/anon/pen/JyEoWY

Answer 1

我认为这会让你朝着正确的方向前进，然后你可以从这里决定你想做什么。您将导航栏设置为100vh，这是屏幕高度的100％，因此您需要确保导航元素上的填充和边距不是那么多。尝试从这两种样式中删除任何边距和填充，然后从此处自行调整。如果您不想更改此内容，请参阅我的答案的第二部分，然后只需将导航滚动。

public class MyServer {

public static void main(String[] args) {
    try {

        HttpServer server = GrizzlyHttpServerFactory.createHttpServer(URI.create("someURL"), resourceConfig, false);
        Runtime.getRuntime().addShutdownHook(new Thread(() -> {
            server.shutdownNow();
        }));

        server.start();
        Thread.currentThread().join();
        server.shutdown(); //this line is never reached
    } catch (IOException | InterruptedException ex) {
        //exception handling
    }
}
}

另外，如果你查看.navbar样式（你的codepen的第8行），你将它设置为overflow：hidden。您可以使用滚动溢出来更新.navbar.responsive类，以使其正常工作。

.navbar li a {
   margin-top: 0px;
}

@media screen and (max-width: 875px) {
.navbar.responsive li.navbar_items {
    display: block;
    padding: 0px;
    font-size: 25px;
}
}

Answer 2

我想这会发生，因为你制作了.navbar.responsive { position:fixed; 你只是无法观看阻止的所有内容，因为它不允许滚动。当我将此属性更改为绝对时，我查看了所有菜单项。

顺便说一句，你用px，font-weight: 700px编写CSS属性font-weight，但它不应该是px，它是相对值：font-weight: 700

响应式导航不显示所有项目

2 个答案: