Як я вже зазначив вище, сьогодні ми створюємо горизонтальне навігаційне меню сайту. Для початку кілька слів про меню. Навігаційне меню сайту - це інструмент, що дозволяє комфортно переміщатися по всіх сторінках сайту. За своєю функціональністю меню діляться на однорівневі і багаторівневі меню.
Однорівневе меню - це найпростіший вид меню, де назви посилань розташовуються один за одним в горизонтальній або вертикальній послідовності. Багаторівневе меню - це складний вид меню, де є кілька рівнів посилань на сторінки сайту. Тобто якщо одна з посилань першого рівня має підміню, посилання пов'язані між собою певною тематикою, то це вже багаторівневе меню.
У сучасному Сайтобудування тенденція йде до того, що на сайтах з'являється кілька меню, що дозволяє в кінцевому підсумку уникнути наявності на сайті складних меню. Прагнення логічно зрозуміло. Чим простіше навігація по сайту, тим зручніше сайт для відвідувача. На цьому, мабуть, закінчимо з теорією і перейдемо до створення безпосередньо меню.
Крок №1. Вибираємо місце для горизонтального навігаційного меню на макеті сайту. Якщо горизонтальне меню передбачено на макеті, то воно може розміщуватися в трьох місцях макета. Це над хедером, тобто зверху шапки, всередині хедера і під хедером. При цьому якщо меню розташовується за вашою задумом поза хедера, то розташування може бути, як логічне продовження хедера або ж, як окремий модуль, відокремлений від хедера і основної частини невеликою відстанню.
Крок №2. Визначаємо розміри навігаційного меню. Безпосередньо від тієї інформації, яку має нести в собі навігаційне меню, залежать і розміри цього самого меню. Відповідно, чим більше посилань, тим більше повинен бути розмір меню. І так ширина меню, яке виступає окремим модулем або є продовженням хедера, як правило, дорівнює ширині хедера або макета в цілому.
У випадках, коли навігаційне меню за задумом розташовується всередині хедера, то його розміри залежать від розмірів наданої ділянки в хедері. Ну а висота меню підбирається в залежності від розміру шрифту посилань і відповідних відступів від тексту.
Роздільник - це однотонна смуга або смуга з двох кольорів, яка, як і градієнт надає разделителю об'ємність. Для більшої реалістичності при створенні меню досить часто розробники використовують такі стилістичні ефекти, як тінь, світіння, тиснення, глянець і накладення візерунка. Все це надає меню свою індивідуальність і неповторність.
У випадках, коли меню розташовується всередині хедера, його колірне рішення повністю збігається з колірними параметрами хедера і тому даний крок не виконується.
Крок №4. Робота над текстовою складовою навігаційного меню. Посилання на навігаційному меню повинні чітко виділятися і бути помітними для користувача сайту. Тому, як правило, для посилань визначається відмінний від усього сайту вид шрифту і відповідно його розміри. Є одне зауваження. Не варто зловживати шрифтом і робити його викликають у випадках, коли ваше меню є частиною хедера або служить його продовженням. У цих випадках досить зробити шрифт лише на один порядок вище основного шрифту використовуваного в хедері.
Так само зверніть особливу увагу на колір шрифту в навігаційному меню. Знову я повертаюся до колірної схемою сайту, яку ви повинні розробити до початку робіт зі створення макета сайту. Колір шрифту так само повинен бути в межах даної схеми, однак може мати більш грунтовний відтінок, що б підкреслити значимість меню.
Так само хочу звернути вашу увагу, що всі пункти меню повинні мати однакові відступи від тексту до верхньої і нижньої частини меню і відповідно до роздільників.
На цьому на сьогодні ми перервемося і продовжимо розгляд теми «Створюємо навігаційне меню» вже в наступній статті.