création de la barre de menu

Question

Je veux créer une barre de menu déroulant avec l'action de la souris en utilisant jquery, css, html .. S'il vous plaît suis nouveau à de telles idées quelqu'un peut-il m'aider.

Answer 1

Je pense que cela vous aidera à une tonne: http://css-tricks.com/simple-jquery-dropdowns/

Answer 2

Rechercher plugins ici - http://plugins.jquery.com/

Answer 3

Si vous voulez développer à partir de zéro, vous pouvez jeter un oeil à ce demo, qui vous aidera à comprendre le fonctionnement d'un menu déroulant. Si vous ne voulez pas réinventer la roue, vous pouvez opter pour n'importe quel plugin déjà existant comme mentionné par d'autres.

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