Vertikální menu s obrázky na pozadí převrácení

V bývalém článku jsme viděli, jak pomocí CSS svislé menu s mouseover efekt , pomocí jinou barvu pozadí označit položku, kterou je pohybem myši.

Jsme znovu tento příklad a obohacován o dvě klíčové funkce tohoto menu: zlepšení dostupnosti pomocí kulek a lepší výkon z hlediska designu.

Zde je výsledek chceme získat:

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

Tyto dva obrazy se používají například obsahovat jméno a menu_1.gif menu_2.gif:

kde velikost (150X22 pixelů) jsou šité na míru podle šířky boxu, velikost písma a odsazení přiřazeny k jednotlivým položkám.

Vyzývám čtenáře, aby vytvářet vlastní obrázky na rozložení a rozměry relevantní pro jeho potřeby.

Pojďme praxi, začíná kreslit 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šechny nabídky budou v krabici označené "menu", ve kterém budeme stavět seznam s odrážkami obsahující odkazy.

Nepřiřazujte žádné ID ani třídy odkaz na některou z položek menu (seznam, seznam, odkaz), pouze na základě identifikace podle vnoření prvků.

Následuje CSS spolu s příslušnými poznámkami:

 / * Stylizované obecně tagu div * /









 P







 {



    



 font-size: 10px;



    



 font-family: Verdana;







 }









 / * Přiřaď pozadí a šířku pole v menu * /









 # Menu







 {



    



 pozadí: # CCDDEE;



    



 šířka: 150px;







 }









 / * Odstraňte výchozí styl z UL tag obsažené v menu * /









 # Menu ul







 {



    



 rozpětí: 0px 0px 0px 0px;



    



 list-style-type: none;







 }









 / * Stylizované seznamu v menu * /









 # Menu bude







 {



    



 rozpětí: 0px 0px 0px 0px;



    



 border-bottom: 1px solid # FFFFFF;







 }









 / * Přiřaď styl odkazy v seznamu menu * /









 # Menu li, je: hover







 {



    



 display: block;



    



 position: relative;



    



 text-decoration: none;



    



 Barva: # 192939;



    



 font-váha: tučný;



    



 padding: 5px 5px 5px 5px;







 }









 / * Nastavení pozadí vztahů, ve výchozím nastavení a mouseover * /









 # Menu tam







 {



    



 background-image: url (menu_1.gif);







 }







 # Menu bude: hover







 {



    



 background-image: url (menu_2.gif);







 }

Provoz na hnízdění prvků, jak je uvedeno výše, zajistit, aby jen kulička, která se zobrazí s tímto stylizace je menu, v důsledku hnízdní uvnitř krabice s ID "menu".

Všechny ostatní kuličky stránky budou mít cestu selhání nebo explicitně přiřazené přes CSS.