如何创建显示隐藏导航菜单

【问题标题】：How to create a Show Hide Nav Menu如何创建显示隐藏导航菜单
【发布时间】：2015-04-27 02:34:44
【问题描述】：

我想创建一个像这样的显示隐藏导航菜单..

http://www.dtelepathy.com/blog/inspiration/22-fresh-single-page-website-for-your-inspiration

HTML 代码

<div id="menus">
<nav id="nav">
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">BIOGRAPHY</a></li>
<li><a href="#">GALLERY</a></li>
<li><a href="#">WRITINGS</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
</nav>
</div>

CSS 代码

#nav ul{
margin-top:10px;
margin-bottom:20px;
padding:50px;
}
#nav ul li{
float:left;
padding:48px;

}
#nav a:link{
color:#999;
}
#nav a:visited{
color:#000;
}
#nav a:hover{
color:#999;
border-bottom-style:solid;
}

【问题讨论】：

与论坛网站不同，我们不使用“谢谢”、“感谢任何帮助”或Stack Overflow 上的签名。请参阅“Should 'Hi', 'thanks,' taglines, and salutations be removed from posts?。顺便说一句，这是“提前致谢”，而不是“在先致谢”。

标签： javascript html css

【解决方案1】：

我们可以更改 ul 链接的 top 属性使其默认为负值 eq top:-70px; 然后当我们将 header 悬停时通过添加 ul 顶部值 0通过 jquery 调用 show 的类。

这里是example

我们要担心的主要代码是ul 和header 属性

HTML：

  <header> 
    <nav>
      <ul class="menu">
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
        <li><a href="#">menu</a></li>
      </ul>
    </nav>
  </header>

CSS：

ul {

 -webkit-transition:all 0.6s;
  position: relative;
  top: -70px;
}
.show {
  top: 0;
}

（过渡会使其成为流畅的动画，而不是立即显示）

JS：

$("header").hover(function() {
  $('ul.menu').toggleClass('show')
})

【讨论】：