Vertikal-Menü mit Hintergrund-Bilder in der Rollover-

In einem früheren Artikel haben wir gesehen, wie Sie mit CSS ein vertikales Menü mit Mouseover-Effekt , mit einer anderen Hintergrundfarbe, um das Element Sie die Maus bewegen zu kennzeichnen.

Wir überarbeiten diesem Beispiel und den Ausbau, um zwei der wichtigsten Features von diesem Menü: Verbesserung der Erreichbarkeit durch den Einsatz von Kugeln und eine bessere Performance in Sachen Design.

Hier ist das Ergebnis wollen wir erhalten:

In dem Screenshot Beispiel des Mauszeigers ist stationär auf den zweiten Link im Menü.

Diese beiden Bilder werden zum Beispiel den Namen und menu_1.gif menu_2.gif geben verwendet:

bei denen die Größe (150X22 Pixel) wurden auf die Breite der Box, die Schriftgröße und padding zugewiesen, um einzelne Elemente maßgeschneidert.

Ich lade Leser eigene Bilder zu Layout und Größe einschlägigen, um seinen Bedarf zu schaffen.

Lassen Sie uns die Praxis, beginnend um das Menü zu ziehen. Wir analysieren den HTML-Code:

 <div id="menu">



    



 <ul>



        



 <li> <a href="#"> Seite 1 </ a> </ li>



        



 <li> <a href="#"> Seite 2 </ a> </ li>



        



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



        



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



        



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



    



 </ Ul>







 </ Div>

Alle Menüs werden in einer Kiste mit der Aufschrift "Menü", in dem wir eine Liste mit Aufzählungszeichen mit den Links zu bauen.

Weisen Sie jeder ID und keine Klasse, um einen der Menüpunkte (Liste, Liste, Link), die ausschließlich auf Identifikationen durch die Verschachtelung von Elementen zu verknüpfen.

Folgt der CSS mit entsprechenden Erläuterungen versehen:

 / * Stilisierte generisch das DIV-Tag * /









 p







 {



    



 font-size: 10px;



    



 font-family: Verdana;







 }









 / * Weisen Sie den Hintergrund und die Breite der Box in dem Menü * /









 # Menu







 {



    



 background: # CCDDEE;



    



 width: 150px;







 }









 / * Löschen Sie die ursprünglichen Stil aus dem UL-Tag in dem Menü enthalten * /









 # Menu ul







 {



    



 margin: 0px 0px 0px 0px;



    



 list-style-type: none;







 }









 / * Stilisierte Listen im Menü * /









 # Menu wird







 {



    



 margin: 0px 0px 0px 0px;



    



 border-bottom: 1px solid # FFFFFF;







 }









 / * Weisen Sie den Stil auf die Links in der Liste der Menüpunkte * /









 # Menu li a, sie a: hover







 {



    



 display: block;



    



 position: relative;



    



 text-decoration: none;



    



 color: # 192939;



    



 font-weight: bold;



    



 padding: 5px 5px 5px 5px;







 }









 / * Hintergrund des Links Set, standardmäßig, und der mouseover * /









 # Menu dort







 {



    



 background-image: url (menu_1.gif);







 }







 # Menu wird a: hover







 {



    



 background-image: url (menu_2.gif);







 }

Die Operationen der Verschachtelung von Elementen, wie oben erwähnt, sicherzustellen, dass die einzige Kugel, die mit dieser Stilisierung erscheint das Menü ist, als Ergebnis der Verschachtelung innerhalb der Box mit der ID "-Menü."

Alle anderen Kugeln der Website haben ihren Weg von Standard-oder explizit über CSS zugewiesen.