将垂直幻灯片动画添加到导航栏-仅CSS

debugcn 发表于 Dev

奥德雷

我的导师向我挑战，要在沙箱型项目中仅使用CSS和HTML将垂直的幻灯片动画添加到导航栏。在这一点上，我已经尝试了无数次尝试，并且需要一些帮助-至少是一些指导。我尝试过：几个动画名称，transform和translation3d，在其轴上移动元素并旋转等。

.collapsible-menu label {
    font-family: 'Chiller';
    font-size: 70px;
    display: block;
    cursor: pointer;
    background: url(C:/Users/audre/workspace/basic/assets/menu.png) no-repeat left center;
    background-size: 15%;
    padding: 10px 0px 0px 50px;
}

input#menu {
    display: none;
}

.menu-content {
    max-height: 0;
    font-family: 'Oswald', sans-serif; 
    padding: 0 0 0 50px;
    animation: 3s linear running slidein;
}

/* Toggle Effect */
input:checked +label {
    background-image: url(C:/Users/audre/workspace/basic/assets/cancel.png);  
}

input:checked ~ .menu-content {
    max-height: 100%;
}
/*Icons made by https://www.flaticon.com/authors/cole-bemis from www.flaticon.com/ */

.collapsible-menu {
    background-color: rgb(255, 255, 255);
    padding: 0px 30px;
    width: 200px;
    border-bottom: 3px solid #490000;
    box-shadow: 1px 2px 3px rgba(0,0,0,0.2);
    z-index: 5;
}

.collapsible-menu ul {
    list-style-type: none;
    padding: 0;
}

.collapsible-menu a {
    display: block;
    padding: 10px;
    text-decoration: none;
}

 <div class="collapsible-menu">
        <input type="checkbox" id="menu">
        <label for="menu">Menu</label>
        <nav class="menu-content">
            <ul>
                <li><a class="active" href="#home"></a>Home</li>
                <li><a href="./about.html" target="_blank"></a>About Audrey</li>
                <li><a href="#shop"></a>Shop</li>
                <li><a href="#contact"></a>Contact</li>
            </ul>
        </nav>
    </div>

任何帮助或提示，我们将不胜感激！我有点不知所措。

我尝试过的内容（cliffnotes版本）：

@slidein规则的@keyframes定义
各种调整/过渡玩弄的过渡声明
带有各种调整/动画的动画声明

编辑/更新：

编辑的代码是最小的可复制示例
清理不必要的声明代码
添加了到目前为止我尝试过的内容的摘要

约翰·范迪维尔

这是另一个问题，其中包含一些有用的信息，可以帮助您找到答案。

我也发现这篇文章很有帮助。

以下代码段是解决问题的一种方法。我将指出先前的实现过程中的两个关键问题：

它试图使用一种名为slideIn的CSS动画，但未定义该动画。
在transitionmax-height属性上代替动画时，至少对我来说，目标值max-height: 100%;无效。我必须以像素为单位指定它。

.collapsible-menu label {
  display: block;
  cursor: pointer;
}

input#menu {
  display: none;
}

.menu-content {
  max-height: 0;
  overflow-y: hidden;
}

input:checked~.menu-content {
  max-height: 1000px;
  transition: max-height 5s linear;
}

.collapsible-menu {
  width: 200px;
  border-bottom: 3px solid #490000;
}

.collapsible-menu ul {
  list-style-type: none;
  padding: 0;
}

.collapsible-menu a {
  display: block;
}

<div class="collapsible-menu">
  <input type="checkbox" id="menu">
  <label for="menu">Menu</label>
  <nav class="menu-content">
    <ul>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
      <li>
        <a href="#shop"></a>Shop</li>
    </ul>
  </nav>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。