Question

忙着测试使用css创建响应式菜单。我使用这个tutorial作为基础，我已经设法将菜单设置为＆＃34;崩溃＆＃34;，但现在我实际上无法实现菜单显示单击按钮。

我的代码：

的index.html

<html>
    <head>
        <title>Flex Test</title>
        <link rel="stylesheet" type="text/css" href="css/flex_test.css">
    </head>
    <body id="main-content">
        <header>
            <div id="top-nav">
                <div class="center-section">
                    <section id="logo">
                        <a href="">Home Logo</a>
                    </section>
                    <div class="collapse-menu">
                        <label for="show-menu" class="show-menu">Menu</label>
                        <input type="checkbox" id="show-menu" role="button">
                    </div>
                    <div class="navbar">
                        <ul>
                            <li><a href="">About</a></li>
                            <li><a href="">Store</a></li>
                            <li><a href="">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </header>
        <section class="landing">
        </section>
        <p class="article">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </p>
        <footer>
            <div id="bot-nav">
                <div class="center-section">
                    <div class="bot-list">
                        <ul>
                            <li><a href="">About</a></li>
                            <li><a href="">Store</a></li>
                            <li><a href="">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="copyright">
                <div class="copyright-container">
                    <p>&copy Flex Test</p>
                    <p>Designed by <a href="">Incredible Flex Inc.</a></p>
                </div>
            </div>
        </footer>
    </body>
</html>

flex_test.css

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  height: 100%;
  width: 100%;
  background: #1F2121
}

#top-nav {
  background: #1F2121;
  border-bottom: 4px solid #FFD700;
}

#bot-nav {
  background: #1F2121;
  border-top: 4px solid #FFD700;
}

#copyright {
  background: #FFD700;
}

#bot-nav ul {
  list-style: none;
  padding: 0;
}

header section {
  display: flex;
  height: 90px;
  width: 500px;
  border-left: 1px solid #FFD700;
  border-right: 1px solid #FFD700;
}

#top-nav section a {
  text-decoration: none;
  color: #FFD700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

#top-nav section a:hover {
  color: #1F2121;
  background-color: #FFD700;
}

.center-section {
  display: flex;
  max-width: 1000px;
  margin: auto;
}

.center-section > * {
  flex: 1 1 0;
}

.navbar {
  display: flex;
}

.navbar ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  align-self: center;
}

.navbar ul li {
  display: flex;
  flex: 1 1 100%;
}

.navbar ul li a {
  text-decoration: none;
  color: #FFD700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  border-right: 1px solid #FFD700;
}

.navbar ul li a:hover {
  color: #1F2121;
  background-color: #FFD700;
}

.bot-list {
  padding: 20px 0px;
}

.bot-list ul li a {
  text-decoration: none;
  color: #FFD700;
}

.landing {
  height: calc(100% - 94px);
  width: 100%;
  background: url('../images/gold-grid.png') no-repeat 50% 50%;
  background-size: cover;
}

.article {
  padding: 30px 0px;
  color: #FFD700;
}

.copyright-container {
  max-width: 1000px;
  margin: auto;
  padding: 10px 0px;
}

.copyright-container p {
  text-align: center;
}

.copyright-container a {
  text-decoration: none;
  color: #1F2121;
}

.collapse-menu {
  display: none;
}

.show-menu {
  text-decoration: none;
  color: #FFD700;
}

.show-menu:hover {
  color: #1F2121;
  background-color: #FFD700;
}

input[type=checkbox]:checked ~ .navbar {
  display: block;
  width: 500px;
  height: 50px;
}

@media screen and (max-width: 1000px) {
  .navbar {
    display: none;
  }

  .collapse-menu {
    display: inline;
  }

  .show-menu {
    display: inline-flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
  }
}

了解如何让菜单显示的一点帮助将非常感激。感谢。

编辑：更正了css中的类选择器。

Answer 1

您的代码结构错误。您的复选框应该与ul菜单链接在同一个容器中，然后您必须为此菜单使用正确的id / class，因为现在您的CSS正在尝试显示“.menu-main-navigation-container”并且他正在寻找它刚检查后复选框 - 但是代码中没有此类的元素，并且在他的容器中没有这个复选框之后。选择器'〜'表示用sth获取下一个元素。例如，如果你有'p~ul' - 它意味着：'ul'的样式在代码中的'p'之后，但在同一容器内。

css - 纯css响应式菜单

1 个答案: