CSS-純CSS響應式菜單

Question

忙於測試僅使用CSS創建響應菜單。 我以本教程為基礎，並且設法將菜單設置為“折疊”，但是現在我很難在單擊按鈕時顯示菜單。

我的代碼：

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 /類，因為現在您的CSS正在嘗試顯示“ .menu-main-navigation-container”，而他正在尋找它僅在選中復選框之后-但是您的代碼中沒有此類的元素，並且絕對不在其容器中的此復選框之后。 選擇器“〜”表示使用sth獲取下一個元素。 例如，如果您有'p〜ul'-這意味着：在代碼中，在'p'之后但在同一容器內有'ul'的樣式。

CSS-純CSS響應式菜單

問題描述

1 個解決方案

解決方案1
2 已采納 2018-03-01 17:34:43

CSS-純CSS響應式菜單

問題描述

1 個解決方案

解決方案1 2 已采納 2018-03-01 17:34:43

解決方案1
2 已采納 2018-03-01 17:34:43