創建菜單欄

Question

我想創建一個下拉菜單欄，鼠標懸停在使用jQuery，CSS，HTML的動作.. 請任何人都可以幫助我的新想法。

Answer 1

我相信這將幫助你一噸： http://css-tricks.com/simple-jquery-dropdowns/

Answer 2

搜索插件這裏 - http://plugins.jquery.com/

Answer 3

如果你想從從頭開發它，那麼你可以在這個demo看一看，這將幫助您瞭解下拉菜單的工作原理。如果你不想重新發明輪子，那麼你可以選擇其他人已經提到的插件。

HTML

<ul id="menu"> 
    <li class="menuitem"> 
     <a href="#">Menu Item 1</a> 
     <div class="submenu"> 
      <div>1</div> 
      <div>2</div> 
     </div> 
    </li> 
    <li class="menuitem"> 
     <a href="#">Menu Item 2</a> 
     <div class="submenu"> 
      <div>3</div> 
      <div>4</div> 
     </div> 
    </li> 
    <li class="menuitem"> 
     <a href="#">Menu Item 3</a> 
     <div class="submenu"> 
      <div>5</div> 
      <div>6</div> 
     </div> 
    </li> 
</ul> 

CSS

#menu li.menuitem 
{ 
    width: 100px; 
    height: 30px; 
    float: left; 
    margin: 0 10px; 
} 
.submenu 
{ 
    display: none; 
    border-bottom: 1px solid #a9a9a9; 
     border-left: 1px solid #a9a9a9; 
     border-right: 1px solid #a9a9a9; 
} 
.submenuactive 
{ 
    display: block; 
     border-bottom: 1px solid #a9a9a9; 
     border-left: 1px solid #a9a9a9; 
     border-right: 1px solid #a9a9a9; 
} 

jQuery的

$(function(){ 
    $("#menu li.menuitem").hover(function(){ 
     $(this).find("div.submenu").removeClass("submenu").addClass("submenuactive"); 
    }, 
    function(){ 
     $(this).find("div.submenuactive").removeClass("submenuactive").addClass("submenu"); 
    }); 
});