像http://vimeo.com/这样的导航菜单

时间:2012-11-22 13:34:54

标签: javascript jquery css

我想知道如何通过css和最终js构建类似的导航。我没有问题复制"静态"部分,我想知道的是如何制作下拉菜单。

就像整个页面幻灯片为它腾出空间一样,它并没有像我发现的所有脚本那样重叠。我很欣赏一个解释,或者甚至更好的在网络上的某个地方,我已经无法做到找到。

1 个答案:

答案 0 :(得分:1)

jsBin demo

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