В данном уроке я расскажу о том как на чистом CSS (без использования JS) сверстать горизонтальное адаптивное (складывающегося) — которое можно установить на любой сайт. Это сейчас очень актуально — так как пришла эра быстрых сайтов, скоро походу фрейверки типа бутстрапа будут не в моде — для тех кто хочет хороших позиций в гугле.
Посмотреть demo
HTML разметка меню
<header>
<div class="container">
<a href="#" id="logo" target="_blank">web-revenue.ru</a>
<label for="toggle-1" class="toggle-menu"><i class="toggle-icon"></i></label>
<input type="checkbox" id="toggle-1">
<nav>
<ul>
<li><a href="#logo">Главная</a></li>
<li><a href="#about">О компании</a></li>
<li><a href="#portfolio">Портфолио</a></li>
<li><a href="#services">Услуги</a></li>
<li><a href="#gallery">Галерея</a></li>
<li><a href="#contact">Контакты</a></li>
</ul>
</nav>
</div>
</header>
Здесь все при дельно просто — за основу взять стандартные HTML элементы
CSS оформление меню
Сначала зададим стили основным элементам
body{margin:0;overflow-x:hidden}
header{width:100%;display:table;background-color:#002e5b;margin-bottom:50px}
.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
.toggle-icon{background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");width:30px;
height:30px;position:absolute;}
@media (min-width: 1200px) {
.container{max-width:1140px}
}
#logo{float:left;font-size:25px;text-transform:uppercase;color:#fffab2;font-weight:600;text-decoration:none;padding:11px 0}
nav{width:auto;float:right;margin-top:7px}
nav ul{display:table;float:right;margin:0;padding:0}
nav ul li{float:left;list-style-type:none}
nav ul li:last-child{padding-right:0}
nav ul li a{color:#e4f2ff;font-size:19px;padding:7px 19px;display:inline-block;text-decoration:none}
nav ul li a:hover{background-color:#143a06;color:#fff9c8;text-decoration:underline}
input[type=checkbox],label{display:none}
И добавляем адаптивность.
@media only screen and (max-width: 980px) {
header{padding:20px 0}
#logo{padding:0}
input[type=checkbox]{position:absolute;top:-9999px;left:-9999px;background:none}
input[type=checkbox]:fous{background:none}
label{float:right;display:inline-block;cursor:pointer;margin-right:65px}
input[type=checkbox]:checked ~ nav{display:block}
nav{display:none;position:absolute;right:0;top:50px;background-color:#002e5b;padding:0;z-index:99}
nav ul{width:auto}
nav ul li{float:none;padding:0;width:100%;display:table}
nav ul li a{color:#FFF;font-size:15px;padding:10px 20px;display:block;border-bottom:1px solid rgba(225,225,225,0.1)}
}
@media only screen and (max-width: 360px) {
label{padding:5px 0}
#logo{font-size:20px}
nav{top:47px}
}
Скачать исходник
В принципе все, вам нужно только подправить мелкие нюансы под себя и все — легкое адаптивное меню без js готово.
Все классно, но не предусмотрены подпункты.
Для этого лучше использовать JS
Добрый день! Подскажите пожалуйста, как сместить лейбл влево почти до конца и соответственно меню вправо также почти до конца?
Если правильно понял вопрос, то ширина контейнера задается классом
.container
который ограничивает ширину в1140px
, нужно больше поправьте CSS:@media (min-width: 1200px) {
.container{max-width:1140px}
}
Отличное меню
Но никак не вяжется с валидатором html
может возможно label заменить чем-то?
Здравствуйте. Поменял вывод кнопки бургера и css немного изменил, теперь html валиден http://prntscr.com/10g4je8 (при условии, что css выносите в отдельный файл). Статья обновлена, смотрите.