如何創建顯示隱藏導航菜單

Question

我想創建一個顯示隱藏導航菜單，如下所示。

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

我們可以只更改ul鏈接的top屬性，使其默認為負值eq top:-70px; 然后，當我們將header懸停時，通過添加一個名為jquery的類show將ul最高值ul 0 。

這是例子

我們需要擔心的主要代碼是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')
})