Хороший веб-сайт повинен мати зручну систему навігації. Меню є одним з варіантів вибору потрібної дії. Не стільки важлива орієнтація елементів меню в просторі, скільки зручність їх використання. Хороший дизайн логіки управління та його спадкоємність по всім елементам діалогу робить сайт компактно-комфортним постачальником потрібного функціоналу.
Меню: звичне і комфортне
Як виконати навігацію по веб-ресурсу - питання теоретичний. Як зробити меню для сайту? 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 змінить техніку створення меню горизонтального на логіку меню осмисленого, наділеного елементами реальності, можливо, його сайт отримає іншу аудиторію відвідувачів і зовсім інший рейтинг серед подібних.