Question

编辑：代码笔示例-https://codepen.io/earleyj1/pen/YjpNZK（您需要缩小浏览器窗口以进行响应式导航）

我正在寻找具有打开/关闭动画的可折叠导航栏的CSS Only解决方案。导航栏打开时的高度可以是任意值。

我正在用SASS编写样式，但是在使用它们之前，它们会被编译为缩小的CSS文件。

.navbar-dropdown {
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    li {
      display: inline-block;
      position: relative;
      a {
        box-sizing: border-box;
        display: block;
        color: $nav-anchor;
        font-weight: 300;
        padding: 1rem;
        text-decoration: none;
        transition: background .5s;
        &:hover,
        &:focus,
        &:focus-within {
          color: $nav-anchor-hover
        }
      }
      ul {
        background: $nav-dropdown-background;
        display: none;
        left: 0;
        position: absolute;
        top: 56px;
        min-width: 10rem;
      }
      &:hover,
      &:focus,
      &:focus-within {
        background: $nav-hover;
        ul {
          display: block;
          li {
            display: list-item;
            padding: .5rem;
            &:hover,
            &:focus,
            &:focus-within {
              background: $nav-dropdown-hover;
            }
            a {
              color: $nav-anchor-child;
              &:hover,
              &:focus,
              &:focus-within {
                color: $nav-anchor-child-hover
              }
            }
          }
        }
      }
    }
  }
}


/*Style 'show menu' label button and hide it by default*/

.nav-toggle {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #333;
  background: #18453b;
  text-align: right;
  padding: 10px 0;
  display: none;
}


/*Hide checkbox*/

#nav-toggle {
  display: none;
  opacity: 0;
  animation: anim-back .3s ease-in-out;
}


/*Show menu when invisible checkbox is checked*/

#nav-toggle:checked~#menu {
  display: block;
}


/*Responsive Styles*/

@media screen and (max-width: 760px) {
  /*Make dropdown links appear inline*/
  #menu {
    display: none;
  }
  /*Create vertical spacing*/
  li {
    margin-bottom: 1px;
  }
  /*Make all menu links full width*/
  ul li,
  li a {
    width: 100%;
  }
  /*Display 'nav toggle'*/
  .nav-toggle {
    display: block;
  }
}

<div class="nav-container">
  <label for="nav-toggle" class="nav-toggle button">Menu</label>
  <input type="checkbox" id="nav-toggle" role="button">
  <div id="menu" class="container">
    <nav id="" class="navbar navbar-dropdown">
      <ul>
        <li><a href="#">About</a>
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
          </ul>
        </li>
        <li><a href="#">Students</a>
          <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
          </ul>
        </li>
        <li><a href="#">Faculty & Staff</a></li>
        <li><a href="#">Alumni & Friends</a></li>
        <li><a href="#">Research</a></li>
        <li><a href="#">Diversity</a></li>
      </ul>
    </nav>
  </div>
</div>

我可以使导航折叠起来并很好地展开，但是我正在寻找一种方法，当单击该按钮以仅使用CSS来打开或关闭菜单时，该菜单的打开/关闭就具有动画效果。

Answer 1

打开时所述导航栏的高度可以是任意值。

我能想到几种解决方案。

第一包括通过翻译隐藏#menu ul。

它可以在任何高度上工作。

#menu {
  overflow: hidden;
}
#menu ul {
  transform: translateY(-100%);
  transition: transform .3s;
  margin: 0;
}
#nav-toggle:checked ~ #menu ul {
  transform: translateY(0);
}

<label for="nav-toggle" class="nav-toggle button">Menu</label>
    <input type="checkbox" id="nav-toggle" role="button">
    <div id="menu" class="container">
        <nav id="" class="navbar navbar-dropdown">
            <ul>
                <li><a href="#">About</a>
                    <ul>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Students</a>
                    <ul>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 2</a></li>
                            <li><a href="#">Link 3</a></li>
                        </ul>
                </li>
                <li><a href="#">Faculty & Staff</a></li>
                <li><a href="#">Alumni & Friends</a></li>
                <li><a href="#">Research</a></li>
                <li><a href="#">Diversity</a></li>
            </ul>
        </nav>
    </div>

这是一个较旧的解决方案，如果您知道，则高度不会大于 x 。

您知道，在CSS中，您无法从display: block;到display: none;进行动画处理。

一个简单的技巧是将max-height属性从 0 设置为一个足够大的值。

在您的示例中：

#menu { 
  max-height: 0; 
  overflow: hidden; 
  transition: max-height .5s;
}
#nav-toggle:checked ~ #menu {
  max-height: 800px; /* A value big enough for your menu*/
}

 <label for="nav-toggle" class="nav-toggle button">Menu</label>
    <input type="checkbox" id="nav-toggle" role="button">
    <div id="menu" class="container">
        <nav id="" class="navbar navbar-dropdown">
            <ul>
                <li><a href="#">About</a>
                    <ul>
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Students</a>
                    <ul>
                            <li><a href="#">Link 1</a></li>
                            <li><a href="#">Link 2</a></li>
                            <li><a href="#">Link 3</a></li>
                        </ul>
                </li>
                <li><a href="#">Faculty & Staff</a></li>
                <li><a href="#">Alumni & Friends</a></li>
                <li><a href="#">Research</a></li>
                <li><a href="#">Diversity</a></li>
            </ul>
        </nav>
    </div>

动画滑动打开/关闭的可折叠导航栏的仅CSS解决方案？

1 个答案: