Адаптивное меню для сайта

Опубликовано: Ноябрь 18, 2018 в 5:57 пп

Как сделать адаптивное меню для сайта на чистом html и css, не подключая jquery и javascript. Не поверите, но очень легко. Предположим, вам необходим простой сайт-визитка с простым одноуровневым меню из 4-5 пунктов, но в то же время сайт должен быть адаптированным к мобильным устройствам.

Сегодня мы создадим адаптивное меню для такого сайта-визитки за 10 минут. Сделаем мы это на  на чистом html и css, используя чекбокс и видимость элементов.

адаптивное меню для сайтаТо есть смысл такой, на большом дисплее видно обычное горизонтальное меню. Но если ширина дисплея менее 640 px, горизонтальное меню становится невидимым и к работе приступает наш чекбокс.

адаптивное меню Он разворачивает и сворачивает  мобильную версию меню.

адаптивное меню на html и cssВ общем код очень простой и вы без особого труда разберетесь что к чему. Для тех кто вообще пока еще плохо представляет о чем идет речь, просто вставьте первый кусок кода со стилями между тегами <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

Оставить комментарий

Ваш email не будет опубликован.