Топ-100 Адаптивное меню для сайта html, css за 10 минут. ~ Сделай сайт

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

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

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

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

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

адаптивное меню для сайтаВ общем код очень простой и вы без особого труда разберетесь что к чему. Для тех кто вообще пока еще плохо представляет о чем идет речь, просто вставьте первый кусок кода со стилями между тегами <head> и </head> или в ваш файл css, если таковой есть. Второй кусок кода после тега <body>

<style>
/************ Menu ************/
#menu-mobile {
display: none;
}
.main-menu {
display: none;
padding: 0;
margin: 0;
}
.main-menu li {
font-size: 1em;
display: block;
width: 100%;
}
.main-menu a {
display: block;
border-bottom: 1px solid #012054;
color: #012054;
padding: .5em;
text-decoration: none;
}
.main-menu a:hover {
text-decoration: underline;
}
.toggle-button {
text-align: center;
display: block;
cursor: pointer;
background-color: #012054;
color: #fff;
}
#menu-mobile:checked + nav .toggle-button{
color: #FFF7B2;
}
#menu-mobile:checked + nav .main-menu {
display: block;
}
@media screen and (min-width: 640px) {
.toggle-button {
display: none;
}
.main-menu {
display: block;
margin: 0 auto;
background-color: #012054;
height: 30px;
}
.main-menu li {
width: calc(100% / 4);
text-align: center;
display: inline-block;
margin-right: -4px;
}
.main-menu a {
display: inline-block;
margin-right: -4px;
font-size: .8em;
background-color: #012054;
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>

Можете проверить  только что созданное адаптивное меню для своего сайта. Как проще всего проверить? Можно прямо в браузере. Настройки — масштаб и увеличьте до 300-400 %. Именно так и будет выглядеть ваша веб-страничка на мобильном устройстве.

Всем удачи!


Рубрики: Ликбез Тэги: |
Понравилась статья? Поделись!
        

Всего комментариев: 0

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

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