Меню – це той елемент, з яким користувач зустрічається при вході на сайт і бачить його, переміщаючись по сторінкам. Головне меню розташовується у шапці сайту, а додатковий – у нижньому блоці сторінки. Там міститься корисна чи другорядна інформація, яка для зручності часто оформляється у вигляді меню. Найчастіше на всіх сторінках сайту використовується однакове оформлення навігаційного елемента.
Коли якісь пункти містять додаткові розділи, створюється кілька рівнів. Це працює так: при наведенні миші на одну з секцій з’являється додатковий список з підрозділами. При розробці необхідно подбати, щоб при перегляді сторінки на маленьких екранах з’являлося адаптивне меню замість звичайного.
HTML-розмітка
Перед тим, як зверстати адаптивне випадаюче меню CSS, потрібно створити скелет. Задається за допомогою мови розмітки HTML і знаходиться у файлі з розширенням .html. Починається з , потім позначається початок і кінець документа тегами і відповідно. Всередині документа задається тег head, де вказується мета-інформація про сайт:
- заголовок документа;
- короткий опис;
- кодування;
- файли зі стилями та скриптами.
Після закривається тега слід тіло документа, оформлене . Тут знаходяться логічні блоки сайту, вони інтерпретуються браузером і виводяться на екран у вигляді візуальних елементів.
Базова розмітка зазвичай складається з тегів ul і li. Це семантично вірне оформлення, яке пов’язане з тим, що при перегляді в браузерах, що не підтримують CSS, аналізатор вмісту правильно пізнає цей блок. Хоча використання стандартних div-ів також широко поширене.
Проста розмітка меню без прихованих елементів і випадаючого меню CSS виглядає таким чином:
- Головна
- Історія
- Про нас 3
- Контакти 3
В теге зазначаються посилання на сторінки, а у всіх інших – використовуються селектори.
Базові стилі
Наступним кроком створення випадного меню на HTML і CSS є створення каскадної таблиці стилів. Вони зберігаються у файлі з розширенням .css, де описується зовнішній вигляд документа і різні візуальні ефекти. Тут задаються кольори, шрифти, розташування блоків та інших аспектів зовнішнього вигляду веб-сторінки.
Те, що тут буде знаходитися, залежить виключно від дизайну. Є кілька основних моментів, які варто розібрати. Оскільки створюється меню, маркери не повинні відображатися. Вони прибираються за допомогою атрибута list-style: none. Важливою частиною є усунення підкреслення посилань. Для цього селектори, які відповідають за оформлення тега , повинні містити text-decoration: none.
Необхідно призначити дії при наведенні миші на кнопки. Для чого використовується псевдоклас :hover? Використовуючи його, користувач бачить, як змінюється колір пунктів або з’являється список, що випадає меню на HTML CSS. Для приховування деяких елементів застосовується display: none, а для появи – display: block або display: inline.
Горизонтальне розміщення через float
Після базового оформлення користувач помітить, що отримана структура – це вертикальне меню з випадаючим списком на HTML CSS. Для деяких сайтів прийнятно розташування вертикального меню, але, як правило, використовується горизонтальне.
Тепер потрібно розмістити всі елементи в ряд. У цьому випадку буде використано властивість float, що відповідає за обтікання. Спочатку воно використовувалося виключно для того, щоб управляти розташуванням тексту відносно зображення. Таким чином, можна задати лівостороннє або правостороннє вирівнювання, скасувати обтікання тексту або призначити спадкування значення батька.
Горизонтальне розміщення через inline-block
За замовчуванням блоки, які задаються тегом div, вирівнюються по вертикалі. Ширина кожного займає всю сторінку, а при створенні сестринського елемента він буде слідувати вниз, починаючи від попереднього.
Коли потрібно приховати, використовується display: none. Це знадобиться для появи прихованих частин меню при наведенні курсору миші. Важливо відзначити, що блок не просто стає прозорим, – видимі частини сайту займають його місце.
Щоб розмістити діви горизонтально один за одним, необхідно використовувати властивість inline або inline-block. Що стосується останнього, його застосування має більше переваг, адже містить властивості як рядкового елемента, так і блочного.
Властивість display використовується для div-ів і тегів li списку ul.
Таким чином, щоб створити горизонтальне випадаюче меню на HTML CSS файлі стилів в селекторах li чи div, вказується атрибут display зі значенням inline-block.
Створення випадають елементів
Випадаючі елементи спочатку не видно на сторінці, вони мають властивість display: none. Пізніше none змінюється на block або inline-block. Це відбувається при натисканні на один з пунктів меню або під час наведення мишки. Для створення цього ефекту і пов’язаних анімаційних переходів, використовується CSS.
Має виглядати приблизно так:
#menu ul li {
position:absolute;
display: none;
}
#menu li:hover ul {
display:inline-block;
}
Слід звернути увагу на атрибут position, з допомогою якого встановлюється позиціонування елемента. Блок div при заданому значенні absolute відображається над іншими блоками. А відлік координат починається від лівого верхнього краю батьківського елементу. В цьому разі батьком вважається document. Це треба змінити і зробити батьком #menu, задати position: relative. Тепер у #menu ul потрібно вказати координати left і top, щоб випадаючий список з’являвся прямо під основним пунктом і не перекривав його.
Якщо поруч знаходиться кілька абсолютних блоків, треба використовувати властивість z-index. При розгляді двох дівов з абсолютним позиціонуванням, коли один знаходиться поверх іншого, z-index першого повинен мати значення вище, ніж у другого.
Адаптивність
Жоден сайт не може вважатися хорошим, якщо він неправильно відображається на мобільних телефонах і планшетах. Сенс створення адаптивних сторінок в тому, щоб змінити оформлення при досягненні певного розміру екрана. Для цього використовується ключове слово @media. В значеннях вказується тип носія, максимальний або мінімальний розмір екрану.
Щоб працювати з цим атрибутом, потрібно задати початкову ширину блоку на великому екрані властивістю max-width: 100%. Зменшуючи екран, відбуваються зміни з блоком:
@media (min-width: 768px) {
.container-small {
//змінюємо ширину пунктів меню, виводимо іконку гамбургера
}
Ця іконка меню грає важливу роль у створенні адаптивного багаторівневого випадаючого горизонтального меню CSS. Являє собою три знаходяться паралельно один одному горизонтальні лінії. Коли користувач натискає на них, з’являються приховані частини альтернативного меню.
Використання Bootstrap
З появою фреймворку Bootstrap верстальникам стало набагато легше створювати адаптивні елементи і будувати сайт. Він дозволяє прототипировать ідеї з допомогою готових компонентів і потужних плагінів. Для використання базових можливостей потрібно включити обчислені стилі Bootstrap з CDN в head сайту. Повинно виглядати так:
Для створення горизонтального меню з випадаючим списком на CSS використовується компонент Navbar. Його потрібно скопіювати з офіційного сайту. За замовчуванням він має два режими відображення: десктопний і мобільний.
Тепер залишилося додати оформлення, щоб виглядало так, як того вимагає дизайн.
Інший спосіб створення адаптивних елементів – використання Grid системи. Її відмінність від Bootstrap в тому, що можна вказати будь-яку кількість колонок і зробити їх різної ширини.
UberMenu
Сьогодні розроблено величезну кількість плагінів, які звільняють від власноручного написання коду. Верстальщику необхідно підключити відповідні файли, внести зміни до функціонал.
UberMenu – це горизонтальне меню з випадаючим списком HTML CSS, розроблене під движок WordPress. Його можливості:
- адаптивність;
- випадаюче меню;
- підтримка сенсора;
- робота з коробки;
- гнучкі налаштування;
- великий список анімаційних переходів;
- наявність фільтрів сортувань;
- автоматична інтеграція в будь-яку тему WordPress.
Є безкоштовна і платна версія з повним функціоналом вартістю 19 доларів.
Зручність використання готових плагінів для створення випадаюче меню CSS в тому, що всі браузери будуть однаково відображати вміст веб-сторінки. Є одна неприємна особливість – UberMenu не вміє працювати з браузером IE6. Але це не страшно, адже сьогодні середа поширення «Інтернет Експлорера» становить менше 1%.
Mega Max Menu
«Мега Макс Меню» – це відмінне рішення для створення випадаючого меню CSS. Воно підтримує можливість розташування меню в хедері і футері. З ним легко працювати, він підтримує функцію drag-and-drop. Все, що необхідно зробити для розміщення кнопок меню, – мишею перенести відповідні елементи на вибране місце.
Можна призначити будь-які способи, щоб з’явилося приховане субменю: навести вказівник миші на елемент або якшо по ньому. Існує багато анімаційних ефектів: поступове згасання, поява, выезжание.
Цей плагін досить легкий, файл javascript важить менше 2 кілобайт. При створенні можна використовувати вбудовані шрифти, іконки. Якщо з’являються проблеми з використанням, можна ознайомитися з відповідними мануалами.
Для початку роботи достатньо додати його в список плагінів WP.
JQuery Accordion Menu Widget
Для створення випадаюче меню CSS можна використовувати плагін JQuery Accordion Menu Widget. Він доступний для скачування з репозиторію WordPress або з офіційного сайту. Працює з останніми версіями CMS, сумісний з іншими плагінами.
З його допомогою можна створювати вертикальне меню. Він підтримує стандартні функції аналогічних інструментів, але є особливі доповнення. Наприклад, при розгортанні субменю, якщо за 1 секунду не було вчинено жодних дій, воно самостійно повертається до вихідного стану. Інша цікава функція являє собою відключення батьківських посилань, коли активні дочірні. Це означає, що при з’явиться підменю немає можливості натиснути на пункти основного.
При самостійному створенні меню користувач зустрічав ситуацію, коли елементи відразу реагують навіть при випадковому наведенні миші або клацання. Щоб уникнути такої незручності, вбудована затримка hover delay. Інша корисна функція – управління швидкістю появи і приховування підменю.
Висновок
Важливо створити випадаюче меню CSS для простого і зручного взаємодії між користувачем і інтерфейсом веб-сторінки. Щоб вирішити задачу необхідно грамотно розробити дизайн, зверстати базові елементи, оформити стилі, доопрацювати анімаційні ефекти.
Можна скористатися готовими варіантами, якщо не передбачені якісь унікальні дизайнерські рішення. Плагіни легко підключаються до сторінки, їх дуже просто правити у відповідності з вимогами.
Якщо є сенс розробляти меню з нуля, звичайно, це необхідно робити самостійно. При роботі з фреймворками використовуються готові компоненти, вони відразу адаптивні. Відсутність необхідності підстроювання верстки під маленькі екрани сильно економить час.
