Erstellen von Menüleiste

Question

Ich möchte eine Dropdown-Menüleiste mit der Maus über Aktion mit jquery, css, html erstellen .. Bitte bin neu zu solchen Ideen kann mir helfen.

Answer 1

Ich glaube, das Sie heraus eine Tonne helfen: http://css-tricks.com/simple-jquery-dropdowns/

Answer 2

Suche nach Plugins hier - http://plugins.jquery.com/

Answer 3

Wenn Sie es von Grund auf entwickeln wollen, dann können Sie in diesem demo einen Blick darauf werfen, was wird Ihnen helfen, das grundlegende Verständnis dafür zu erhalten, wie ein Dropdown-Menü funktioniert. Wenn Sie das Rad nicht neu erfinden wollen, können Sie sich für ein Plugin entscheiden, das bereits existiert.

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