Робім гарызантальнае меню для сайта самі

Гарызантальнае меню ёсць амаль на любым сайце - гэта важная частка, так як яна здольная сваім знешнім выглядам і выгодай прыцягнуць або, наадварот, адпудзіць наведвальнікаў. Давайце навучымся ствараць элементарнае гарызантальнае меню: зробім яго "шкілет" на HTML, асвоім асноўныя навыкі стварэння. Можна, вядома, знайсці ўжо гатовае меню, але значна прыемней навучыцца распрацоўваць яго самастойна. Гэта даволі займальнае занятак.

Вучымся рабіць меню

Пастараемся не адступаць ад семантыкі, якой прытрымліваюцца карыфеі вёрсткі. Спачатку трэба зрабіць "шкілет" для нашага меню на HTML, засвоіць асноўныя навыкі для таго, каб самастойна зрабіць гарызантальнае меню. А потым яго упрыгожым, ужыўшы табліцы стыляў. Хай наша гарызантальнае меню змяшчае 5 пунктаў. Першы пункт будзе перанакіроўваць на галоўную старонку. Другі пункт - "О нас". Трэці - "Нашы ўзнагароды". Чацвёрты - "Гэта цікава". Пяты - "Звязацца з намі".

HTML-код выглядае так:

Хто не ведае: тэг ul выкарыстоўваецца для маркіраванага спісу, элементы яго пачынаюцца з li. Тэгі li ўспадкуюць стылі, якія прымяняюцца да ul.

Ul - блокавы элемент спісу, ён будзе расцягнуты па шырыні старонкі. Li таксама з'яўляецца блокавым.

Такім чынам, ствараем index.html. Набіраем наш код. На дадзеным этапе браўзэр адлюструе вертыкальнае, а не гарызантальнае меню. Але ў нас з вамі мэта - зрабіць гарызантальнае меню для сайта. Для гэтага нам спатрэбіцца CSS.

Для чаго CSS?

Калі вы яшчэ толькі асвойваеце распрацоўку сайтаў, то трэба пазнаёміцца з паняццем каскадных табліцай стыляў. Па сутнасці, гэта правілы для фарматавання, афармлення, якія прымяняюцца да розных элементам на старонках web-сайта. Калі апісваць ўласцівасці элементаў у стандартным HTML, то прыйдзецца неаднаразова паўтараць гэта, атрымаецца дубляванне аднолькавых частак кода. Час загрузкі старонкі на кампутар карыстальніка вырасце. Каб такога пазбегнуць, ёсць CSS. Дастаткова апісаць ўсяго адзін раз пэўны элемент, а далей проста паказваць, дзе выкарыстоўваць ўласцівасці пэўнага стылю. Можна зрабіць апісанне не толькі ў тэксце самой старонкі, але і ў іншым файле. Гэта дазволіць прымяняць апісанне розных стыляў на любых старонках сайта. Таксама зручна змяняць некалькі старонак, падправіўшы CSS-файл. Табліцы стыляў дазваляюць працаваць са шрыфтамі на лепшым узроўні, чым HTML, дапамагаючы пазбегнуць пацяжэнні старонак сайта графікай.

Выкарыстанне табліц стыляў для распрацоўкі меню

CSS-код для меню:

1. # My_1menu {list-style: none; padding: 6; width: 800px; margin: auto;}
2. # My_1menu li {float: left; font: italic 18px Arial;}
3. # My_1menu a {color: # 756; display: block; height: 55px; line-height: 55px; padding: 0px 15px 0px 15px; background: #dfc; text-decoration: none;}
4. # My_1menu a: hover {color: #foa; background: # 788;}

Зараз давайце разбярэм атрыманае CSS гарызантальнае меню.

# My_1menu - так адбываецца прысваенне стылю для UL- элемента з id = my_1menu, list-style: none - гэта каманда, каб прыбраць маркеры злева ад спісачнага элементаў.

width: 800px - шырыня нашага меню ў 800 пікселяў.

padding: 0 - гэта прыбірае водступы ўнутры.

margin: auto - выравнивние гарызантальнага меню па цэнтры нашай старонкі.

# My_1menu li - прысваенне стыляў li-элементам.

height: 55px - вышыня меню.

# My_1menu a: hover - прысваенне стыляў для а-элемента, калі на яго наводзіцца мышка.

Не будзем апісваць кожны радок падрабязна, так як кожны распрацоўнік можа задаць тут свае параметры. Гэта асновы прымянення стыляў у меню на сайце. Можна надаць яму больш завершаны і прыгожы выгляд, ужываючы карцінкі. Прысвойце элементу а, напрыклад, background: url (img1.png) repeat-x. Хай будзе background: url (img2.png) repeat-x для a: hover.

Выкарыстоўвайце сваю фантазію, творчыя перавагі. Тады на аснове ведаў пра тое, як стварыць найпростае меню на сайце, вы зможаце распрацоўваць старонкі са сваім непаўторным дызайнам.