Адаптивное меню на чистом 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 адаптивное меню для сайта, кликаете в любом месте страницы правой кнопкой мыши, и в контекстом меню выбираете «Сохранить как».
А вас интересует как сделать фиксированное меню или липкое меню?
Читайте так-же как просто сделать калькулятор с ползунком на сайте на примере калькулятора натяжных потолков
Всем удачи!
Благодарю автора за рабочее решение!
Решил обновить свой сайт, искал варианты мобильного меню, остановился на этом.
Установилось идеально, осталось только дополнить функциями current и dropdown.
С уважением,