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/

其中一个选项是＆＃34; FadeInLeft＆＃34;。您可以将这两个（左侧和右侧）用于您想要的菜单，您几乎不需要任何JavaScript代码。

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

祝你好运！

水平展开导航栏onmouse悬停

1 个答案: