Адаптивное меню для 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 и отступы бы пересчитал в процентах. А так, это был небольшой экспромт :) Надеюсь все понятно? Пока.

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

34 комментария

  1. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  2. Дмитрий Давыдов

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

  3. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  4. Дмитрий Давыдов

    Спасибо))))

  5. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  6. Дмитрий Давыдов

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

  7. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  8. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  9. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  10. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

  11. Дмитрий Давыдов

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

  12. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

      .topMenu{position:fixed; width: 100%;}
  13. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

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

    2. Дмитрий Давыдов

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

  14. Дмитрий Давыдов

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

  15. Дмитрий Давыдов

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

  16. Дмитрий Давыдов

    Или мне кажется или в коде на сайте ошибка т.к. в html указан класс class="topMenu", а в css уже все свойства к id применяются?

  17. Дмитрий Давыдов

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

    1. Дмитрий Давыдов

      Татьяна, думаю, удалять класс активного меню.

  18. Дмитрий Давыдов

    Не работает(

    1. Дмитрий Давыдов

      Артем, что не работает?

  19. Дмитрий Давыдов

    dimadv7, меню чёт не сработало, нашёл другой вариант

  20. Дмитрий Давыдов

    Дмитрий, присоеденюсь к вопросу Татьяны - Дмитрий, скажите, пожалуйста, каким образом реализовать, чтобы при переходе на нужный якорь меню автоматически закрывалось? Как удалять класс активного меню, не силен в js? Заранее спасибо

    1. Дмитрий Давыдов

      Сергей, можно так, но в таком случае придется вручную обрабатывать и стандартное поведение ссылки (переход на страницу или спуск к нужному элементу)

      $('.itemsMenu a').click(function (e) {
          e.preventDefault();
          console.log('klick')
          $('.itemsMenu').removeClass('showitems');
        });
      
  21. Дмитрий Давыдов

    Дмитрий, спасибо!

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

 

© 2014 — 2020, Smartlanding.biz. Все права защищены. Любое использование материалов допускается только с указанием активной ссылки на источник. Политика конфиденциальности