Меню – це той елемент, з яким користувач зустрічається при вході на сайт і бачить його, переміщаючись по сторінкам. Головне меню розташовується у шапці сайту, а додатковий – у нижньому блоці сторінки. Там міститься корисна чи другорядна інформація, яка для зручності часто оформляється у вигляді меню. Найчастіше на всіх сторінках сайту використовується однакове оформлення навігаційного елемента.
Коли якісь пункти містять додаткові розділи, створюється кілька рівнів. Це працює так: при наведенні миші на одну з секцій з’являється додатковий список з підрозділами. При розробці необхідно подбати, щоб при перегляді сторінки на маленьких екранах з’являлося адаптивне меню замість звичайного.
HTML-розмітка
Перед тим, як зверстати адаптивне випадаюче меню CSS, потрібно створити скелет. Задається за допомогою мови розмітки HTML і знаходиться у файлі з розширенням .html. Починається з , потім позначається початок і кінець документа тегами і відповідно. Всередині документа задається тег head, де вказується мета-інформація про сайт:
- заголовок документа;
- короткий опис;
- кодування;
- файли зі стилями та скриптами.
Після закривається тега слід тіло документа, оформлене . Тут знаходяться логічні блоки сайту, вони інтерпретуються браузером і виводяться на екран у вигляді візуальних елементів.
Базова розмітка зазвичай складається з тегів ul і li. Це семантично вірне оформлення, яке пов’язане з тим, що при перегляді в браузерах, що не підтримують CSS, аналізатор вмісту правильно пізнає цей блок. Хоча використання стандартних div-ів також широко поширене.
Проста розмітка меню без прихованих елементів і випадаючого меню CSS виглядає таким чином:
- Головна
- Історія
- Про нас 3
- Контакти 3
В теге зазначаються посилання на сторінки, а у всіх інших – використовуються селектори.
