..


Σύνδεσμοι διαφημιζόμενων

jQuery: ένα drop down μενού, με ισχύ διαφάνεια

Το άρθρο γράφτηκε από τον Max Bossi
Σελίδα 1 από 2

Σε αυτό το σύντομο άρθρο θα παρουσιάσω jQuery plugin μου για να δημιουργήσετε ένα απλό, αλλά ωραία, drop-down μενού (drop-down menu), με ισχύ διαφάνεια. Στην πραγματικότητα, πρέπει να είμαι ειλικρινής, δεν είναι μόνο δική μου δουλειά ... τη δουλειά μου, στην πραγματικότητα, είναι στην πραγματικότητα μια αναμόρφωση του plugin αυτό που είμαι επιτρέπεται να βελτιστοποιήσουν και να επεκτείνει με την προσθήκη, στην πραγματικότητα, τις διαφάνειες αποτέλεσμα (χαλάρωση).

Ας δούμε πώς να εφαρμόσει το drop down μενού

Πρώτον, φυσικά, πρέπει να περιλαμβάνουν jQuery στην ιστοσελίδα μας: 

 



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

Χωρίς αυτό πρέπει να δημιουργήσουμε, στο σώμα του εγγράφου (<body> σώμα ...</>), το μενού μας που αποτελείται από μια λίστα με κουκκίδες στο οποίο υπάρχουν και άλλες λίστες (που εκπροσωπεί τον τένοντα που είναι "ξετυλίγεται" Hover στη μητέρα στοιχείο). Εδώ είναι ένα δείγμα κώδικα: 






 <ul id="mrwddm">



  



 <li> <a href="/"> corinne-fleurs-gironde.com </ a> </ li>



  



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



    



 <ul>



      



 <li> <a href="/javascript/guide/"> Οδηγός </ a> </ li>



      



 <li> <a href="/javascript/articoli/"> άρθρα </ a> </ li>



      



 <li> <a href="/javascript/faq/"> Συχνές ερωτήσεις </ a> </ li>



    



 </ Ul>



  



 </ Li>



  



 <li> <a href="#"> γραφή </ 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.corinne-fleurs-gironde.com/"> Forum </ a> </ li>



  



 <li> <a href="http://blog.corinne-fleurs-gironde.com/"> Blog </ a> </ li>



  



 <li> <a href="http://tools.corinne-fleurs-gironde.com/"> Εργαλεία </ a> </ li>







 </ Ul>

Το μενού μας πρέπει να είναι, φυσικά, κατάλληλα σχηματοποιημένη. Για να γίνει αυτό απλά προσθέστε αυτές τις γραμμές στο φύλλο στυλ CSS κώδικα: 






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







 # Mrwddm li {float: αριστερά? Απεικόνιση: inline? List-style: κανένας?}







 # Mrwddm τους μια {display: block? Padding: 10px 3px? Περιθώριο: 0px? Text-decoration: none? Λευκό-space: nowrap? Φόντο: # EEEEEE?}







 # Mrwddm τους ένα: hover {background: # CCCCCC? Χρώμα: # FFFFFF?}







 # Mrwddm τους ul {min-width: 120px? Περιθώριο: 0px 0px 3px 0px? Padding: 0px? Θέση: απόλυτη? Z-index: 999? Ορατότητα: κρυφή? Display: none?}







 # Mrwddm τους ul li {float: κανένας? Απεικόνιση: inline?}







 # Mrwddm τους ul li a {padding: 5px 3px? Φόντο: # EEEEEE? Χρώμα: # 666666?}







 # Mrwddm τους ul li a: hover {background: # CCCCCC? Χρώμα: # FF6600}

Στην ίδια κατηγορία ...
E-Learning
CSS (Μάθημα) CSS (Μάθημα)
Σχεδίαση και Προσβασιμότητα, σύμφωνα με το W3C CSS και XHTML. Ξεκινώντας από 29 €.
HTML (Μάθημα) HTML (Μάθημα)
Η γλώσσα σήμανσης για τον Παγκόσμιο Ιστό από 29 €.
Javascript (Μάθημα) Javascript (Μάθημα)
Πλήρης οδηγός για δέσμες ενεργειών στην πλευρά του πελάτη. Από 39 €.
Σύνδεσμοι διαφημιζόμενων