Vertikālā izvēlne ar fona attēliem apgāšanās

Bijušajā rakstā mēs redzējām, kā izmantot CSS vertikālā izvēlne ar mouseover efektu , izmantojot dažādas fona krāsas, lai atzīmētu vienumu, virzot peli.

Mēs pārskatīt šo piemēru un paplašināt, pievienojot divas galvenās iezīmes šajā izvēlnē: uzlabot pieejamību ar ložu izmantošanu un labāku sniegumu attiecībā uz dizainu.

Lūk, rezultāts mēs vēlamies iegūt:

In screenshot piemērs peles rādītājs stāv uz otro saiti izvēlnē.

Šie divi attēli ir izmantoti, piemēram, dot nosaukumu un menu_1.gif menu_2.gif:

kad izmērs (150X22 pikseļi) ir pielāgots platumu lodziņā fonta lielumu un polsterējums piešķirti atsevišķi priekšmeti.

Es aicinu lasītājus, lai izveidotu pielāgotus attēlu izkārtojumu un izmēri attiecas uz tās vajadzībām.

Let prakse, sākot izdarīt izvēlnē. Mēs analizējam HTML kodu:

 <div id="menu">



    



 <ul>



        



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



        



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



        



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



        



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



        



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



    



 </ Ul>







 </ Div>

Visās izvēlnēs būs kastē ar uzrakstu "menu", kurā mēs veidot sarakstu ar aizzīmēm, kas satur saites.

Nav piešķirt jebkuru ID un nav klases saiti uz kādu no izvēlnes (saraksts, saraksts, saites), kas pamatojas tikai uz identifikācijas zīmes, ko ligzdošanas elementiem.

Seko CSS pievieno attiecīgas piezīmes:

 / * Stilizēti vispārīgi DIV tagu * /









 p







 {



    



 font-size: 10px;



    



 font-family: verdana;







 }









 / * Piešķirt fona un kastes platums menu * /









 # Izvēlne







 {



    



 background: # CCDDEE;



    



 platums: 150px;







 }









 / * Izdzēsiet noklusējuma no LU tag stilu, kas ietverti menu * /









 # Izvēlne ul







 {



    



 margin: 0px 0px 0px 0px;



    



 list-style-tips: none;







 }









 / * Stilizēti sarakstus izvēlnē * /









 # Menu







 {



    



 margin: 0px 0px 0px 0px;



    



 robežu apakšā: 1px solid # FFFFFF;







 }









 / * Piešķirt stila saites sarakstā izvēlnes * /









 # Izvēlne li, tiem: hover







 {



    



 display: block;



    



 pozīcija: radinieku;



    



 text-decoration: none;



    



 color: # 192.939;



    



 font-svars: bold;



    



 padding: 5px 5px 5px 5px;







 }









 / * Set fona saites, pēc noklusējuma, un mouseover * /









 # Izvēlne tur







 {



    



 background-image: url (menu_1.gif);







 }







 # Izvēlne: hover







 {



    



 background-image: url (menu_2.gif);







 }

No ligzdošanas elementiem, kā minēts iepriekš minētajām darbībām, jānodrošina, ka vienīgais aizzīme, kas parādīsies ar šo stilizācijas ir izvēlne, kā rezultātā ligzdošanas kastē ar ID "menu".

Visas pārējās lodes vietā būs viņu veids, neizpildes vai nepārprotami piešķirts, izmantojot CSS.