jQuery: en drop down menu med slide effekt
Side 1 af 2
I denne korte artikel vil jeg præsentere mine jQuery plugin til at skabe en enkel, men pæn, drop-down menu (drop-down menu) med slide effekt. Faktisk må jeg være ærlig, er det ikke alle mine eget arbejde ... mit arbejde, i virkeligheden er faktisk en omarbejdelse af dette plugin , som jeg lov til at optimere og udvide ved at tilføje, i virkeligheden, den virkning dias (afvikling).
Lad os se, hvordan man gennemfører drop down menu
Først, selvfølgelig, er vi nødt til at inkludere jQuery i vores web side:
<script type="text/javascript" src="jquery.js"> </ script>
Uden dette vi skal skabe i det dokument, kroppen (<body> ...</ krop>), vores menu, som er sammensat af en punktopstilling, hvor der er andre lister (der repræsenterer den sene, der er "rullet" hover på elementet moderen). Her er et eksempel på kode:
<ul id="mrwddm">
<li> <a href="/"> compagnie-awama.com </ a> </ li>
<li> <a href="#"> JavaScript </ a>
<ul>
<li> <a href="/javascript/guide/"> Guide </ a> </ li>
<li> <a href="/javascript/articoli/"> Artikler </ a> </ li>
<li> <a href="/javascript/faq/"> Ofte stillede spørgsmål </ a> </ li>
</ Ul>
</ Li>
<li> <a href="#"> Skriften </ 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.compagnie-awama.com/"> Forum </ a> </ li>
<li> <a href="http://blog.compagnie-awama.com/"> Blog </ a> </ li>
<li> <a href="http://tools.compagnie-awama.com/"> Tools </ a> </ li>
</ Ul>
Vores menu skal være, selvfølgelig, passende stiliseret. For at gøre dette skal du blot tilføje disse linjer i stylesheet CSS kode:
ul # mrwddm {margin: 40px 0px 20px 0px; padding: 0px;}
# Mrwddm li {float: left; display: inline; list-style: none;}
# Mrwddm dem en {display: block; padding: 3px 10px; margin: 0px; text-decoration: none; white-space: NOWRAP; background: # EEEEEE;}
# Mrwddm dem a: hover {background: # CCCCCC; color: # FFFFFF;}
# Mrwddm dem ul {min-width: 120px; margin: 3px 0px 0px 0px; padding: 0px; position: absolut; z-index: 999; synlighed: skjult; display: none;}
# Mrwddm dem ul li {float: none; display: inline;}
# Mrwddm dem ul li a {padding: 5px 3px; background: # EEEEEE; farve: # 666666;}
# Mrwddm dem ul li a: hover {background: # CCCCCC; color: # FF6600}
 |
CSS (Kursus)
Web Design og tilgængelighed i henhold til W3C CSS og XHTML. Fra 29 €. |
 |
HTML (Kursus)
Det markup sprog til nettet fra 29 €. |
 |
Javascript (Kursus)
Komplet guide til klient-side scripting. Fra 39 €. |