Vertikal meny med bakgrundsbilder i välta

I en tidigare artikel såg vi hur man använder CSS en vertikal meny med en mouseover effekt , genom att använda en annan bakgrundsfärg för att markera det objekt du flyttar musen.

Vi återbesök detta exempel och expanderar, lägga till två viktigaste funktionerna i denna meny: förbättrad tillgänglighet med hjälp av kulor och en bättre prestanda när det gäller design.

Här är det resultat vi vill uppnå:

I skärmdumpen exempel muspekaren står stilla på den andra länken i menyn.

Dessa två bilder används till exempel för att ge namn och menu_1.gif menu_2.gif:

där storlek (150X22 pixlar) har skräddarsydda till bredden av boxen, teckenstorlek och padding tilldelas enskilda objekt.

Jag inbjuder läsarna att skapa egna bilder till layout och dimensionerna är relevanta för dess behov.

Låt oss praktiken börjar rita menyn. Vi analyserar HTML-kod:

 <div id="menu">



    



 <ul>



        



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



        



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



        



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



        



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



        



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



    



 </ Ul>







 </ Div>

Alla menyer kommer att vara i en låda märkt "meny", där vi kommer att bygga en punktlista som innehåller länkar.

Tilldela inte några ID och ingen klass att länka till någon av de menyalternativ (lista, en lista, länk), baserat enbart på identifieringar av häckande element.

Följer CSS tillsammans med lämpliga anmärkningar:

 / * Stiliserade allmänt div-taggen * /









 p







 {



    



 font-size: 10px;



    



 font-family: Verdana;







 }









 / * Tilldela bakgrund och bredden på rutan i menyn * /









 # Meny







 {



    



 Bakgrund: # CCDDEE;



    



 bredd: 150px;







 }









 / * Ta bort standard stil från UL-taggen finns i menyn * /









 # Meny ul







 {



    



 margin: 0px 0px 0px 0px;



    



 list-style-type: none;







 }









 / * Stiliserade listor i menyn * /









 # Meny kommer







 {



    



 margin: 0px 0px 0px 0px;



    



 border-bottom: 1px solid # FFFFFF;







 }









 / * Tilldela stil till länkar i listan över menyn * /









 # Meny li en, dem: hover







 {



    



 display: block;



    



 position: relativ;



    



 text-decoration: none;



    



 color: # 192.939;



    



 font-weight: bold;



    



 padding: 5px 5px 5px 5px;







 }









 / * Ställ bakgrund av de länkar, som standard, och mouseover * /









 # Meny där för att







 {



    



 background-image: url (menu_1.gif);







 }







 # Meny kommer en: hover







 {



    



 background-image: url (menu_2.gif);







 }

Verksamheten i de häckande element, som nämnts ovan, se till att den enda kulan som kommer att visas med denna stilisering är menyn, som en följd av häckande inne i boxen med ID "-menyn."

Alla andra kulor av sajten kommer att ha sitt sätt att standard eller explicit tilldelas via CSS.