Κάθετη μενού με εικόνες φόντου στο ανατροπής

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

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

Εδώ είναι το αποτέλεσμα που θέλουμε για την απόκτηση:

Στο στιγμιότυπο παράδειγμα του δείκτη του ποντικιού είναι σε στάση κατά το δεύτερο σύνδεσμο στο μενού.

Αυτές οι δύο εικόνες που χρησιμοποιούνται για παράδειγμα, να δώσει το όνομα και τη menu_2.gif menu_1.gif:

όπου το μέγεθος (150X22 pixels) έχουν tailor-made για το πλάτος του πλαισίου, το μέγεθος της γραμματοσειράς και padding ανατεθεί ξεχωριστά αντικείμενα.

Καλώ τους αναγνώστες να δημιουργήσετε προσαρμοσμένες εικόνες για διάταξη και τις διαστάσεις που είναι σχετικές με τις ανάγκες της.

Ας πρακτική, η οποία αρχίζει να επιστήσει το μενού. Αναλύουμε τον κώδικα HTML:

 <div id="menu">



    



 <ul>



        



 <li> <a href="#"> Σελίδα 1 </ a> </ li>



        



 <li> <a href="#"> Σελίδα 2 </ a> </ li>



        



 <li> <a href="#"> Page 3 </ a> </ li>



        



 <li> <a href="#"> Page 4 </ a> </ li>



        



 <li> <a href="#"> Σελίδα 5 </ a> </ li>



    



 </ Ul>







 </ P>

Όλα τα μενού θα είναι σε ένα κουτί με την ένδειξη "μενού", στο οποίο θα χτίσουμε μια λίστα με κουκκίδες που περιέχει τις συνδέσεις.

Μην αναθέτει κάθε αναγνωριστικό και καμία τάξη για τη σύνδεση με οποιοδήποτε από τα στοιχεία του μενού (κατάλογο, λίστα, σύνδεση), βασίζεται αποκλειστικά στην ταυτοποιήσεων από την ένθεση των στοιχείων.

Ακολουθεί η CSS συνοδεύεται από τις κατάλληλες παρατηρήσεις:

 / * Τυποποιημένο γενικά το tag div * /









 p







 {



    



 font-size: 10px?



    



 font-family: Verdana?







 }









 / * Εκχώρηση το φόντο και το πλάτος του πλαισίου στο μενού * /









 # Μενού







 {



    



 υπόβαθρο: # CCDDEE?



    



 Πλάτος: 150px?







 }









 / * Διαγράψτε το προεπιλεγμένο στυλ από την UL ετικέτα που περιλαμβάνεται στο μενού * /









 # Μενού ul







 {



    



 περιθώριο: 0px 0px 0px 0px?



    



 list-style-type: κανένας?







 }









 / * Τυποποιημένο λίστες στο μενού * /









 # Menu θα







 {



    



 περιθώριο: 0px 0px 0px 0px?



    



 συνόρων κάτω: 1px solid # FFFFFF?







 }









 / * Εκχώρηση το στυλ τους συνδέσμους στον κατάλογο των μενού * /









 # Μενού li Α, a: hover







 {



    



 display: block?



    



 θέση: σχετική?



    



 text-decoration: none?



    



 χρώμα: # 192939?



    



 font-weight: τολμηρό?



    



 padding: 5px 5px 5px 5px?







 }









 / * Ρυθμίστε το φόντο των δεσμών, από προεπιλογή, και τα mouseover * /









 # Μενού εκεί για να







 {



    



 υπόβαθρο-image: url (menu_1.gif)?







 }







 # Menu θα a: hover







 {



    



 υπόβαθρο-image: url (menu_2.gif)?







 }

Οι εργασίες της ένθεσης των στοιχείων, όπως προαναφέρθηκε, εξασφαλίζει ότι η μόνη σφαίρα που θα εμφανιστεί με το στυλιζάρισμα είναι το μενού, ως αποτέλεσμα της φωλιάζουν μέσα στο κουτί με το αναγνωριστικό "μενού."

Όλες οι άλλες σφαίρες της ιστοσελίδας θα έχουν τον τρόπο αθέτησης των υποχρεώσεών τους ή ρητά ανατεθεί μέσω CSS.