Адаптивное меню для 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.
адаптивное меню на css3

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

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

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

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Комментарии: 25

  1. Олег

    Привет, столкнулся с таким делом, есть лендинг, форма отправки заявки.
    Моя форма не работала нормально через смартфон, попробовал твой вариант, настроил, и блин та же история, через смартфон не нажимается кнопка отправить заявку — что может быть?

    • dimadv7

      Привет. IOS, safari? Какой вариант используешь, в смысле, по какой статье?

  2. Олег

    В общем вот: __http://credit.bono-group.com
    нашел причину проблемы:
    Используется: display: inline-block;
    Он почему-то не дает на Андроиде, нормально работать форме обратной связи.
    так же смотрел Оперу, при увеличении на 200%, так же форма не работает.
    теперь думаю как исправить, собственно косяк мой 🙂

  3. Лаена

    Спасибо огромное за урок! Просто супер! Поставила на сайт клиенту, но есть одна проблема, клиент хочет, чтобы над кнопкой или рядом была надпись»меню». Можно ли как-то это сделать? Огромное спасибо!

    • dimadv7

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

  4. Лаена

    Спасибо))))

  5. Вика

    Скажите, а насколько нормальная практика, чтобы на лендинге, допустим, на расширении 320 было меню для перехода на экраны? То есть я понимаю, меню для перехода на разные страницы многостраничного сайта, но переход на экраны — как-то не сталкивалась. Сейчас стоит задача сделать лендинг адаптивным и сижу смотрю на фиксированное меню для перехода на экраны и думаю делать его бургером или нет…

    • dimadv7

      Да часто применяют, другое дело нужно ли это на вашем сайте. Попробуйте сделать и провести тесты. Если буду кликать и разворачивать меню, то нужно оставить — нет, значит убрать. Тут не совет нужен, а тест)) Да так во всем в принципе)

  6. Александр

    Здравствуйте! Делаю все по инструкции, но меню не появляется?

  7. Антон

    Спасибо за урок! Случайно невзначай научили меня искать простые ошибки в коде…
    В стилях есть itemsMenu а в html есть, добавил div с таким классом и пропущенный тег списка добавил и всё заработало )))

    • dimadv7

      Ага, спасибо. Поправил. В исходнике все нормально было.

  8. Дмитрий

    Есть вопрос, а как сделать чтобы меню в лендинге было адаптивным а при просмотре на компе прокручивалось бы вместе с сайтом.

    • dimadv7

      Использовать pоsition:fixed;

  9. Дмитрий

    Спасибо, а где это прописать надо в html или в стилях?

    • dimadv7

      В стилях, для #menu

  10. Дмитрий

    Я сделпл но меню не фиксируется, все правильно: #menu {
    pоsition: fixed;
    background: #2ba9c0;
    width: 100%;
    padding: 10px 0;
    text-align: center;

    • dimadv7

      Ошибся, для topMenu конечно, ну и ширину там подправьте.

  11. Дмитрий

    А где у нас в стилях топ меню, там нет такого, где прописать то это нужно и где поправить ширину, ничего не понятно

  12. Дмитрий

    topMenu в стилях нет данного значения, если можно поподробнее объясните пожалуйста, а то вы два слова кидаете а куда и что непонятно!

    • dimadv7

      Потому что блог не о верстке. Поэтому не хотел бы обсуждать это здесь.
      Нет .topMenu, ну так добавьте.

      .topMenu{position:fixed; width: 100%;}
  13. Дмитрий

    Я понимаю, просто спросил у вас как у знатока, спасибо большое!, сделал но теперь оно от верхнего края отстает на расстояние верхней шапки))) как сделать чтобы оно к верхнему краю было прикреплено при прокрутке

    • dimadv7

      Добавить: top: 0;

    • dimadv7

      но тогда оно будет все время там. А как сделать, чтобы при прокрутке перемещалось? писать обработчик события scroll на js. Чтобы ловить на опеределенном расстоянии меню и давать ему top: 0, а при прокрутке назад — возвращать. Тут уже в 2 словах не опишешь. Нужно изучать основы javascript

  14. Дмитрий

    К сожалению не то! У меня над этим меню еще шапка из логотипа и телефоны там, а оно прекрепилось к верху и все загородило, должно быть другое решение

  15. Дмитрий

    И на том спасибо!

Добавить комментарий