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

Опубликованно 28.10.2018 02:57

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

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

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

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

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

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

В якості зразка можна розглядати сайти: міжнародної біржі Forex; Всесвітньої організації охорони здоров'я; фінансової системи Росії; нафтогазової компанії.

Але кількість грошей або соціальна значимість - не критерії якості веб-розробки.

Будь-яке меню - справа рук конкретного розробника і думка колективу розробників популярної системи управління сайтами (CMS), використаної при розробці веб-ресурсу.

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

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

Як можна бачити на зображенні під цифрою 1, тут відразу чотири різних меню. Головна сторінка: спочатку ролик, потім документ HTML. Горизонтально все, але кожне меню виконано з різним співвідношенням HTML-тегів, навантаження на використання CSS і JavaScript.

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

Середні меню містять функціонал компанії в залежності від відвідувача, думки власника і його інтересів. Проста динамічна навігація

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

Конкурент Google, Yandex (цифра 3) будує своє меню відразу. Більш того, сторінка пошуку тут відразу наповнена додатковим функціоналом і пропонує відвідувачу не тільки функцію пошуку.

Yandex пропонує відразу: пошук; гроші; пошту та ін.

Всі функції в чистому HTML. Горизонтальні меню по кожній функціональності. Характерна особливість Google і Yandex - налаштування, які виконуються автоматично, але можуть бути змінені відвідувачем через горизонтально орієнтовані функції. Реальна статична і загальна практика

Останній приклад (під цифрою 4) - для розробників на платформі Office XML. Документи формату «*.*x» затребувані, популярні, і сайт, що пропонує опис стандарту, використовує чистий HTML. Горизонтальне меню містить посилання на основні розділи: docx; xlsx; pptx.

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

Епоха, коли розробник і дизайнер витрачали час на шикарні кнопки, що випадають підрозділи, анімацію та інші ефекти, пройшла.

Сьогодні гарне горизонтальне меню: HTML і CSS та JavaScript - це простота, комфорт і функціональність для відвідувача. Меню: зліва направо і зверху вниз або ...

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

Традиційний документ HTML: горизонтальне меню з випадаючими підпунктами по кожному пункту. Випадати може не тільки список посилань (пунктів), але списки списків. Коли сайт надає десятки послуг (товарів), і в кожній позиції може бути більше десятка рядків, стає проблемою як саме меню, так і його підпункти.

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

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

Якщо поєднати ідею систематизації інформації та скролінгу через ієрархію категорій, можна реалізувати чудову ідею руху не за пунктами меню, а за категоріями створеної системи подання інформації.

Фактично сайт - це систематизоване подання інформації, а структура цього подання - є категорії, тобто меню. Організація меню: списки, таблиці і діви

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

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

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

Ідея: зміст меню і його пунктів визначають, як зробити горизонтальне меню в HTML, а не жорстку конструкцію самого оптимального поєднання ul, li, div, table і т. д.

Завжди важливий зміст, а не жорстка конструкція. Сенс завжди можна делегувати від сервера через AJAX браузеру, де функція JavaScript оформить його в потрібний HTML-тег і приставить до нього CSS, яке визначить місце, розмір і колірне рішення меню (пункту меню). Віртуальне горизонтальне меню (HTML, CSS, JS)

Google - безперечний лідер в пошуку і не тільки. Ідея динамічного зміни меню з'явилася давно, але реалізація Google - найпростіша в наочної інтерпретації.

Тут немає ніякого ємного CSS, не виражене участь JavaScript, але пошук через класичне «погуглити» обумовлений не тільки лаврами лідера, але і фактичним виконанням.

Перехід горизонтального меню HTML теги з одного сенсу у зміст, обумовлений результатами пошуку, - хороше рішення.

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

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

Якщо розробник HTML/CSS/JS змінить техніку створення меню горизонтального на логіку меню осмисленого, наділеного елементами реальності, можливо, його сайт отримає іншу аудиторію відвідувачів і зовсім інший рейтинг серед подібних. Автор: Ігор Нежвинский 15 Серпня, 2018

Категория: Техника