侧边栏子菜单上的 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>
              

Answer 2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Multi-Level Drop Down Menu with Pure CSS</title>
<style>
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #1bc2a2;
}

ul li {
  display: block;
  position: relative;
  float: left;
  background: #1bc2a2;
}

/* This hides the dropdowns */


li ul { display: none; }

ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

ul li a:hover { background: #2c3e50; }

/* Display the dropdown */


li:hover > ul {
  display: block;
  position: absolute;
}

li:hover li { float: none; }

li:hover a { background: #1bc2a2; }

li:hover li a:hover { background: #2c3e50; }

.main-navigation li ul li { border-top: 0; }

/* Displays second level dropdowns to the right of the first level dropdown */


ul ul ul {
  left: 100%;
  top: 0;
}

/* Simple clearfix */



ul:before,
ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

ul:after { clear: both; }
</style>
</head>

<body>
<ul class="main-navigation">
  <li><a href="#">Front End Design</a>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a>
        <ul>
          <li><a href="#">Resets</a></li>
          <li><a href="#">Grids</a></li>
          <li><a href="#">Frameworks</a></li>
        </ul>
      </li>
      <li><a href="#">JavaScript</a>
        <ul>
          <li><a href="#">Ajax</a></li>
          <li><a href="#">jQuery</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
<h1>Multi-Level Drop Down Menu with Pure CSS</h1>
<div class="css-script-ads"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2783044520727903";
/* CSSScript Demo Page */
google_ad_slot = "3025259193";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script> 
      <script type="text/javascript"
src="//pagead2.googlesyndication.com/pagead/show_ads.js">
</script></div>
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-46156385-1', 'cssscript.com');
  ga('send', 'pageview');

</script>
</body>
</html>

希望对您有所帮助。请查看并告诉我。

Answer 3

刚刚修改了你的css。检查这是否有帮助。 jsfiddle

.subnav {
  position: fixed;
  background-color: red;
  margin-top: 0;
  top: 75px;
  left: 75px;
  height: 100vw;
  opacity:0;
  overflow:hidden;
}
.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 .subnav
{
    transform:75px;
  transition: transform .5s;
}
.sidebar:hover .subnav{
  transform: translateX(85px)
}
.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;
}
.nav-item:hover .subnav {
  opacity: 1;
}