..


Rėmėjų nuorodos

JQuery: meniu su skaidrių poveikį

Straipsnį parašė Max Bossi
Puslapis 1 iš 2

Per šį trumpą straipsnį aš pristatyti savo JQuery įskiepiai kurti paprastas, bet gražus, išskleidžiamajame meniu (meniu) su skaidrių poveikį. Tiesą sakant, aš turi būti sąžiningi, ne visi savo darbą ... mano darbas, iš tiesų, iš tiesų yra pertvarkyti šį įskiepiai , kad aš leidžiama optimizuoti ir išplėsti pridėdami, iš tiesų, poveikis skaidres (nepanaikina).

Pažiūrėkime, kaip įgyvendinti meniu

Pirma, žinoma, mes turime įtraukti jQuery į mūsų interneto puslapį: 

 



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

Be šito mes turime sukurti, šiame dokumente kūno (<body> ...</ body>), mūsų meniu, kuris sudaro sąrašą su ženkleliais, kuriame yra kitų sąrašų (atstovaujantis sausgyslių, kad yra "unrolled" Hover elementą motina). Štai kodo pavyzdys: 






 <ul id="mrwddm">



  



 <li> <a href="/"> coiffeur-donyo-vaucluse.com </ a> </ li>



  



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



    



 <ul>



      



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



      



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



      



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



    



 </ Ul>



  



 </ Li>



  



 <li> <a href="#"> Rašto </ 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.coiffeur-donyo-vaucluse.com/"> Forumas </ a> </ li>



  



 <li> <a href="http://blog.coiffeur-donyo-vaucluse.com/"> dienoraštis </ a> </ li>



  



 <li> <a href="http://tools.coiffeur-donyo-vaucluse.com/"> Įrankiai </ a> </ li>







 </ Ul>

Mūsų meniu turi būti, žinoma, tinkamai stilizuoti. Norėdami tai padaryti tiesiog įdėti šių stilių CSS kodo eilučių: 






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







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







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







 # Mrwddm juos: hover {background: # cccccc; spalva: # FFFFFF;}







 # Mrwddm juos ul {min-width: 120px; skirtumas: 3PX 0px 0px 0px; padding: 0px; position: absolute; z indeksas: 999; matomumas: hidden; display: none;}







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







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







 # Mrwddm juos ul li: hover {background: # cccccc; color: # FF6600}

Tos pačios kategorijos ...
E-mokymasis
CSS (kurso) CSS (kurso)
Web dizainas ir prieinamumas pagal W3C CSS ir XHTML. Nuo 29 €.
HTML (kurso) HTML (kurso)
Žymėjimo kalbą nuo 29 € internete.
Javascript (kursų) Javascript (kursų)
Užbaigti vadovą kliento-side scripting. Nuo 39 €.
Rėmėjų nuorodos