Question

我找到了一个仅用css编写的响应式简约菜单。当屏幕较小时，会发生魔术：当用户点击“汉堡包”图标时，菜单可以在没有javascript的情况下下拉和回滚。

转换可能归功于提取：

#nav:checked ~ nav {
max-height: 200px; /* This can be anything bigger than your nav height. The transition duration works with this */
}

nav {
  float: right;
  max-height: 0;
  width: 100%;
  -webkit-transition: max-height 0.3s; 
     -moz-transition: max-height 0.3s;
       -o-transition: max-height 0.3s;
          transition: max-height 0.3s;
}

SEE THE FULL CODE HERE

当用户点击某个项目而不是菜单图标时，是否还可以回滚菜单？

Answer 1

可能会将这些项目放入<label for="nav">

<强> CODEPEN

<强> HTML ：

<input id="nav" type="checkbox">
<label for="nav" class="button"></label>

<nav>
  <ul>
    <li><a href="#"><label for="nav">One</label></a></li>
    <li><a href="#"><label for="nav">Two</label></a></li>
    <li><a href="#"><label for="nav">Three</label></a></li>
    <li><a href="#"><label for="nav">Four</label></a></li>
  </ul>
</nav>

<强> CSS ：

header {
  overflow: hidden;
  background: #222;
}

header a, header label.button {
  display: block;
  padding: 20px;
  color: #fff;
  text-decoration: none;
  line-height: 20px;
}

header a:hover, header label.button:hover { color: #aaa; }

header label.button {
  float: right;
  padding: 18px 20px;
  cursor: pointer;
}

header label.button:after {
  content: "\2261";
  font-size: 1.8em;
}

header nav ul li label {
  display: block;
  cursor: inherit;
}

.logo {
  float: left;
  font-weight: bold;
  font-size: 1.5em;
}

nav {
  float: right;
  max-height: 0;
  width: 100%;
  -webkit-transition: max-height 0.3s; 
     -moz-transition: max-height 0.3s;
       -o-transition: max-height 0.3s;
          transition: max-height 0.3s;
}

nav ul {
  margin: 0;
  padding: 0;
   padding-bottom: 10px;
}

nav li {
  display: block;
  text-align: center;
}

nav a {
  padding: 10px;
  width: 100%;
}

#nav { display: none; }

#nav:checked ~ nav {
  max-height: 200px; /* This can be anything bigger than your nav height. The transition duration works with this */
}

@media only screen and (min-width: 700px) {

  header label.button { display: none; }

  nav {
    width: auto;
    max-height: none;
  }

  nav ul {
    padding: 0;
    padding-right: 10px;
  }

  nav li {
    display: inline-block;
    text-align: left;
  }

  header nav a {
    display: inline-block;
    padding: 20px 10px;
    width: auto;
  }

}

能够仅在CSS中回滚菜单

1 个答案: