Як зробити меню для сайту?

Якщо ви цікавитеся розробкою сайтів, то в даній статті ви прочитаєте, як зробити меню для сайту. Також тут ви дізнаєтеся етапи створення вертикального і горизонтального меню для інтернет-ресурсу. У даній статті розкрита тема того, як зробити меню для сайту за допомогою HTML і CSS. Крім цього, тут описані етапи створення горизонтального і вертикального меню для будь-якого сайту.

Розробляючи меню для ресурсу, потрібно добитися максимальної запам'ятовуваності і впізнаваності. Відвідувачі повинні без проблем визначати місцезнаходження внутрішніх посилань, а також звичайного тексту і контенту. Деякі веб-розробники не використовують дану концепцію, і згодом відвідувачам вкрай важко орієнтуватися по сторінках сайту і знаходити потрібну інформацію та посилання. Бажано ніколи не допускати подібні ситуації, оскільки це може дуже знизити рівень загальної кількості відвідувань ресурсу. Тому завдання, як зробити красиве меню для сайту правильно, включає в себе ряд дій. Необхідно виділяти основні посилання контрастним кольором, бажано щоб він був яскравим і помітним - червоним, зеленим або синім.

Створюючи меню для сайту, CSS потрібно привести у відповідність ряду основних вимог. По-перше, меню повинно бути простим і зручним, компактним за розміром і зрозумілим для користувачів. Найбільш компактним за розміром меню є меню, що випадає - воно здатне істотно заощадити місце на сторінці. Але, взагалі, вибір типу меню залежатиме від загальної концепції сайту та загального дизайну. Краще створювати меню без використання javascript і бібліотеки JQuery, щоб меню було доступним і нормально відображалося у тих користувачів, у яких в налаштуванні браузерів скрипти відключені.

Створення вертикального меню

• Спочатку створюється маркований список HTML за допомогою тегів

і
• . Тут вказується потрібну кількість пунктів майбутнього меню, що йдуть по порядку.
• Після, необхідно зробити кожен з пунктів списку HTML посиланнями. Так, вийде основа для вертикального меню. Для HTML сайту вміст кожного з елементів поміщається всередину тега , при цьому таблиці стилів ще не підключаються. Таким чином, пункти меню стануть посиланнями на відповідні розділи сайту. Виглядає документ так:
  
  
  

  
  

• 1 пункт меню сайту
• 
  
• 2 пункт меню сайту
• 
  
• 3 пункт меню сайту
• 
  
• 4 пункт меню сайту
• 
  
• 5 пункт меню сайту
• 
  

Це усереднений базовий документ, який показує меню вертикальне. Для сайту, над яким ви будете працювати, можна додати ряд додаткових елементів.

Тег має атрибут href, в ньому необхідно вказати адресу сторінки, на яку буде вести дане посилання.

Варто запам'ятати, що вертикальне меню краще помістити в блок , т.к. в специфікаціях HTML4 є умова, виходячи з якого, всередину елемента поміщаються лише блокові елементи і елементи і. У тега , відповідно, є один атрибут - id, що має значення block. У

кореневого тега, також є атрибут - id, що має значення «hnav», і даний атрибут потрібно для формування горизонтального і вертикального CSS вашого меню.

Можна зробити це вертикальне меню ще й випадає. Для початку слід продумати структуру майбутнього меню. Тут вже краще скористатися для основи ненумерованого списку. У ньому зазвичай і створюються елементи меню. І всередину даних елементів додаються додаткові пункти випадає підменю. На цьому ж етапі задається бажана ширина пунктів майбутнього меню. А також прибираються зайві відступи і маркери.

Далі, слід перейти до розташування пунктів і елементів списку. За замовчуванням, зазвичай, вони розташовані вертикально. Тому необхідно задати значення - position, позиціонування пунктів. Краще вибрати відносне позиціонування - relative. Робиться це для того, щоб згодом розташувати пункти підміню точно щодо основних пунктів.

Таким чином, позиціонування вийде абсолютним. За допомогою атрибутів «top» і «left» вказується місце розташування виведення пунктів підменю. Пізніше можна додати обвідним кордон до пунктів меню і підменю, шириною в 1 піксель. Якщо не зрушувати блок пунктів підміню на величину ширини кордону вліво, то при появі пунктів підміню стануть видні обидві кордону відразу. Це буде виглядати непривабливо. Атрибуту підміню «display» присвоюється значення «none» для того, щоб пунктів підміню не було видно, поки на нього не навели курсор.

Створення горизонтального меню

Це також зразок і основа для створення більш складного меню. Горизонтальне меню для сайту створюється досить нескладним способом:

• Горизонтальне меню потрібно розмітити наступним html кодом:
  Головна
  Пункт 1
  Пункт 2
  Пункт 3
  Пункт 4
  Тобто створюється ненумерований простий список, де присвоюється id одному з пунктів меню. Краще привласнити його пунктом поточної сторінки, щоб бачити різницю у відображенні.
• Тепер потрібно попрацювати зі стилями, з CSS. Головне, щоб кожен з пунктів меню відображався горизонтально, а не вертикально. Для цього для атрибута «display» потрібно привласнити значення - inline.
• Потім потрібно доповнити сам елемент «ul». Необхідно, щоб візуально меню було горизонтальною лінією на всю ширину сторінки. Саме так і будуть розташовуватися пункти меню, яким потрібно задати відстань до кожного краю сторінки. Від цього залежить розташування меню на сторінці.
• Далі, необхідно створити самі блоки, де будуть розташовані пункти меню, і задати відстань всередині блоків. Для цього атрибуту «text-decoration» вказується значення - none, атрибуту «margin-left» задається значення - 3px, атрибуту «border» задається значення - 1px solid.
• Потім необхідно вказати значення для активних і неактивних пунктів меню. Для цього атрибуту «link» задається значення - {color: # 4903-}, атрибуту «visited» - значення {color: # 687}, атрибуту «hover» - {color: # 010 background: # 6688FF- border-color : # 237}
• В останню чергу потрібно вказати зовнішній вигляд пункту на поточній сторінці. Для цього атрибуту «background» задається значення - #FFF, атрибуту «border-bottom» - значення 1px bold #FFF.

А якщо використовувати зображення замість однотонних фонів, то ви зможете отримати неймовірно різноманітні пункти меню з цікавим дизайном. Підключіть стилі CSS до HTML, і ваше меню буде готово. Тепер ви знаєте все про те, як зробити меню для сайту самостійно. Це дозволить вам реалізувати всі свої дизайнерські ідеї і зробити сайт на свій власний розсуд. Крім того, у вас з'явиться можливість заощадити на замовленні розробки у професійних компаній, що займаються веб-дизайном. Оскільки одним з основних елементів сайту є меню, то у вас вже половина вашого творіння готова. Залишилося наповнити це меню інформацією. Бажаємо вам успіху і хороших ідей!

">