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

Горизонтальне меню є майже на будь-якому сайті - це важлива частина, так як вона здатна своїм зовнішнім виглядом і зручністю залучити або, навпаки, відлякати відвідувачів. Давайте навчимося створювати елементарне горизонтальне меню: зробимо його "скелет" на 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.jpg) repeat-x. Нехай буде background: url (img2.jpg) repeat-x для a: hover.

Використовуйте свою фантазію, творчі уподобання. Тоді на основі знань про те, як створити найпростіше меню на сайті, ви зможете розробляти сторінки зі своїм неповторним дизайном.