javascript - http://vimeo.com/のようなナビゲーションメニュー

Question

私は、cssと最終的にはjsを介して同様のナビゲーションを構築する方法を考えていました。「静的」な部分を複製するのに問題はありません。私が知りたいのは、ドロップダウンメニューを作成したとおりに作成する方法です。

スペースを空けるためのページ全体のスライドのように、私が見つけたすべてのスクリプトのように重なることはありません。

Answer 1

jsBin デモ

jQuery:

$('nav li:has(ul)').on('hover',function(){
    $('ul', this).stop().animate({height:'toggle'},300); 
});

HTML

  <nav>    
    <ul>      
      <li><a href="#">Join</a></li>      
      <li><a href="#">Login</a></li>      
      <li>
          <a href="#">Watch</a>
          <ul>
              <h2>Watch additional menu</h2>      
          </ul>     
      </li>            
    </ul>
 </nav>

CSS:

/* ALL ULs */
nav ul{
  list-style:none;
  width:100%;
}

/* INNER UL */
nav li > ul{
  float:left;
  display:none;
  background:#ccc;
}

/* ALL LI */
nav li{
  display:inline;
  margin:30px;
}