..


Sponsored Links

jQuery: ein Dropdown-Menü mit Slide-Effekt

Artikel von Max Bossi geschrieben
Seite 1 von 2

In diesem kurzen Artikel präsentiere ich meine jQuery-Plugin, um eine einfache, aber schön, Drop-Down-Menü (Drop-Down-Menü) mit Rutsche Effekt zu erzeugen. In der Tat, ich muss ehrlich zu sein, ist noch nicht alles meine eigene Arbeit ... meine Arbeit, in der Tat, ist eigentlich eine Überarbeitung dieses Plugin , dass ich darf zu optimieren und durch Zugabe von in der Tat zu erweitern, die Wirkung Dias (Unwinding).

Mal sehen, wie das Dropdown-Menü implementieren

Erstens, natürlich, müssen wir jQuery in unserer Web-Seite eingebunden werden: 

 



 <script type="text/javascript" src="jquery.js"> </ script>

Ohne diese müssen wir schaffen, in dem Dokument Körper (<body> ...</ body>), unsere Speisekarte, die aus einer Liste mit Aufzählungszeichen in denen es anderen Listen (als Vertreter der Sehne, die sich "abgerollt" zusammengesetzt ist, Bewegen Sie den Artikel Mutter). Hier ist ein Beispiel-Code: 






 <ul id="mrwddm">



  



 <li> <a href="/"> cb-demolition.com </ a> </ li>



  



 <li> <a href="#"> JavaScript </ a>



    



 <ul>



      



 <li> <a href="/javascript/guide/"> Guide </ a> </ li>



      



 <li> <a href="/javascript/articoli/"> Artikel </ a> </ li>



      



 <li> <a href="/javascript/faq/"> FAQ </ a> </ li>



    



 </ Ul>



  



 </ Li>



  



 <li> <a href="#"> Schrift </ a>



    



 <ul>



      



 <li> <a href="/script/applet-java/"> Java Applets </ a> </ li>



      



 <li> <a href="/script/javascript/"> JavaScript </ a> </ li>



      



 <li> <a href="/script/script-php/"> PHP </ a> </ li>



      



 <li> <a href="/script/script-aspnet/"> ASP.Net </ a> </ li>



    



 </ Ul>



  



 </ Li>



  



 <li> <a href="http://forum.cb-demolition.com/"> Forum </ a> </ li>



  



 <li> <a href="http://blog.cb-demolition.com/"> Blog </ a> </ li>



  



 <li> <a href="http://tools.cb-demolition.com/"> Tools </ a> </ li>







 </ Ul>

Unsere Speisekarte muss natürlich entsprechend stilisiert. Dazu fügen Sie einfach diese Zeilen in das Stylesheet CSS-Code: 






 ul # mrwddm {margin: 0px 40px 20px 0px; padding: 0px;}







 Mrwddm # li {float: left; display: inline; list-style: none;}







 # Mrwddm sie a {display: block padding: 3px 10px; margin: 0px; text-decoration: none; white-space: nowrap; background: # EEEEEE;}







 # Mrwddm sie a: hover {background: # CCCCCC; color: # FFFFFF;}







 # Mrwddm ihnen ul {min-width: 120px; margin: 0px 0px 3px 0px; padding: 0px; position: absolute; z-index: 999; visibility: hidden; display: none;}







 # Mrwddm ihnen ul li {float: none; display: inline;}







 # Mrwddm ihnen ul li a {padding: 3px 5px; background: # EEEEEE; color: # 666666;}







 # Mrwddm ihnen ul li a: hover {background: # CCCCCC; color: # FF6600}

In der selben Kategorie ...
E-Learning
CSS (Kurs) CSS (Kurs)
Web Design und Barrierefreiheit gemäß W3C CSS und XHTML. Ab 29 €.
HTML (Kurs) HTML (Kurs)
Die Markup-Sprache für das Web ab 29 €.
JavaScript (Kurs) JavaScript (Kurs)
Ein vollständiger Reiseführer von Client-seitiges Scripting. Ab 39 €.
Sponsored Links