Адаптивное меню на чистом 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