时间戳

首页 > 解决方案 > CSS Checkbox Hack 可折叠导航

html - CSS Checkbox Hack 可折叠导航

问题描述

我创建了一个可折叠的纯 CSS 导航菜单，它从视口的左边缘或右边缘滑入。它几乎可以工作，除了一些我目前不理解的奇怪行为：

a) 将其放在左侧时，不执行标签的旋转变换（从 + 生成 x）。

小提琴左版。

b）当通过添加注释行将整个事物放在右侧时，float: right;转换工作，但没有可见的转换。此外，菜单不是从视口边缘滑动，而是从复选框标签的左侧滑动，然后在它的右侧位置跳转并将标签的宽度添加到 ul。

小提琴正确的版本。

body {
  background-color: lightgreen;
}

a {
  color: black;
  text-decoration: none;
}


nav {
  position: fixed;
  left: 0;
  /*right: 0;*/
  z-index: 10;
}

nav ul {
  list-style-type: none;
  /*float: right;*/
  margin: 0;
  padding: 0;
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease;
}

nav a {
  display: block;
  padding: .5em;
  background-color: rgba(255, 255, 255, .5);
  transition: 0.25s;
}

nav a:hover {
  background-color: rgba(0, 0, 0, .3);
  color: white;
  transition: 0.2s;
}

/* Toggle mechanism */
nav label {
  /*float: right*/
  padding: .5em;
  cursor: pointer;
  text-align: center;
  font-size: 2em;
  transition: transform 0.5s;
  transition: color 0.3s;
}

nav label:hover {
  color: white;
}

input#menu {
  display: none;
}

input:checked ~ ul {
  width: 100%;
}

input:checked ~ label {
  transform: rotate(-45deg);
}

input:checked ~ label:hover {
  color: red;
}
<nav>
        <input type="checkbox" id="menu"><label for="menu">+</label>
          <ul>
            <li><a href="#">EntryA</a></li>
            <li><a href="#">EntryB</a></li>
            <li><a href="#">EntryC</a></li>
            <li><a href="#">EntryD</a></li>
            <li><a href="#">EntryE</a></li>
          </ul>
</nav>

是否可以在没有 JavaScript 帮助的情况下修复这些解决方案中的任何一个？

非常感谢你！

标签： htmlcsscheckboxnavigation

解决方案

这个给你：

要变换，nav label应该是块级元素（应用时float就是这种情况）

并且transitions 应该被指定为逗号分隔的集合。

body {
  background-color: lightgreen;
}

a {
  color: black;
  text-decoration: none;
}


nav {
  position: fixed;
  left: 0;
  /*right: 0;*/
  z-index: 10;
}

nav ul {
  list-style-type: none;
  /*float: right;*/
  margin: 0;
  padding: 0;
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease;
}

nav a {
  display: block;
  padding: .5em;
  background-color: rgba(255, 255, 255, .5);
  transition: 0.25s;
}

nav a:hover {
  background-color: rgba(0, 0, 0, .3);
  color: white;
  transition: 0.2s;
}

/* Toggle mechanism */
nav label {
  display:block;
  box-sizing:border-box;
  width:2em; height:2em;
  cursor: pointer;
  text-align: center;
  font-size: 2em; line-height:2;
  transition: transform .5s, color 0.3s;
}

nav label:hover {
  color: white;
}

input#menu {
  display: none;
}

input:checked ~ ul {
  width: 100%;
}

input:checked ~ label {
  transform: rotateZ(-45deg);
}

input:checked ~ label:hover {
  color: red;
}
<nav>
        <input type="checkbox" id="menu">
        <label for="menu">+</label>
          <ul>
            <li><a href="#">EntryA</a></li>
            <li><a href="#">EntryB</a></li>
            <li><a href="#">EntryC</a></li>
            <li><a href="#">EntryD</a></li>
            <li><a href="#">EntryE</a></li>
          </ul>
</nav>

“在右边”版本：使用float时有时也必须使用clear。

body {
  background-color: lightgreen;
}

a {
  color: black;
  text-decoration: none;
}


nav {
  position: fixed;
  right: 0;
  z-index: 10;
}

nav ul {
  list-style-type: none;
  float: right; clear:right;
  margin: 0;
  padding: 0;
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease;
}

nav a {
  display: block;
  padding: .5em;
  background-color: rgba(255, 255, 255, .5);
  transition: 0.25s;
}

nav a:hover {
  background-color: rgba(0, 0, 0, .3);
  color: white;
  transition: 0.2s;
}

/* Toggle mechanism */
nav label {
  float:right;
  box-sizing:border-box;
  width:2em; height:2em;
  cursor: pointer;
  text-align: center;
  font-size: 2em; line-height:2;
  transition: transform .5s, color 0.3s;
}

nav label:hover {
  color: white;
}

input#menu {
  display: none;
}

input:checked ~ ul {
  width: 100%;
}

input:checked ~ label {
  transform: rotateZ(-45deg);
}

input:checked ~ label:hover {
  color: red;
}
<nav>
        <input type="checkbox" id="menu">
        <label for="menu">+</label>
          <ul>
            <li><a href="#">EntryA</a></li>
            <li><a href="#">EntryB</a></li>
            <li><a href="#">EntryC</a></li>
            <li><a href="#">EntryD</a></li>
            <li><a href="#">EntryE</a></li>
          </ul>
</nav>

推荐阅读