Lodret menu med baggrundsbilleder i rollover

I en tidligere artikel så vi, hvordan du bruger CSS en lodret menu med en mouseover effekt ved hjælp af en anden baggrundsfarve til at markere det element, du bevæger musen.

Vi besøger dette eksempel og udvide, tilføje to vigtige funktioner i denne menu: forbedret tilgængelighed gennem brugen af kugler og en bedre ydeevne med hensyn til design.

Her er det resultat, vi ønsker at opnå:

I screenshot eksempel af musemarkøren holder stille på den anden linket i menuen.

Disse to billeder er eksempelvis bruges til at give navn og menu_1.gif menu_2.gif:

hvor størrelse (150X22 pixels) er blevet skræddersyet til bredden af ​​kassen, skriftstørrelsen og polstring er tildelt de enkelte poster.

Jeg opfordrer læserne til at oprette brugerdefinerede billeder til layout og dimensioner er relevante for dens behov.

Lad os praksis begynder at tegne menuen. Vi analyserer HTML-koden:

 <div id="menu">



    



 <ul>



        



 <li> <a href="#"> Side 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 menuer vil være i en kasse mærket "menu", hvor vi vil bygge en punktopstilling, der indeholder links.

Du må ikke overdrage nogen form for ID og ingen klasse til at linke til nogen af ​​de menupunkter (liste, liste, link), udelukkende baseret på identifikationer af nesting af elementer.

Følger CSS ledsaget af passende bemærkninger:

 / * Stiliseret generisk DIV tag * /









 P







 {



    



 font-size: 10px;



    



 font-family: Verdana;







 }









 / * Tildel baggrunden og bredden af ​​boksen i menuen * /









 # Menu







 {



    



 Baggrunden: # CCDDEE;



    



 bredde: 150px;







 }









 / * Slet standard stil fra UL-tag, der er indeholdt i menuen * /









 # Menu ul







 {



    



 margin: 0px 0px 0px 0px;



    



 list-style-type: none;







 }









 / * Stiliseret lister i menuen * /









 # Menuen vil







 {



    



 margin: 0px 0px 0px 0px;



    



 border-bottom: 1px solid # FFFFFF;







 }









 / * Tildel typografi på links i listen over menuen * /









 # Menu li a, dem a: hover







 {



    



 display: block;



    



 position: relative;



    



 text-decoration: none;



    



 color: # 192939;



    



 font-weight: fed;



    



 padding: 5px 5px 5px 5px;







 }









 / * Sæt på baggrund af de links, som standard, og den mouseover * /









 # Menu der for at







 {



    



 Baggrunden-image: url (menu_1.gif);







 }







 # Menu a: hover







 {



    



 Baggrunden-image: url (menu_2.gif);







 }

Driften af ​​de rugende af elementer, som nævnt ovenfor, sikre, at den eneste kugle, der vises med denne stilisering er den menu, som et resultat af rugende inde i boksen med ID "menuen."

Alle andre kugler af hjemmesiden vil have deres måde at misligholdelse eller eksplicit tildelt via CSS.