Okomiti izbornik s pozadinske slike u rollover

U prijašnjem članku smo vidjeli kako se koristi CSS vertikalni izbornik sa Prelazak mišem učinak , koristeći različite boje pozadine označiti stavku koju su pomicanjem miša.

Mi ponovo ovaj primjer i širi, dodajući dvije ključne značajke ovog izbornika: poboljšana dostupnost kroz korištenje metaka i bolje performanse u pogledu dizajna.

Evo rezultat želimo dobiti:

U screenshot primjer pokazivač miša miruje na drugi link u izborniku.

Ove dvije slike su za primjer dati ime i menu_1.gif menu_2.gif:

gdje je veličina (150X22 pixela) su tailor-made da širina okvira, veličinu fonta i padding dodijeljene pojedinačne stavke.

Pozivam čitatelje da stvaranje prilagođenih slike na izgled i dimenzije se odnose na njegove potrebe.

Neka praksi, počinje crtati izbornika. Mi analiziramo HTML kod:

 <div id="menu">



    



 <ul>



        



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



        



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



        



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



        



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



        



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



    



 </ Ul>







 </ Div>

Svi izbornici će biti u okvir označen "izbornika", u kojoj ćemo graditi popis s grafičkim oznakama sadrži linkove.

Nemojte im pripisivati ​​bilo koja imena i ne klasa povezati na bilo koji od izbornika (popis, popis, link), temelji se isključivo na identifikacijama koje gnijezde elemenata.

Slijedi CSS popraćen odgovarajućim primjedbe:

 / * Stilizirane općenito DIV tag * /









 P







 {



    



 font-size: 10px;



    



 font-family: Verdana;







 }









 / * Dodjeljivanje pozadinu i širinu okvira u izborniku * /









 # Izbornik







 {



    



 background: # CCDDEE;



    



 širina: 150px;







 }









 / * Brisanje zadani stil iz UL oznake se nalaze u izborniku * /









 # Izbornik ul







 {



    



 margin: 0px 0px 0px 0px;



    



 Popis stilu tipa: none;







 }









 / * Stilizirane navodi u izborniku * /









 # Izbornik će







 {



    



 margin: 0px 0px 0px 0px;



    



 granice dnu: 1px solid # FFFFFF;







 }









 / * Dodjeljivanje stil veze na popisu izbornika * /









 # Izbornik li ih: hover







 {



    



 prikaz: block;



    



 položaj: relativna;



    



 text-decoration: none;



    



 Boja: # 192939;



    



 font-weight: bold;



    



 padding: 5px 5px 5px 5px;







 }









 / * Postavljanje pozadine veze, po defaultu, a Prelazak mišem * /









 # Izbornik ima za







 {



    



 pozadine-slike: url (menu_1.gif);







 }







 # Izbornik će: hover







 {



    



 pozadine-slike: url (menu_2.gif);







 }

Operacije gniježđenja elemenata, kao što je spomenuto gore, bi se osiguralo da samo metak koji će se pojaviti s ovim stilizacija je izbornik, kao rezultat gniježđenja unutar okvira sa ID "izbornik".

Sve ostale metaka stranice će imati svoj način zadane ili eksplicitno dodijeljena putem CSS.