Як зробити горизонтальне меню HTML?

Хороший веб-сайт повинен мати зручну систему навігації. Меню є одним з варіантів вибору потрібної дії. Не стільки важлива орієнтація елементів меню в просторі, скільки зручність їх використання. Хороший дизайн логіки управління та його спадкоємність по всім елементам діалогу робить сайт компактно-комфортним постачальником потрібного функціоналу.

Меню: звичне і комфортне

Як виконати навігацію по веб-ресурсу - питання теоретичний. Як зробити меню для сайту? HTML горизонтальному або вертикальному варіанті? Як на кожній сторінці керувати поведінкою відвідувача і надавати йому реальний функціонал? Звичне і комфортне меню - це актуальне і затребуване. Відвідувача не цікавить теорія. Відвідувачу потрібно його рішення реальних задач. Зазвичай, документ HTML і горизонтальне меню розташовуються на першій сторінці сайту і орієнтують відвідувача в систематизованому подання про послуги, продукти або розділах сайту, власника, новини, контакти.


Орієнтація в просторі - не головне, але звичніше горизонтальна систематизація запропонованого функціоналу. Читати зліва направо і зверху вниз загальноприйнято не тільки на російськомовних сайтах.

Однозначно правильні сайти і їх меню

На малюнку зображені однозначно правильні сайти. Їх меню можуть вважатися зразками дизайну, логіки і функціональності. Однак думка лідерів не настільки вже непорушно, деколи бувають і винятки. В якості зразка можна розглядати сайти: міжнародної біржі Forex; Всесвітньої організації охорони здоров'я; фінансової системи Росії; нафтогазової компанії. Але кількість грошей або соціальна значимість - не критерії якості веб-розробки. Будь-яке меню - справа рук конкретного розробника і думка колективу розробників популярної системи управління сайтами (CMS), використаної при розробці веб-ресурсу. В шаблони самих кращих CMS ніколи не загнати реальне життя. Застосування інтернет-технологій завжди зумовлює в кожному конкретному випадку необхідність виконати теоретико-практичні роботи по створенню комфортного меню.

Класичний багатофункціональний приклад

Як можна бачити на зображенні під цифрою 1 тут відразу чотири різних меню. Головна сторінка: спочатку ролик, потім документ HTML. Горизонтально все, але кожне меню виконано з різним співвідношенням HTML-тегів, навантаження на використання CSS і jаvascript. Верхнє меню (1.1) відноситься до відвідувача (приватна або юридична особа, фінансова організація або інвестор). Саме нижнє (1.4) - залежить від всіх інших, і тут панує не HTML і jаvascript AJAX, які динамічно формують потрібний варіант тегів HTML. Середні меню містять функціонал компанії в залежності від відвідувача, думки власника і його інтересів.

Проста динамічна навігація

Приклад з Google (на фото під цифрою 2) - класика простоти переключающегося меню. На початку пошуку воно одне, в процесі пошуку зовсім інше. Тут немає горизонтального випадаючого меню HTML, CSS відведена мінімальна роль. Тут важливий момент перемикання варіанти кінцевої вибірки і меню підлаштовано під цю задачу.
Конкурент Google, Yandex (цифра 3) будує своє меню відразу. Більш того, сторінка пошуку тут відразу наповнена додатковим функціоналом і пропонує відвідувачеві не тільки функцію пошуку. Yandex пропонує відразу: пошук; гроші; пошту та ін. Всі функції в чистому HTML. Горизонтальні меню по кожній функціональності. Характерна особливість Google і Yandex - налаштування, які виконуються автоматично, але можуть бути змінені відвідувачем через горизонтально орієнтовані функції.

Реальна статична і загальна практика

Останній приклад (під цифрою 4) - для розробників на платформі Office XML. Документи формату «*.*x» затребувані, популярні, і сайт, що пропонує опис стандарту, використовує чистий HTML. Горизонтальне меню містить посилання на основні розділи: docx; xlsx; pptx. В Інтернеті можна знайти багато інших, менш популярних сайтів. Завжди можна виявити впевнене сучасне прагнення до максимальної простоти і функціональності. Епоха, коли розробник і дизайнер витрачали час на шикарні кнопки, що випадають підрозділи, анімацію та інші ефекти, пройшла. Сьогодні гарне горизонтальне меню: HTML і CSS та jаvascript - це простота, комфорт і функціональність для відвідувача.

Меню: зліва направо і зверху вниз або

У різних країнах читають по-різному. Варіант руху зліва направо і зверху вниз - це книга, стаття, гасло або рекламний буклет, але не сайт. Орієнтуватися на таку організацію діалогу розумно, але мова йде про веб-поданні інформації, яка визначає логіку діалогу з відвідувачем.
Традиційний документ HTML: горизонтальне меню з випадаючими підпунктами по кожному пункту. Випадати може не тільки список посилань (пунктів), але списки списків. Коли сайт надає десятки послуг (товарів), і в кожній позиції може бути більше десятка рядків, стає проблемою як саме меню, так і його підпункти. Зазвичай проблема великого кількість пунктів і підпунктів меню вирішується шляхом скролінгу. Однак кожна область застосування припускає систематизацію інформації. Сумнівно, що існує така задача на веб-програмування, яка б не допускала обмеження від трьох-чотирьох до семи - дев'яти пунктів. Така кількість вміщується в сторінку HTML, горизонтальне меню виходить компактним і зручним. Якщо поєднати ідею систематизації інформації та скролінгу через ієрархію категорій, можна реалізувати чудову ідею руху не за пунктами меню, а за категоріями створеної системи подання інформації. Фактично сайт - це систематизоване подання інформації, а структура цього подання - є категорії, тобто меню.

Організація меню: списки, таблиці і діви

HTML під горизонтальне меню не відводить ніякого спеціального синтаксису. Можна використовувати звичайні діви (div, span), таблиці (table, tr, td) і списки (ul, li). Останнє вважається найбільш правильним, але часто зустрічаються конструкції, в яких все змішано в одне ціле: один пункт меню може являти собою таблицю, у кожній клітинці декілька дівов і список для опису підрозділів.

Синтаксис HTML/CSS при створенні пункту меню, якщо він заснований на декількох дивах (тобто картинках оформлення), стає жорстким. Використовувати вектор меню або його пункті неможливо: немає зв'язку між змістом меню і логікою вектора (розтягування, стиснення, або іншого пропорційного зміни розміру). Залишається використовувати растр, а це кілька HTML. Горизонтальне меню (основна), а також: для смартфона - своє; збільшене - для великого екрану; контрастне - коли монітор вже старенький; для слабозорих і інші варіанти. У цьому поясненні істотно те, що не настільки важлива орієнтація в просторі конструкцій HTML допомогою правил CSS, скільки вираз сенсу пункту меню через функціональність jаvascript. Ідея: зміст меню і його пунктів визначають, як зробити горизонтальне меню в HTML, а не жорстку конструкцію самого оптимального поєднання ul, li, div, table і т. д. Завжди важливий зміст, а не жорстка конструкція. Сенс завжди можна делегувати від сервера через AJAX браузеру, де функція jаvascript оформить його в потрібний HTML-тег і приставить до нього CSS, яке визначить місце, розмір і колірне рішення меню (пункту меню).

Віртуальне горизонтальне меню (HTML, CSS, JS)

Google - безперечний лідер в пошуку і не тільки. Ідея динамічного зміни меню з'явилася давно, але реалізація Google - найпростіша в наочної інтерпретації. Тут немає ніякого ємного CSS, не виражене участь jаvascript, але пошук через класичне «погуглити» обумовлений не тільки лаврами лідера, але і фактичним виконанням. Перехід горизонтального меню HTML теги з одного сенсу у зміст, обумовлений результатами пошуку, - хороше рішення. Швидше за все, розробники Google мали на увазі зовсім інше, але пересічний відвідувач звик до свого розуміння логіки пошуку, поняття комфорту і керування пошуковою машиною. Звичка склалася в звичай, і вже далеко не перше покоління шукачів інформації користується ним. Виховання звички відвідувачів - трудомісткий процес, але коли він вдався - цим користуються, а не пропонують кардинально нові доктрини. Не можна порушити правила та сформовані навички. Якщо розробник HTML/CSS/JS змінить техніку створення меню горизонтального на логіку меню осмисленого, наділеного елементами реальності, можливо, його сайт отримає іншу аудиторію відвідувачів і зовсім інший рейтинг серед подібних.