Vertikal meny med bakgrunnsbilder i rollover

I en tidligere artikkel så vi hvordan du bruker CSS en vertikal meny med mouseover , bruker en annen bakgrunnsfarge for å markere elementet du beveger musen.

Vi besøker dette eksemplet og ekspanderende, og legger til to viktige funksjoner i denne menyen: bedre tilgjengelighet gjennom bruk av kuler og en bedre ytelse i form av design.

Her er resultatet vi ønsker å oppnå:

I skjermbildet eksempel musepekeren står stille på den første linken i menyen.

Disse to bildene er brukt for eksempel å gi navn og menu_1.gif menu_2.gif:

der størrelse (150X22 piksler) har blitt skreddersydd til bredden av boksen, skriftstørrelsen og padding tilordnes enkeltelementer.

Jeg oppfordrer leserne til å opprette egendefinerte bilder til layout og dimensjonene relevant for deres behov.

La oss praksis, som begynner å trekke på menyen. Vi analyserer HTML-koden:

 <div id="menu">



    



 <ul>



        



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



        



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



        



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



        



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



        



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



    



 </ Ul>







 </ Div>

Alle menyer vil være i en boks merket "meny", hvor vi skal bygge en punktliste som inneholder koblingene.

Ikke tildele noen ID og ingen klassen til link til noen av menypunktene (liste, liste, link), basert utelukkende på identifikasjoner av hekkende av elementer.

Følger CSS ledsaget av passende bemerkninger:

 / * Stiliserte generically DIV tag * /









 p







 {



    



 font-size: 10px;



    



 font-family: Verdana;







 }









 / * Tilordne bakgrunnen og bredden av boksen i menyen * /









 # Menu







 {



    



 bakgrunn: # CCDDEE;



    



 bredde: 150px;







 }









 / * Slett default stil fra UL tag inneholdt i menyen * /









 # Meny ul







 {



    



 margin: 0px 0px 0px 0px;



    



 list-style-type: none;







 }









 / * Stiliserte lister i menyen * /









 # Meny vil







 {



    



 margin: 0px 0px 0px 0px;



    



 border-bottom: 1px solid # FFFFFF;







 }









 / * Tilordne stilen til linkene i listen over menyen * /









 # Menu li a, dem a: hover







 {



    



 display: block;



    



 position: relative;



    



 text-decoration: none;



    



 color: # 192939;



    



 font-weight: bold;



    



 padding: 5px 5px 5px 5px;







 }









 / * Sett bakgrunn av linkene, som standard, og mouseover * /









 # Menu der for å







 {



    



 background-image: url (menu_1.gif);







 }







 # Menu vil a: hover







 {



    



 background-image: url (menu_2.gif);







 }

Driften av hekkende av elementer, som nevnt ovenfor, sikrer at den eneste kule som vil dukke opp med dette stilisering er menyen, som et resultat av hekkende inne i boksen med ID "-menyen."

Alle andre kuler av området vil ha sin måte å standard eller eksplisitt tilordnet via CSS.