Wenn ein großes Untermenü in einem begrenzten Navigationsmenübereich platziert werden muss, verwenden wir normalerweise ein Dropdown-Menü, um den Platzmangel auszugleichen. In diesem Artikel erfahren Sie, wie Sie mit jQuery und CSS in kürzester Zeit ein dynamisches Dropdown-Menü erstellen.
XHTML
Der erste Schritt besteht darin, die JQuery-Bibliothek in den Kopfteil der Seite einzuführen, was erforderlich ist.
<script type="text/javascript" src="js/jquery.js"></script>
Dann habe ich eine ungeordnete Liste verwendet, um das Menü zu erstellen.
<ul class="menu"> <li><a href="#">首页</a></li> <li><a href="#">服务</a></li> <li><a href="#">案例</a></li> <li><a href="#">关于</a></li> <li><a href="#">BLOG</a></li> </ul>
Es ist auf den ersten Blick klar und sieht sehr einfach aus. Da das Dropdown-Menü zunächst geschlossen ist, muss ich auch eine sichtbare Schaltfläche erstellen, die das Dropdown-Menü direkt auslösen kann drücken Sie die Taste zur Vereinfachung. Und platzieren Sie das Bild oben in der Menüliste
<img src="nav.gif" width="184" height="32" class="menu_head" />
CSS
Erstellen Sie CSS-Stile für die jeweiligen Menüs, siehe Code:
.menu_head{border:1px solid #998675; background:#f30}
.menu{display:none; width:184px; border:1px solid #998675; border-top:none}
.menu li{list-style:none; background:#493e3b}
.menu li a{padding:10px; display:block;color:#fff; text-decoration:none;}
.menu li a:hover{font-weight:bold;}
.menu li.alt{background:#362f2d;}
Es ist erwähnenswert, dass der .menu li.alt-Stil zur Unterscheidung von ungeraden und geraden Zeilen und Zeilenumbrüchen verwendet wird, was sich im folgenden JQuery-Code widerspiegelt.
jQuery
Im jQuery-Code muss ich zuerst die Dropdown-Menüzeilen unterscheiden und den geraden Zeilen einen Stil geben: alt. Fügen Sie dann ein Klick-Trigger-Ereignis für die Bildschaltfläche hinzu, und das Dropdown-Menü kann umgeschaltet werden, wenn auf die Schaltfläche geklickt wird.
$(function(){
$(".menu li:even").addClass("alt");
$("img.menu_head").click(function(){
$(".menu").slideToggle("fast");
});
});
Hinweis, Ich habe die slideToggle-Methode von jQuery verwendet, um das Menü gleitend anzuzeigen und auszublenden, und der Effekt ist sehr gleichmäßig.
Das Obige ist die gemeinsame Nutzung von jQuery in Kombination mit CSS, um ein dynamisches Dropdown-Menü zu erstellen. Ich hoffe, es wird für das Lernen aller hilfreich sein.
