Адаптивное меню на чистом html и css
Как сделать адаптивное меню для сайта на чистом html и css, не подключая jquery и javascript. Не поверите, но очень легко. Предположим, вам необходим простой сайт-визитка с простым одноуровневым меню из 4-5 пунктов, но в то же время сайт должен быть адаптированным к мобильным устройствам.
Сегодня мы создадим адаптивное меню для такого сайта-визитки за 10 минут. Сделаем мы это на на чистом html и css, используя чекбокс и видимость элементов.
То есть смысл такой, на большом дисплее видно обычное горизонтальное меню. Но если ширина дисплея менее 640 px, горизонтальное меню становится невидимым и к работе приступает наш чекбокс.
Он разворачивает и сворачивает мобильную версию меню.
В общем код очень простой и вы без особого труда разберетесь что к чему. Для тех кто вообще пока еще плохо представляет о чем идет речь, просто вставьте первый кусок кода со стилями между тегами <head> и </head> или в ваш файл css, если таковой есть. Второй кусок кода после тега <body>
<style>
/************ Menu ************/
#menu-mobile {
/* чекбокс скрыт */
display: none;
}
.main-menu {
/* пункты меню скрыты */
display: none;
padding: 0;
margin: 0;
}
.main-menu li {
/* пункты меню расположены вертикально */
/* каждый имеет ширину 100% */
font-size: 16px;
font-weight: 700;
display: block;
width: 100%;
}
.main-menu a {
/* немного стилизуем ссылки */
display: block;
border-bottom: 1px solid #000099;
color: #000099;
padding: .5em;
text-decoration: none;
}
.main-menu a:hover {
text-decoration: underline;
}
/*****************************************/
.toggle-button {
text-align: center;
display: block;
cursor: pointer;
font-size: 16px;
font-weight: 700;
padding: 10px 20px;
background-color: #000099;
color: #fff;
width: 20%;
}
#menu-mobile:checked + nav .toggle-button{
color: #FFF7B2;
}
#menu-mobile:checked + nav .main-menu {
/* когда чекбокс активен меню становится видимым */
display: block;
}
@media screen and (min-width: 640px) {
.toggle-button {
/* label скрыт */
display: none;
}
.main-menu {
display: block;
margin: 0 auto;
padding: 0 15%;
background-color: #000099;
height: 60px;
}
.main-menu li {
/* теги <li> расположены в ряд */
width: calc(100% / 4);
text-align: center;
display: inline-block;
margin-right: -4px;
padding-top: 10px;
}
.main-menu a {
display: inline-block;
margin-right: -4px;
font-size: 18px;
font-weight: 700;
background-color: #000099;
text-decoration: none;
color: #fff;
text-transform: capitalize;
border-bottom: 0;
}
}
</style>
и вторая часть кода:
<header> <input type="checkbox" id="menu-mobile" /> <nav role="navigation"><!-- навигация --> <label for="menu-mobile" class="toggle-button" onclick>Menu</label> <ul class="main-menu"><!-- пункты меню --> <li><a href="#">Главная</a></li> <li><a href="#">О нас</a></li> <li><a href="#">Услуги</a></li> <li><a href="#">Контакты</a></li> </ul> </nav> </header>
В файле HTML после тега <head> должно быть указано:
<meta name="viewport" content="initial-scale=1.0, width=device-width">
без этого код работать не будет.
Можете проверить только что созданное адаптивное меню для своего сайта. Как проще всего проверить? Можно прямо в браузере. Настройки — масштаб и увеличьте до 300-400 %. Именно так и будет выглядеть ваша веб-страничка на мобильном устройстве.
Можете скачать и использовать уже готовый файл HTML с адаптивным меню для сайта
Если не знаете как скачать файл, подсказываю, жмете по ссылке, откроется страничка html адаптивное меню для сайта, кликаете в любом месте страницы правой кнопкой мыши, и в контекстом меню выбираете «Сохранить как».
А вас интересует как сделать фиксированное меню или липкое меню?
Читайте так-же как просто сделать калькулятор с ползунком на сайте на примере калькулятора натяжных потолков
Всем удачи!
Всего комментариев: 0