Vertical valikko taustakuvia vuonna rollover

Vuonna Entinen momentti näimme CSS pystysuora valikko mouseover vaikutus , käyttämällä eri taustaväriä merkitä kohteen siirrät hiirtä.

Me palaamme asiaan esimerkkiä ja laajentaa lisäämällä kaksi keskeistä ominaisuuksia tämän valikon: käyttömahdollisuuksien parantaminen avulla luoteja ja paremman suorituskyvyn kannalta suunnittelu.

Tässä on tulos haluamme saada:

Vuonna kuvakaappaus esimerkki hiiren osoitin on paikallaan toista linkkiä valikosta.

Nämä kaksi kuvaa käytetään esimerkiksi antaa nimi ja menu_1.gif menu_2.gif:

missä koko (150X22 pikseliä) on räätälöity leveys laatikko, fonttikoko ja padding määrätty yksittäisiä kohteita.

Kehotan lukijoita luoda omia kuvia layout ja mittasuhteet asiaa sen tarpeita.

Katsotaanpa käytännössä alkaa vetää valikosta. Analysoimme HTML koodi:

 <div id="menu">



    



 <ul>



        



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



        



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



        



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



        



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



        



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



    



 </ Ul>







 </ Div>

Kaikki valikot laatikkoon merkitty "menu", jossa me rakennamme luettelomerkeillä sisältää linkkejä.

Älä määritä mitään ID eikä luokkaa linkki kaikkeen valikon (luettelo, luettelo, linkki), joka perustuu ainoastaan ​​tunnisteet mennessä Elementtien sisäkkäisten.

Seuraa CSS liitetään asianmukainen selvitysosa:

 / * Tyylitelty yleisesti DIV tag * /









 P







 {



    



 font-size: 10px;



    



 font-family: Verdana;







 }









 / * Määritä taustan ja leveys laatikko valikossa * /









 # Menu







 {



    



 background: # CCDDEE;



    



 leveys: 150px;







 }









 / * Poista oletus tyyli UL tag sisältyvät menu * /









 # Valikko ul







 {



    



 margin: 0px 0px 0px 0px;



    



 list-style-type: none;







 }









 / * Tyylitelty luetellaan valikossa * /









 # Valikko tulee







 {



    



 margin: 0px 0px 0px 0px;



    



 border-bottom: 1px solid # FFFFFF;







 }









 / * Määritä tyyli linkkejä Valikkoluettelo * /









 # Valikko li, heitä: hover







 {



    



 display: block;



    



 kanta: suhteellinen;



    



 text-decoration: none;



    



 color: # 192939;



    



 font-weight: bold;



    



 padding: 5px 5px 5px 5px;







 }









 / * Aseta tausta linkkejä, oletuksena, ja mouseover * /









 # Valikko siellä







 {



    



 tausta-image: url (menu_1.gif);







 }







 # Valikko tulee: hover







 {



    



 tausta-image: url (menu_2.gif);







 }

Toiminta Elementtien sisäkkäisten, kuten edellä mainittiin, että ainoa luoti, joka ilmestyy tällä stilisointi on valikko, seurauksena pesii laatikon kanssa ID "valikosta."

Kaikki muut luodit sivusto on niiden tapa default tai eksplisiittisesti määritetty kautta CSS.