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

Question

我想像这样创建一个show hide Nav菜单..

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

---

Answer 1

我们只需更改top链接的ul属性，使其默认为减值eq top:-70px;，然后当我们将header悬停在ul时1}}通过jquery添加名为0的类的最高值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')
})