JavaScript

Didaktikk

Last ned

Sponsede Lenker

jQuery: en rullegardinmeny med sklie effekt

Hjem > JavaScript > Artikler > jQuery: en rullegardinmeny med sklie effekt

Artikkel skrevet av Max Bossi
Side 1 av 2

I denne korte artikkelen presenterer jeg min jQuery plugin for å lage en enkel, men hyggelig, drop-down menyen (drop down-menyen) med sklie effekt. Faktisk må jeg være ærlig, er ikke alt mitt eget arbeid ... mitt arbeid, faktisk, er faktisk en omarbeiding av denne plugin som jeg lov til å optimalisere og utvide ved å legge til, faktisk, effekten lysbilder (slappe av).

La oss se hvordan å implementere rullegardinmenyen

Først, selvfølgelig, må vi inkludere jQuery i vår web side:

 



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

Uten dette må vi skaper, i dokumentet kroppen (<body> ...</ body>), vår meny som består av en punktliste der det er andre lister (som representerer den sene som er "rullet ut" Hover elementet mor). Her er et eksempel på kode:






 <ul id="mrwddm">



  



 <li> <a href="/"> christiane-lecomte.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/"> Vanlige spørsmå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.christiane-lecomte.com/"> Forum </ a> </ li>



  



 <li> <a href="http://blog.christiane-lecomte.com/"> Blog </ a> </ li>



  



 <li> <a href="http://tools.christiane-lecomte.com/"> Tools </ a> </ li>







 </ Ul>

Vår meny må selvfølgelig riktig stiliserte. For å gjøre dette ganske enkelt legge til disse linjene i stilarket CSS-kode:






 ul # mrwddm {margin: 0px 40px 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; bakgrunn: # EEEEEE;}







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







 # Mrwddm dem ul {min-width: 120px; margin: 3px 0px 0px 0px; padding: 0px; posisjon: absolutt; z-index: 999; synlighet: skjult; display: none;}







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







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







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

I samme kategori ...

E-Learning

	CSS (Course) Web Design og tilgjengelighet i henhold til W3C CSS og XHTML. Starter fra 29 €.
	HTML (Course) Kodespråket for Web fra 29 €.
	JavaScript (Course) Komplett guide til klient-side scripting. Starter fra 39 €.

Sponsede Lenker