html - 侧边栏子菜单上的 CSS 动画

Question

我一直在努力解决这个问题，但老实说我迷路了。我正在制作一个具有三个级别的侧边栏:一个主菜单，当您将鼠标悬停在菜单项上时还有两个子菜单(因此它是主菜单项>子菜单项>另一个子菜单)。问题是，我不太擅长 CSS 动画，但我正在努力学习。想知道这是否可以用它来完成？

到目前为止，这是我的代码。最初，我开始使用 JS，但 stackoverflow 告诉我使用 CSS 动画会更容易。老实说，这看起来更干净。无论如何，目前，当您将鼠标悬停在侧边栏上时，它会在旁边显示图标标题。但是，当您分别将鼠标悬停在每个菜单项上时，我应该如何让子菜单出现呢？我应该通过在悬停时出现一个全新的 div 来做到这一点，还是应该通过扩展现有的 div 来做到这一点(这似乎不是一个好主意)？

正确的做法是什么？我应该在哪些元素上添加 CSS 过渡以实现平滑的滑入侧边栏？

    /* .subnav {
      position: fixed;
      background-color: red;
      margin-top: 0;
      top: 75px;
      left: 75px;
      height: 100vw;
    }
    my poor attempt at submenu */
    
    .sidebar {
      margin-top: 75px;
      position: fixed;
      width:75px;
      height:100vw;
      top:0;
      left:0;
      z-index:100;
      background-color: #292a2c;
      color: #000;
      overflow: hidden;
      transition: width .5s;
    }
    
    .sidebar:hover {
      width: 160px;
    }
    .sidebar ul {
      width:200px;
    }
    .sidebar a i {
      font-size: 30px;
    }
    .sidebar a {
      color:#fff;
      font-size:14px;
      text-decoration:none;
    }
    .nav-item {
      padding-left: 8px;
    }
    .nav-item:hover {
      background-color: $primary-color;
    }
    span {
      display: none;
      font-size: 14px;
    }
    .sidebar:hover span {
        display: initial;
    }

<div class="sidebar">
  <ul class="nav flex-column m-0">
    <li class="nav-item py-2">
      <a class="nav-link" href="#">
        <i class="fa fa-envelope-open" aria-hidden="true"></i> 
        <span class="pl-1">
          Item
        </span>
      </a>
      <ul class="nav subnav flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">
            Overview 
            <span class="sr-only">
              (current)
            </span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Reports</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Analytics</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Export</a>
        </li>
      </ul>
    </li>
  </ul>
</div>

谢谢!

Answer 1

希望对您有所帮助。这是对您以前的代码的一些修改。 您也可以在Jsfiddle上查看

*
{
  color: #fff;
}
/* .subnav {
      position: fixed;
      background-color: red;
      margin-top: 0;
      top: 75px;
      left: 75px;
      height: 100vw;
    }
    my poor attempt at submenu */
    
    .sidebar {
      margin-top: 75px;
      position: fixed;
      width:20px;
      height:100vw;
      top:0;
      left:0;
      z-index:100;
      background-color: #292a2c;
      color: #000;
      overflow: hidden;
      transition: width .5s;
    }
    
    .sidebar:hover {
      width: 250px;
    }
    .sidebar ul {
      width:200px;
    }
    .sidebar a i {
      font-size: 30px;
    }
    .sidebar a {
      color:#fff;
      font-size:14px;
      text-decoration:none;
    }
    .nav-item {
      padding-left: 8px;
    }
    .nav-item:hover {
      background-color: $primary-color;
    }
    span {
      display: none;
      font-size: 14px;
    }
    .sidebar:hover span {
        display: initial;
    }
    
    
    

/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu, .submenu1 {
  padding: 0;
  margin: 0;
}

/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
  display: block;
  text-decoration: none;
  padding: 10px;
}

/* add hover behaviour */
.mainmenu a:hover {
    background-color: #C5C5C5;
}

.mainmenu li:hover .submenu {
  display: block;
  max-height: 200px;
}

.submenu li:hover .submenu1 {
  display: block;
  max-height: 200px;
}

.submenu a
{
}
.submenu li
{
  padding-left: 15px;  
}

.submenu1 a
{
}
.submenu1 li
{
  padding-left: 20px;  
}
/* hover behaviour for links inside .submenu */
.submenu a:hover {
  background-color: #666;
}

/* this is the initial state of all submenus.
  we set it to max-height: 0, and hide the overflowed content.
*/
.submenu,
.submenu1{
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

<div class="sidebar">
  <ul class="nav flex-column m-0">
    <li class="nav-item py-2">
      <a class="nav-link" href="#">
        <i class="fa fa-envelope-open" aria-hidden="true"></i>
        <span class="pl-1">Item</span>
      </a>
<nav class="navigation">
  <ul class="mainmenu">
  <li><a href=""><span class="sr-only"></span>Home</a></li>
    <li><a href="">About</a>
      <ul class="submenu">
        <li><a href="">Team</a></li>
        <li><a href="">Contact Us</a>
          <ul class="submenu1">
            <li><a href="">Phone</a></li>
            <li><a href="">Email</a></li>
            <li><a href="">Fax</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="">Our Products</a></li>
  </ul>
</nav>    </li>
  </ul>
</div>