Для создания адаптивного меню для сайта на HTML существует несколько подходов. Один из самых популярных методов — это использование медиа-запросов в комбинации с HTML и CSS. Давайте рассмотрим один пример меню в довольно интересной реализации.
Адаптивное меню для сайта HTML
Адаптивное меню играет важную роль в обеспечении удобства пользователей на вашем сайте, особенно при просмотре на планшетах и мобильных устройствах. Для создания адаптивного меню в HTML и CSS мы используем медиа-запросы для определения ширины экрана и применения соответствующих стилей.
Шаг 1: Разметка HTML
Создаем элементы HTML для меню. Обычно это список ссылок <ul>
и <li>
.
<div class="iconicmenu"> <input type="checkbox" id="togglebox" /> <ul> <li><a href="#">Главная</a></li> <li><a href="#">HTML</a></li> <li><a href="#">CSS Библеотека</a></li> <li><a href="#">CSS Галерея</a></li> <li><a href="#">JavaScript</a></li> <li><label for="togglebox"></label></li> </ul> <label class="toggler" for="togglebox">Menu</label> </div>
Шаг 2: Стилизация с CSS
Оформляем меню с помощью стилей CSS. Все стили можно изменить под внешний вид своего сайта.
.iconicmenu { position: relative; height: 45px; overflow: hidden; } .iconicmenu, .iconicmenu * { -moz-box-sizing: border-box; box-sizing: border-box; } .iconicmenu input[type="checkbox"] { /*checkbox используется для переключения меню*/ position: absolute; left: 0; top: 0; opacity: 0; } .iconicmenu > label { /* Главный значок для перек. состаяния меню */ z-index: 1000; display: block; position: absolute; width: 40px; height: 40px; float: left; top: 0; left: 0; background: white; text-indent: -1000000px; border: 6px solid black; /* цвет рамки */ border-width: 6px 0; cursor: pointer; -moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; /* переход */ } .iconicmenu > label::after { /* внутренние полосы */ content: ""; display: block; position: absolute; width: 100%; height: 18%; top: 19%; left: 0; border: 6px solid black; border-width: 6px 0; -moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; /* переход */ } .iconicmenu ul { /* UL меню внутри контейнера */ margin: 0; padding: 0; position: absolute; margin-left: 40px; background: #eee; left: -100%; /* скрыть меню */ height: 40px; /* высота меню*/ font: bold 14px Verdana; text-align: center; list-style: none; opacity: 0; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; -moz-perspective: 10000px; perspective: 10000px; -moz-transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; transition: all 0.5s ease-in; /* переход для анимации */ } .iconicmenu li { display: inline; margin: 0; padding: 0; } .iconicmenu ul label { cursor: pointer; position: relative; height: 100%; text-align: center; } .iconicmenu ul label::after { content: "x"; display: inline-block; line-height: 14px; color: white; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; width: 20px; height: 20px; background: black; font-size: 18px; margin: 5px; margin-top: 10px; -moz-transition: all 0.3s ease-in; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu ul label:hover::after { -moz-transform: rotatey(180deg); -ms-transform: rotatey(180deg); -webkit-transform: rotatey(180deg); transform: rotatey(180deg); /* флип наклейки вертикально */ } .iconicmenu > label:hover, .iconicmenu > label:hover::after, .iconicmenu input[type="checkbox"]:checked ~ label, .iconicmenu input[type="checkbox"]:checked ~ label::after { border-color: darkred; /* цвет выделения главного меню */ } .iconicmenu input[type="checkbox"]:checked ~ ul { left: 8px; /* анимация */ opacity: 1; -moz-box-shadow: 1px 1px 5px gray; -webkit-box-shadow: 1px 1px 5px gray; box-shadow: 1px 1px 5px gray; } .iconicmenu li a { display: block; float: left; text-align: center; text-decoration: none; color: black; margin: 0; padding: 10px; padding-right: 15px; height: 100%; } .iconicmenu li a:hover { background: black; color: white; } /* ----------------------------- CSS Media запросы для адаптации ----------------------------- */ /* Эти правила регламентируют, какие части меню отображается в том случае, когда Размер экрана меньше определенной ширины. По умолчанию 2 этапа определяются в зависимости от браузера по ширине экрана */ @media screen and (max-width: 580px) { .iconicmenu input[type="checkbox"]:checked ~ label { display: none; } .iconicmenu input[type="checkbox"]:checked ~ ul { margin-left: 0; } } @media screen and (max-width: 560px) { /* Конвертировать горизонтального меню, чтобы перепад высот вниз, а не вверх (понятное для всех размеров экрана) */ .iconicmenu { overflow: visible; } .iconicmenu ul { height: auto; } .iconicmenu ul li { min-width: 200px;; display: block; } .iconicmenu ul li a { float: none;; text-align: left; } }
Теперь на вашем ресурсе есть адаптивное меню, которое будет корректно отображаться на различных устройствах, меняя стили в зависимости от ширины экрана. Это делает навигацию на вашем сайте более удобной и дружелюбной для пользователей.
а как подпункты добавить ????
Это не выпадающее меню. На каком уровне вы знакомы с css?