Привет друзья, коллеги! Как ваши дела? Надеюсь у всех все здорово :) Сегодня будем делать простое адаптивное меню для наших 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 и отступы бы пересчитал в процентах. А так, это был небольшой экспромт :) Надеюсь все понятно? Пока.
34 комментария
Привет, столкнулся с таким делом, есть лендинг, форма отправки заявки.
Моя форма не работала нормально через смартфон, попробовал твой вариант, настроил, и блин та же история, через смартфон не нажимается кнопка отправить заявку - что может быть?
Привет. IOS, safari? Какой вариант используешь, в смысле, по какой статье?
В общем вот: __http://credit.bono-group.com
нашел причину проблемы:
Используется: display: inline-block;
Он почему-то не дает на Андроиде, нормально работать форме обратной связи.
так же смотрел Оперу, при увеличении на 200%, так же форма не работает.
теперь думаю как исправить, собственно косяк мой :)
Спасибо огромное за урок! Просто супер! Поставила на сайт клиенту, но есть одна проблема, клиент хочет, чтобы над кнопкой или рядом была надпись"меню". Можно ли как-то это сделать? Огромное спасибо!
Конечно можно. Рядом с картинкой отвечающей за меню, можно писать любой текст. А как его расположить, уже при помощи стилей указываете сами. Сверху, снизу, или рядом.
Спасибо))))
Скажите, а насколько нормальная практика, чтобы на лендинге, допустим, на расширении 320 было меню для перехода на экраны? То есть я понимаю, меню для перехода на разные страницы многостраничного сайта, но переход на экраны - как-то не сталкивалась. Сейчас стоит задача сделать лендинг адаптивным и сижу смотрю на фиксированное меню для перехода на экраны и думаю делать его бургером или нет...
Да часто применяют, другое дело нужно ли это на вашем сайте. Попробуйте сделать и провести тесты. Если буду кликать и разворачивать меню, то нужно оставить - нет, значит убрать. Тут не совет нужен, а тест)) Да так во всем в принципе)
Здравствуйте! Делаю все по инструкции, но меню не появляется?
Спасибо за урок! Случайно невзначай научили меня искать простые ошибки в коде...
В стилях есть itemsMenu а в html есть, добавил div с таким классом и пропущенный тег списка добавил и всё заработало )))
Ага, спасибо. Поправил. В исходнике все нормально было.
Есть вопрос, а как сделать чтобы меню в лендинге было адаптивным а при просмотре на компе прокручивалось бы вместе с сайтом.
Использовать pоsition:fixed;
Спасибо, а где это прописать надо в html или в стилях?
В стилях, для #menu
Я сделпл но меню не фиксируется, все правильно: #menu {
pоsition: fixed;
background: #2ba9c0;
width: 100%;
padding: 10px 0;
text-align: center;
Ошибся, для topMenu конечно, ну и ширину там подправьте.
А где у нас в стилях топ меню, там нет такого, где прописать то это нужно и где поправить ширину, ничего не понятно
topMenu в стилях нет данного значения, если можно поподробнее объясните пожалуйста, а то вы два слова кидаете а куда и что непонятно!
Потому что блог не о верстке. Поэтому не хотел бы обсуждать это здесь.
Нет .topMenu, ну так добавьте.
Я понимаю, просто спросил у вас как у знатока, спасибо большое!, сделал но теперь оно от верхнего края отстает на расстояние верхней шапки))) как сделать чтобы оно к верхнему краю было прикреплено при прокрутке
Добавить: top: 0;
но тогда оно будет все время там. А как сделать, чтобы при прокрутке перемещалось? писать обработчик события scroll на js. Чтобы ловить на опеределенном расстоянии меню и давать ему top: 0, а при прокрутке назад - возвращать. Тут уже в 2 словах не опишешь. Нужно изучать основы javascript
К сожалению не то! У меня над этим меню еще шапка из логотипа и телефоны там, а оно прекрепилось к верху и все загородило, должно быть другое решение
И на том спасибо!
Или мне кажется или в коде на сайте ошибка т.к. в html указан класс class="topMenu", а в css уже все свойства к id применяются?
Дмитрий, скажите, пожалуйста, каким образом реализовать, чтобы при переходе на нужный якорь меню автоматически закрывалось? Спасибо!
Татьяна, думаю, удалять класс активного меню.
Не работает(
Артем, что не работает?
dimadv7, меню чёт не сработало, нашёл другой вариант
Дмитрий, присоеденюсь к вопросу Татьяны - Дмитрий, скажите, пожалуйста, каким образом реализовать, чтобы при переходе на нужный якорь меню автоматически закрывалось? Как удалять класс активного меню, не силен в js? Заранее спасибо
Сергей, можно так, но в таком случае придется вручную обрабатывать и стандартное поведение ссылки (переход на страницу или спуск к нужному элементу)
Дмитрий, спасибо!