Question

我一直试图解决这个问题，但我老老实实地输了。我制作了一个有三个级别的侧边栏：一个主菜单，当您将鼠标悬停在菜单项上时还有两个子菜单（所以它的主菜单项＆gt;子菜单项＆gt;另一个子菜单）。问题是，我对CSS动画效果不是很好，但我还是想学习。并且想知道这是否可以用它完成？

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

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

＆＃13;

    /* .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;
    }

＆＃13;

<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>

＆＃13;

谢谢！

Answer 1

我希望这会对你有所帮助。以下是您之前代码中的一些修改。您也可以在Jsfiddle

上查看

$dateFormat

*
{
  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;
}

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;
}

边栏子菜单上的CSS动画

3 个答案: