Dies ist ein sehr kurzer Beitrag darüber, wie wir können sehr einfach ein animiertes Menü mit jQuery Navigation ohne Plugin. Sie müssen horizontal oder veritical Navigations-Menüs, die ausdehnt und seine Größe auf Rollover gesehen haben. Bevor diese JavaScript-Framework kam, mussten wir ziemlich viel Code zu tun, um die Dinge zu erledigen. Warum? Das dumme Cross-Browser-Handling. Ich will nicht von vorne beginnen am IE.
Ok, hier ist die Sache. Wir sind einfach über eine ungeordnete Liste, um eine horizontale Menü, das sich ausdehnt und zusammenzieht machen. Kodex ist tot einfach. Lassen Sie uns auf der Markup ersten Blick.
<div id="navcontainer"> <ul id="navlist"> <li> <a href="http://www.google.com"> Google </ a> </ li> <li> <a href="http://www.yahoo.com"> Yahoo </ a> </ li> <li> <a href="http://www.msn.com"> MSN </ a> </ li> <li> <a href="http://www.lycos.com"> Lycos </ a> </ li> <li> <a href="http://www.baidu.com"> Baidu </ a> </ li> </ Ul> </ Div>
Also haben wir einige Listenelemente gibt. Also damit sie wie horizontales Menü erscheinen würden wir brauchen etwas CSS die wie folgt aussieht
: inline ; } #navcontainer ul li li {display: inline;} # navcontainer ul li
Und der letzte Teil .. Zum Tanzen zu bringen beim Mouseover. Ganz einfach mit der belebten Funktion. Nur einige dieser Zeilen unterhalb tut den Trick. Werfen Sie einen Blick.
( ) { $ ( "#navlist $ (Function () {$ ("# navlist
Das ist es!! In Aktion sehen










































Recent Comments