javascript - 鼠标悬停时水平展开导航栏

Question

我有一个简单的导航栏，但是我想改进导航栏，当我单击一个按钮时，导航栏会通过按钮从两侧水平展开。因此，我将在中心有一个按钮，单击后将从左和右形成菜单。

HTML

<nav align="middle">
<ul>
    <li><a href="#"><img src="images/video-1.png" class="video" style="width:100px;height:50px;"></a></li>
    <li><a href="#"><img src="images/news-1.png" class="news" style="width:100px;height:50px;"></a></li>
    <li><a href="#"><img src="images/logo-4.png" class="home" style="width:80px;height:80px;"onmouseover="this.src='images/logo-4-hover.png';"
 onmouseout="this.src='images/logo-4.png';"></a></li>
    <li><a href="#"><img src="images/games-1.png" class="games" style="width:100px;height:50px;"></a></li>
    <li><a href="#"><img src="images/music-1.png" class="music" style="width:100px;height:50px;"></a></li>
</ul>
</nav>

CSS

li {

display: inline;
margin-right: .75em;
list-style: none;
margin: 0;
padding: 0;
}

html,body {
height:100%;  /* new */
}


ul {
position: fixed;
bottom: 0;
width: 100%;
list-style: none;
margin: 0;
padding: 0;
border: 5px solid black;
border-width: 5px 0;  
background-color: #515151;
}

Answer 1

考虑使用 Animate.css。链接在这里:http://daneden.github.io/animate.css/

选项之一是“FadeInLeft”。您可以将这两个(左和右)用于您想要的菜单，并且几乎不需要任何 JavaScript 代码。

您可以将它们应用到左侧按钮和右侧按钮，并在单击内部按钮后使它们继续单击。

祝你好运!