..


Linki sponsorowane

jQuery: rozwijane menu ze skutkiem slajdów

Artykuł napisany przez Max Bossi
Strona 1 z 2

W tym krótkim artykule przedstawię mój jQuery wtyczki do tworzenia proste, ale ładne, rozwijane menu (rozwijane menu) z mocą slajdów. W rzeczywistości, muszę być szczery, nie wszystkie mojej pracy jest ... mojej pracy, w rzeczywistości, w rzeczywistości jest przeróbką tej wtyczki , że wolno mi zoptymalizować i rozszerzać, dodając, w rzeczywistości efekt slajdów (korekta).

Zobaczmy, jak zaimplementować menu rozwijanego

Po pierwsze, oczywiście, musimy to jQuery na naszej stronie internetowej: 

 



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

Bez tego musimy stworzyć, w treści dokumentu (body ...</ <body>>), nasze menu, które składa się z listy punktowanej w którym znajdują się inne listy (reprezentujący ścięgna, które jest "rozwinięty" Najedź na matkę pozycji). Oto przykładowy kod: 






 <ul id="mrwddm">



  



 <li> <a href="/"> decoster-immobilier.com </ a> </ li>



  



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



    



 <ul>



      



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



      



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



      



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



    



 </ UL>



  



 </ Li>



  



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



    



 <ul>



      



 <li> <a href="/script/applet-java/"> aplety Java </ 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.decoster-immobilier.com/"> Forum </ a> </ li>



  



 <li> <a href="http://blog.decoster-immobilier.com/"> Blog </ a> </ li>



  



 <li> <a href="http://tools.decoster-immobilier.com/"> Narzędzia </ a> </ li>







 </ UL>

Nasze menu musi być, oczywiście, odpowiednio stylizowane. W tym celu wystarczy dodać następujące wiersze w arkuszu stylów kod CSS: 






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







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







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







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







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







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







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







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

W tej samej kategorii ...
E-Learning
CSS (Kurs) CSS (Kurs)
Web Design i dostępności zgodnie z W3C CSS i XHTML. Począwszy od 29 €.
HTML (Kurs) HTML (Kurs)
Język znaczników dla sieci od 29 €.
Javascript (Kurs) Javascript (Kurs)
Kompletny przewodnik po stronie klienta skryptów. Od 39 €.
Linki sponsorowane