CSS 复选框 Hack 可折叠导航

Question

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

a) 放在左边时，不进行label的旋转变换（把+做成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 帮助的情况下修复这些解决方案中的任何一个？

非常感谢！

Answer 1

你在这里：

要转换，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>

"At the Right"版本：使用 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>

CSS 复选框 Hack 可折叠导航

CSS Checkbox Hack Collapsible Navigation

html

css

navigation

checkbox