JavaScript

Pedagoji

İndir

Sponsor Bağlantılar

jQuery: slayt etkisi ile bir açılır menü

Anasayfa > JavaScript > Makaleler > jQuery: slayt etkisi ile bir açılır menü

Max Bossi tarafından yazılmış Makale
2 Sayfa 1

Bu kısa yazıda benim jQuery basit oluşturmak için mevcut, ama güzel, açılır menü (açılan menü) slayt etkisi ile. Aslında, dürüst olmalı, tüm kendi iş değil ... benim iş, aslında, aslında bir uyarlaması olan bu eklenti ben aslında ekleyerek optimize etmek ve genişletmek için izin olduğumu, etki slaytlar (dinlenmek).

Açılır menüde nasıl uygulanacağını görelim

İlk olarak, tabii ki, bizim web sayfasında jQuery eklemeniz gerekir:

 



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

Bu olmadan, belge vücut (<body> ...</ body>), diğer listeler ("kusursuz" olarak tendon temsil var olan bir madde işaretli liste oluşur bizim menüsünde oluşturmanız gerekir ) madde anne üzerinde gezdirin. İşte bir örnek kod:






 <ul id="mrwddm">



  



 <li> <a href="/"> demenagement-bretagne.com </ a> </ li>



  



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



    



 <ul>



      



 <li> <a href="/javascript/guide/"> Kılavuzu </ a> </ li>



      



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



      



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



    



 </ Ul>



  



 </ Li>



  



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



    



 <ul>



      



 <li> <a href="/script/applet-java/"> Java uygulamaları </ 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.demenagement-bretagne.com/"> Forumu </ a> </ li>



  



 <li> <a href="http://blog.demenagement-bretagne.com/"> blog </ a> </ li>



  



 <li> <a href="http://tools.demenagement-bretagne.com/"> Araçları </ a> </ li>







 </ Ul>

Menüsünde, elbette, uygun stilize gerekir. Bunu yapmak için stil CSS kodunu şu satırları ekleyin:






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







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







 # Onlara Mrwddm {: block; padding: ekran 3px 10px; margin: 0px; text-decoration: none; white-space: nowrap; background: # eeeeee;}







 Hover {:; arka plan: rengi # CCCCCC: # FFFFFF;} # onlara Mrwddm







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







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







 # Mrwddm onları ul li a {padding: 5px 3px; background: # eeeeee; color: # 666666;}







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

Aynı Kategoride ...

E-Öğrenme

	CSS (Ders) W3C CSS ve XHTML göre Web Tasarım ve Erişilebilirlik. 29 € dan başlayan fiyatlarla.
	HTML (Ders) 29 € dan Web için biçimlendirme dili.
	Javascript (Ders) Istemci tarafı komut dosyası için kılavuz tamamlayın. En düşük € 39.

Sponsor Bağlantılar