Vertikálne menu s obrázkami na pozadí prevráteniu

V bývalom článku sme videli, ako pomocou CSS zvislé menu s mouseover efekt , pomocou inú farbu pozadia označiť položku, ktorú je pohybom myši.

Sme znovu tento príklad a obohacovaný o dve kľúčové funkcie tohto menu: zlepšenie dostupnosti pomocou guliek a lepší výkon z hľadiska dizajnu.

Tu je výsledok chceme získať:

Na obrázku príklad myši stojí na druhý odkaz v menu.

Tieto dva obrazy sa používajú napríklad obsahovať meno a menu_1.gif menu_2.gif:

kde veľkosť (150x22 pixelov) sú šité na mieru podľa šírky boxu, veľkosť písma a odsadenie priradené k jednotlivým položkám.

Vyzývam čitateľa, aby vytvárať vlastné obrázky na rozloženie a rozmery relevantné pre jeho potreby.

Poďme praxi, začína kresliť menu. Analyzujeme HTML kód:

 <div id="menu">



    



 <ul>



        



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



        



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



        



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



        



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



        



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



    



 </ Ul>







 </ Div>

Všetky ponuky budú v krabici označenej "menu", v ktorom budeme stavať zoznam s odrážkami obsahujúce odkazy.

Nepriraďujte žiadne ID ani triedy odkaz na niektorú z položiek menu (zoznam, zoznam, odkaz), len na základe identifikácie podľa vnorenia prvkov.

Nasleduje CSS spolu s príslušnými poznámkami:

 / * Štylizované všeobecne tagu div * /









 P







 {



    



 font-size: 10px;



    



 font-family: Verdana;







 }









 / * Priraď pozadí a šírku poľa v menu * /









 # Menu







 {



    



 pozadia: # ccddEe;



    



 šírka: 150px;







 }









 / * Odstráňte predvolený štýl z UL tag obsiahnuté v menu * /









 # Menu ul







 {



    



 rozpätie: 0px 0px 0px 0px;



    



 list-style-type: none;







 }









 / * Štylizované zoznamu v menu * /









 # Menu bude







 {



    



 rozpätie: 0px 0px 0px 0px;



    



 border-bottom: 1px solid # FFFFFF;







 }









 / * Priraď štýl odkazy v zozname menu * /









 # Menu li, je: hover







 {



    



 display: block;



    



 position: relative;



    



 text-decoration: none;



    



 Farba: # 192939;



    



 font-váha: tučný;



    



 padding: 5px 5px 5px 5px;







 }









 / * Nastavenie pozadia vzťahov, v predvolenom nastavení a mouseover * /









 # Menu tam







 {



    



 background-image: url (menu_1.gif);







 }







 # Menu bude: hover







 {



    



 background-image: url (menu_2.gif);







 }

Prevádzka na hniezdenia prvkov, ako je uvedené vyššie, zabezpečiť, aby len gulička, ktorá sa zobrazí s týmto štylizácia je menu, v dôsledku hniezdnu vnútri krabice s ID "menu".

Všetky ostatné guľôčky stránky budú mať cestu zlyhania alebo explicitne priradené cez CSS.