Αυτό είναι ένα tutorial για το πώς να δημιουργήσει καθαρό CSS Drop down μενού χωρίς τη χρήση javascript. Παρατήρησα ωστόσο, ότι οι άνθρωποι συχνά χρησιμοποιούν τη Javascript για να επιτευχθεί αυτό το αποτέλεσμα. Στην πραγματικότητα, υπάρχει ένας απλός τρόπος για να το κάνει μόνο με CSS.

Εδώ είναι το παράδειγμα

Βήμα πρώτο: θα δημιουργήσουμε μια βασική δομή HTML.

 > <h1> Developer's Paradise demos </h1> <ul id = "menu" > <li> <span> Home </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> <li> <span> About Us </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> <li> <span> Products </span> <ul> <li> <a href = "#" > Menu item 1 </a> </li> <li> <a href = "#" > Menu item 2 </a> </li> <li> <a href = "#" > Menu item 3 </a> </li> </ul> </li> </ul> </div> <Div id = "header"> <h1> Προγραμματιστών demos Paradise </ h1> <ul id = "μενού"> <li> <span> Home </ strong> <ul> <li> <a href = "#" Μενού> σημείο 1 </ a> </ li> <li> <a href = "#" Μενού> σημείο 2 </ a> </ li> <li> <a href = "#" Μενού> σημείο 3 </ a> </ li> </ ul> </ li> <li> <span> Σχετικά με εμάς </ strong> <ul> <li> <a href = "#"> Στοιχείο μενού 1 </ a> </ li > <li> <a href = "#" Μενού> σημείο 2 </ a> </ li> <li> <a href = "#" Μενού> σημείο 3 </ a> </ li> </ ul> < / li> <li> <span> Προϊόντα </ span> <ul> <li> <a href = "#"> Στοιχείο μενού 1 </ a> </ li> <li> <a href = "#"> Στοιχείο μενού 2 </ a> </ li> <li> <a href = "#" Μενού> σημείο 3 </ a> </ li> </ ul> </ li> </ ul> </ p> 

Βήμα δεύτερο: Τώρα έχουμε δημιουργήσει μαγεία κώδικα CSS

  ; padding : 0 ; } * {Margin: 0? Padding: 0?}

 οργανισμός {
 ; φόντο: # 222?
 Arial, Helvetica, sans-serif ; font: 100% της κανονικής Arial, Helvetica, sans-serif?
 }

 : #fff ; } h1 {χρώμα: # fff?}

 # Header {
 ; Ύψος: 120px? θέση: σχετικό?
 ; φόντο: # 333?
 }

 # Μενού {
 περιθώριο: 0px?
 padding: 0px?
 θέση: απόλυτη?
 ; top: 70px?
 display: block?
 }

 # Μενού li> {
 list-style-type: κανένας?
 float: αριστερά?
 display: block?
 ; περιθώριο: 0px 10px?
 θέση: σχετική?
 padding: 10px?
 Πλάτος: 100px?
 }

 ul { # Menu> li: ul hover {
 display: block?
 }

 { # Menu> li: hover {
 ; υπόβαθρο-χρώμα: # 808080?
 -Moz-σύνορα-ακτίνα: 10px?
 -Webkit-σύνορα-ακτίνα: 10px?
 }

 # Menu ul li {
 περιθώριο: 0px?
 padding: 0px?
 απεικόνιση: κανένας?
 }
 # Μενού li ul li {
 list-style-type: κανένας?
 ; περιθώριο: 10px 0 0 0?
 font-size: 11px?
 }

 # Μενού li ul li a {
 display: block?
 ; padding: 5px 10px?
 ; χρώμα: # fff?
 text-decoration: κανένας?
 font-weight: τολμηρή?
 }

 a { # Menu ul li li: hover a {
 ; υπόβαθρο-χρώμα: # 606060?
 -Moz-σύνορα-ακτίνα: 5px?
 -Webkit-σύνορα-ακτίνα: 5px?
 }

 # Μενού span li {
 δρομέα: pointer?
 ; περιθώριο: 0px 10px?
 font-weight: τολμηρή?
 ; font-size : 11px ; χρώμα: # fff? font-size: 11px?
 } 

Παρακαλώ σημειώστε ότι αυτός ο κώδικας δεν λειτουργεί σε IE6 (αυτό το φτωχό πρόγραμμα περιήγησης απλά δεν ξέρει τι ul> σημαίνει li).

Θα σας ήμουν ευγνώμων αν θα μπορούσατε να πάρετε ένα δευτερόλεπτο για να βοηθήσει στην προώθηση blog και το μερίδιό μου αυτόν τον σύνδεσμο με οποιαδήποτε από μειονεκτικές περιοχές δικτύωσης σας χρησιμοποιώντας τον παρακάτω σύνδεσμο. Εδώ είναι μια σύνδεση με την περιοχή μας προτίμησε, αν επιθυμείτε να καταχωρήσετε ένα όνομα τομέα .

Filed under: Css , Tutorials από admin