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

我想创建一个显示隐藏导航菜单，如下所示。

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

最佳答案

我们只需更改top链接的ul属性，使其默认为负值eq top:-70px;，然后当我们将鼠标悬停在header上时，通过添加一个名为ul通过jquery。

这是example

我们需要担心的主要代码是0和show属性

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')
})