メニューバーを作成する

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