Вертикални мени са позадином слике у превртању

У бившој чланку смо видели како се користи ЦСС вертикални мени са моусеовер ефекат , користећи различите боје позадине да означи ставке коју се померањем миша.

Смо поново овај пример и проширење, и додао две кључне одлике овог менија: Унапређење доступности кроз коришћење метака и боље перформансе у погледу дизајна.

Ево резултата желимо да добијамо:

У екрана пример показивача миша стоји на други линк у менију.

Ове две слике се користе, на пример да име и мену_1.гиф мену_2.гиф:

где величина (150Кс22 пиксела) су по мери на ширину оквира, величину фонта и паддинг додељује појединачних ставки.

Позивам читаоце да креирате прилагођене слике распоред и димензије од значаја за своје потребе.

Хајде пракси, почиње да се скрене мени. Анализирамо ХТМЛ код:

 <див ид="мену">



    



 <ул>



        



 <ли> <а хреф="#"> Страна 1 </ а> </ п>



        



 <ли> <а хреф="#"> Страна 2 </ а> </ п>



        



 <ли> <а хреф="#"> Страна 3 </ а> </ п>



        



 <ли> <а хреф="#"> Страна 4 </ а> </ п>



        



 <ли> <а хреф="#"> Страна 5 </ а> </ п>



    



 </ Ул>







 </ Див>

Сви менији ће бити у кутији пише "мени", у којем ћемо градити набрајања која садржи линкове.

Не доделити било који ИД и нема класу за повезивање на било коју од ставки менија (списак, списак, линк), само на основу идентификације од стране гнезде елемената.

Прати ЦСС праћена одговарајућим напоменама:

 / * Стилизоване уопштено ДИВ таг * /









 П







 {



    



 фонт-сизе: 10пк;



    



 фонт-фамили: Вердана;







 }









 / * Додељивање позадину и ширина кутије у менију * /









 # Мени







 {



    



 бацкгроунд: # ЦЦДДЕЕ;



    



 ширина: 150пк;







 }









 / * Брисање стила подразумеваног УЛ таг садржане у мени * /









 # Мени ул







 {



    



 маргин: 0пк 0пк 0пк 0пк;



    



 лист-стиле-типе: ноне;







 }









 / * Стилизоване листе у менију * /









 # Мени ће







 {



    



 маргин: 0пк 0пк 0пк 0пк;



    



 бордер-боттом: 1пк солид # ФФФФФФ;







 }









 / * Додељивање стил везе у листи менија * /









 # Мени Ли, да их: ховер







 {



    



 дисплаи: блоцк;



    



 позиција: релативна;



    



 фонт-сизе: нико;



    



 цолор: # 192939;



    



 фонт-веигхт: болд;



    



 маргин: 5пк 5пк 5пк 5пк;







 }









 / * Подесите позадину линкова, по дефаулту, и моусеовер * /









 # Мени ту да







 {



    



 бацкгроунд-имаге: урл (мену_1.гиф);







 }







 # Мени а: ховер







 {



    



 бацкгроунд-имаге: урл (мену_2.гиф);







 }

Рад гнежђење елемената, као што је већ поменуто, проверите да ли само метак који ће се појавити са овим стилизације је мени, као резултат гнежђење у кутији са ИД "у менију."

Сви остали метака сајта ће имати свој начин подразумевани или изричито додељени преко ЦСС-а.