Vertikali meniu fono paveikslėlius ir virtimo

Be Ankstesnis straipsnis mes matėme, kaip naudoti CSS vertikalus meniu mouseover poveikis , naudojant skirtingų fono spalvą, pažymėkite elementą, kurį juda pelė.

Mes peržiūrėti šiuo pavyzdžiu ir plečiasi, pridedant dvi pagrindines funkcijas šio meniu: pagerinti prieigą per kulkas naudoti ir geresnių rezultatų, kalbant apie dizainą.

Štai rezultatas norime gauti:

Be ekrano pavyzdys pelės žymeklį stovi antrame nuorodą meniu.

Šios dvi nuotraukos yra naudojamos, pavyzdžiui, nurodyti vardą ir menu_1.gif menu_2.gif:

kur dydis (150X22 taškų) buvo specialiai sukurtas į laukelį, šrifto dydį ir padding priskirti atskirų elementų plotis.

Kviečiu skaitytojus kurti pasirinktinius vaizdų išdėstymas ir matmenys susijusius savo poreikius.

Tegul praktika, pradžioje atkreipti meniu. Mes analizuojame HTML kodas:

 <div id="menu">



    



 <ul>



        



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



        



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



        



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



        



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



        



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



    



 </ Ul>







 </ Div>

Visi meniu bus langelį "meniu", kuriame statysime sąrašą su ženkleliais, kuriame yra nuorodos.

Negalima priskirti bet kokį vardą ir ne klasės nuorodą į bet kurį meniu (sąrašas, sąrašą, nuoroda), remiasi tik identifikavimo pagal elementų lizdus.

Taip CSS lydi atitinkamos pastabos:

 / * Stilizuoti bendrine DIV tegus * /









 p







 {



    



 font-size: 10px;



    



 font-family: Verdana;







 }









 / * Priskirti fone ir lango plotis meniu * /









 # Meniu







 {



    



 background: # CCDDEE;



    



 Plotis: 150px;







 }









 / * Ištrinti numatytąjį stilių UL tegus esančius meniu * /









 # Meniu ul







 {



    



 margin: 0px 0px 0px 0px;



    



 list-style-type: none;







 }









 / * Stilizuoti sąrašų meniu * /









 # Meniu







 {



    



 margin: 0px 0px 0px 0px;



    



 border-bottom: 1px solid # FFFFFF;







 }









 / * Priskirti stilių nuorodų meniu sąrašas * /









 # Meniu Li, jiems: hover







 {



    



 display: block;



    



 position: relative;



    



 text-decoration: none;



    



 color: # 192.939;



    



 font-weight: bold;



    



 padding: 5px 5px 5px 5px;







 }









 / * Nustatyti nuorodos fone, pagal nutylėjimą, ir mouseover * /









 # Meniu ten







 {



    



 background-image: url (menu_1.gif);







 }







 # Meniu a: hover







 {



    



 background-image: url (menu_2.gif);







 }

Iš elementų lizdus, ​​kaip minėta pirmiau operacijas, užtikrinti, kad tik kulka, kuri bus rodoma šį stilizacija yra meniu, kaip lizdus viduje su ID langelį rezultatas "meniu".

Visi kiti kulkos šios svetainės turės savo kelią nevykdymo arba aiškiai priskirtas per CSS.