Вертыкальнае меню CSS: робім самі

Некаторыя вэб-майстра не хочуць марнаваць час на распрацоўку з нуля простых элементаў, якія ўжо існуюць. Яны лічаць, што няма сэнсу марнаваць свой час на тое, што ўжо даўно ёсць. На самай справе для тых, хто толькі асвойвае HTML і CSS, важна самім рабіць многія рэчы, каб добра разумець іх працу. Гэта адносіцца і да меню. Створым вертыкальнае меню CSS. Яно будзе грунтавацца толькі на HTML і CSS, без прымянення Javascript і JQuery. Кожнае меню ўяўляе сабой спіс спасылак, якія вядуць на старонкі сайта.

асноўныя крокі

Каб стварыць нескладанае вертыкальнае меню CSS, неабходная наступная паслядоўнасць дзеянняў:

1. Спачатку вызначыце спіс спасылак (з дапамогай кода HTML), з якіх будзе складацца меню. Дайце ім назвы, напрыклад, такія:

1. Галоўная.
2. Наша гісторыя.
3. Кіраўніцтва.
4. Паслугі.
5. Кантакты.

2. Затым стилизуем спасылкі па сваім жаданні пры дапамозе CSS.

Напішам код HTML, захаваем у файле my_Vmenu.html і паглядзім, як гэта будзе выглядаць у браўзэры:

Гэта аснова (каркас) нашага меню. # 1, # 2 і г.д. неабходна замяніць на спасылкі. Паглядзіце, як усё выглядае ў браўзэры. Карціна вам не спадабаецца. Цяпер трэба прыступіць да апісання стыляў элементаў, каб зрабіць паўнавартаснае вертыкальнае меню CSS.

апісанне стыляў

Стварыце файл my_Vmenu.css, у якім задайце ўсе, што вам заўгодна, каб палепшыць знешні выгляд гэтак важнага элемента сайта. Ніжэй прыведзены код, ўкараненне якога ажывіць вертыкальнае меню CSS. Яго і запішыце ў створаны файл, а потым мы разгледзім падрабязней, што значаць асноўныя радкі, якія тут прыведзены.

Падрабязнае апісанне выкарыстаных стыляў

Зараз разгледзім дэталёва наша CSS меню вертыкальнае:

list-style-type дазваляе прыбраць маркеры спісу. Пры дапамозе ўстаноўкі "0" для margin і padding прыбіраем лішнія водступы ў спісу. Як відаць з кода HTML, наша меню з'яўляецца спісам, а пры дапамозе CSS задаюцца стылі.

ul # my_Vmenu - агульны стыль усяго спісу.

ul # my_Vmenu li a - стыль спасылкі паміж тэгамі li.

ul # my_Vmenu li a: hover - гэта апісанне выгляду пунктаў разгляданага меню ў той момант, калі на адзін з іх чалавек наводзіць курсор.

ul # my_Vmenu li a span - апісанне тэксту (назваў меню).

Памятаеце, што файлы my_Vmenu.css і my_Vmenu.html трэба захаваць у аднаго каталога. Зрэшты, яны могуць размяшчацца і ў розных папках, але тады важна прапісаць у файле my_Vmenu.html шлях да my_Vmenu.css. Будзьце ўважлівыя, так як у пачаткоўцаў з гэтым часта праблемы.

Стыль трэба падключаць паміж тэгамі head ў html-файле. menu_1.png і menu_2.png - гэта карцінкі з выяваў пункта меню ў звычайным стане і пры навядзенні курсора.

Лепш захаваеце карцінкі ў асобнай тэчцы для малюнкаў, назавіце яе my_images, але тады падкарэктуе код CSS. Напішыце там, дзе пазначаны гэтыя выявы, што яны знаходзяцца ў дадзенай дырэкторыі: url (my_images / menu_1.png) і url (my_images / menu_2.png).

У астатніх уласцівасцях, апісаных у кодзе CSS, разабрацца проста. Яны задаюць знешні выгляд нашага меню. Няцяжка заўважыць, што шырыня і вышыня пунктаў зададзена аднолькавай для пунктаў пры звычайным стане і пры навядзенні мышкі на іх. Памер шрыфта 18px, padding задае водступы з розных бакоў ад назваў пунктаў. Ўласцівасць display дазваляе задаць адлюстраванне блокамі, каб задаваць шырыню і водступы.

Наша вертыкальнае меню

Як бачыце, вертыкальнае CSS меню стварыць лёгка. На базе дадзеных ведаў вы зможаце зрабіць яго прыгожым і прывабным для наведвальнікаў свайго інтэрнэт-рэсурсу! Выкарыстоўвайце сваю фантазію, і тады стыльнае меню ўпрыгожыць ваш сайт.