css - 纯css响应式菜单

问题描述 投票：0回答：1

忙着测试用css创建一个响应式菜单。我用这个tutorial作为基础，我设法让菜单“崩溃”，但现在我在点击按钮时实际显示菜单显示有问题。

我的代码：

的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中的类选择器。

html css
1个回答
2
投票

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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.