Адаптивное меню на чистом CSS

Адаптивное меню на чистом CSS Верстка

В данном уроке я расскажу о том как на чистом 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 готово.

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( 9 оценок, среднее 2.44 из 5 )
Web-Revenue.ru
Добавить комментарий

  1. Владислав

    Все классно, но не предусмотрены подпункты.

    Ответить
    1. Алексей автор

      Для этого лучше использовать JS

      Ответить
  2. Юрий

    Добрый день! Подскажите пожалуйста, как сместить лейбл влево почти до конца и соответственно меню вправо также почти до конца?

    Ответить
    1. Алексей автор

      Если правильно понял вопрос, то ширина контейнера задается классом .container который ограничивает ширину в 1140px, нужно больше поправьте CSS: @media (min-width: 1200px) {
      .container{max-width:1140px}
      }

      Ответить
  3. Сергей

    Отличное меню
    Но никак не вяжется с валидатором html
    может возможно label заменить чем-то?

    Ответить
    1. Алексей автор

      Здравствуйте. Поменял вывод кнопки бургера и css немного изменил, теперь html валиден http://prntscr.com/10g4je8 (при условии, что css выносите в отдельный файл). Статья обновлена, смотрите.

      Ответить