Адаптивное меню для landing page

Привет друзья, коллеги! Как ваши дела? Надеюсь у всех все здорово :) Сегодня будем делать простое адаптивное меню для наших landing page. Все чаще спрашивают об этом, а я подобные вопросы записываю в Evernote и стараюсь в свободное время писать на эти темы статьи.

Спасибо вам, что подкидываете таким образом новые идеи и помогаете развивать блог. Кстати, на какую тему хотели бы почитать следующую статью? Напишите в комментариях пожалуйста, для меня это очень важно. А теперь, давайте начнем...

Как сделать адаптивное меню для сайта

Google подтвердил, что с середины апреля одним из факторов ранжирования станет адаптивность сайта под мобильные устройства. В связи с этим все материалы о том, как сделать ваш landing page адаптивным - как никогда актуальны. Я не буду сегодня городить что-то сложное, а наоборот, расскажу, как сделать очень простое адаптивное меню с минимумом затрат времени.

В основном это будет html + css, но понадобится совсем маленький скрипт, для обработки клика. Итак...

Адаптивное горизонтальное меню

Начнем с html. Прежде всего подключим библиотеку jquery. Наверняка, вы давно ей пользуетесь, поэтому убедитесь, что не подключаете ее второй раз:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Теперь разметка. Обычный ненумерованный список, и небольшой div, который содержит иконку меню. Она будет видна только на маленьких разрешениях.

<nav class="topMenu">
  <div class="iconMenu"><img src="img/iconmenu.png" alt="Иконка меню" /></div>
   <div class="itemsMenu">
     <li><a href="#"><img src="img/pdf.png" alt="Скачать прайс"/>Скачать прайс</a></li>
     <li><a href="#"><img src="img/contact.png" alt="Контакты"/>Контакты</a></li>
     <li><a href="#"><img src="img/otzivy.png" alt="Отзывы"/>Отзывы</a></li>
   </div>
</nav>

Я добавил ссылкам иконки, чтобы смотрелось симпатичнее. В варианте для больших дисплеев будет выглядеть так:

Как видите - ничего сложного, думаю, по мере необходимости вы сами сможете усовершенствовать его.
Теперь давайте добавим стили:

#menu {
  background: #2ba9c0;
  width: 100%;
  padding: 10px 0;
  text-align: center;
}

#menu a {
  color: #fff;
  text-decoration: none;
  padding: 12px 12px;
}

#menu a:hover {
  border-bottom: 4px solid #fff;
  background: #078ecb;
}

.itemsMenu li {
  display:inline;
  padding-right: 35px;
  width:100%;
  margin: 0 auto;
}
  .itemsMenu li img{
  vertical-align: middle;
  margin-right: 10px;
 }

.iconMenu {
  color: #fff;
  cursor: pointer;
  display: none;
}
.showitems {
  display:block !important;
}

@media screen and (max-width: 600px) {
  #menu a{
    padding-bottom: 13px;
  }
  #menu a:hover {
   border-bottom: none;
  }
 .iconMenu {
   display:block;
  }
  .itemsMenu {
   display:none;
  }
  .itemsMenu li {
   display:block;
   padding:10px 0;
  }
}

Теперь, при уменьшении окна браузера вы увидите следующую картину:

Мне бы очень не хотелось описывать каждую строчку, ведь блог не о верстке как таковой. Давайте я просто попытаюсь объяснить.

Сначала элементам li задаем свойство display:inline, чтобы сделать их расположение горизонтально друг за дружкой. Можно было бы использовать float:left, но решил таким образом сделать. И скрываем иконку меню свойством display:none. Когда разрешение экрана меньше 600 пикселей, убираем inline, у элементов li, и скрываем их, а показываем иконку. В двух словах - так.

Теперь нам нужен простенький скрипт, который бы обрабатывал клик по иконке меню и показывал бы его элементы:

$(function() {
 $('.iconMenu').click(function() {
  if($('.itemsMenu').is(':visible')) {
  $('.itemsMenu').removeClass('showitems');
 }
 else {
  $('.itemsMenu').addClass('showitems');
 }
});
});

Вот так. Я его вынес в отдельный файл и подключил перед закрывающимся тегом body.

Вот и все. Таким образом можно быстро сверстать простое адаптивное меню для landing page.

Конечно, есть недостатки. Отступы заданы в пикселях, но можно задать все расстояния и в процентном соотношении. Просто в этом не было необходимости. Если бы это был полноценный сайт, то и иконки бы я использовал в svg или шрифтовые, а не png и отступы бы пересчитал в процентах. А так, это был небольшой экспромт :) Надеюсь все понятно? Пока.

Скачать исходник