Интересное адаптивное меню для сайта
Приветствую Вас друзья! С Вами Владимир Савельев с продолжением интересной темы — адаптивная верстка. Из этой статьи Вы узнаете, как сделать адаптивное меню для сайта (мобильное меню).
Кстати, я уже писал о том как сделать выпадающее меню на WordPress. Так вот, теперь мы усложняем себе задачу и делаем его адаптивным, то есть наша менюшка будет отлично смотреться и на смартфоне и на планшете.
Когда я только начал получать знания в сфере адаптивной верстки и применять их на практике, то я очень долго искал красивое и простое адаптивное меню для сайта. Просмотрел множество вариантов на различных ресурсах и все-таки нашел интересное решение, теперь делюсь находкой с Вами.
В принципе данное меню подойдет к любому сайту (на любой CMS), главное чтобы на нем была реализована адаптивная верстка!
Я же в этой статье, покажу как установить мобильное меню на блог, под управлением WordPress. Хотя принцип будет одинаков для всех. Вот так выглядит адаптивное меню, которое мы с Вами будем устанавливать на сайт!
Чтобы посмотреть на мобильное меню в действии зайдите на мой блог со своего смартфона например или сожмите окно браузера!
Но перед тем как начать практическую часть статьи, хочу объяснить, почему я выбрал именно это меню, а не другие варианты.
- Вам не потребуется менять основную версию сайта — при разработке адаптивного дизайна, нужно скрыть основное меню (display:none;) и показать мобильное (display:block;);
- Удобство навигации с мобильных устройств — выпадающее меню удачно вписывается в дизайн сайта и занимает меньше пространства;
- Валидный код - не содержит ошибок в коде и проходит проверку на ура;
- Возможности css - с помощью стилей мы можем легко настроить внешний вид;
- Мне оно очень понравилось ;)
Если я Вас убедил и Вы тоже решили использовать это меню, то сейчас я попробую показать, как просто его установить на сайт или блог.
Я кстати доработал чуток меню - добавил форму поиска и сделал раскрывающиеся рубрики! Поиск будет очень кстати если сайт объемный. Посетитель сразу им воспользуется и найдет нужную информацию! Так же форма поиска в самом меню экономит пространство. По многочисленным просьбам, сделал чтобы и рубрики сворачивались и разворачивались!
Установка адаптивного меню на WordPress
Наверное стоит предупредить, что если не уверены в своих знаниях web-разработчика, то лучше поручить эту работу тому, кто в этом разбирается! Для удобства я запаковал инструкцию в архив, в нем Вы найдете саму инструкцию, картинки и исходные коды.
Установка меню делиться на 7 простых шагов:
[sociallocker]
- Cкачайте архив с инструкцией и исходниками;
- Подключаем библиотеку jquery (если ее нет) в шапку сайта ;
- Прописываем маленький код в файл functions.php, который добавит новое меню в Вашу тему;
- Создайте новое меню в Вашей теме (перейдите в раздел - внешний вид - меню);
- Пропишите непосредственно само меню в шапке сайта header.php;
- Установите в подвал сайта footer.php функциональный скрипт;
- И пропишите собственно стили, по умолчанию style.css.
[/sociallocker]
Если Вы все правильно сделали, то адаптивное меню для сайта уже находится и у Вас, поздравляю с этим событием! Трудно было?! Я думаю нет...
Надеюсь Вы оцените мои труды и поделитесь ссылкой на эту статью в любой социальной сети! Сделать это можно кнопками в конце статьи! Возможно кому то эта информация будет весьма кстати!
Для тех, у кого ничего не получается посмотрите видео инструкцию
P.s: Если Вы до сих пор пренебрегаете мобильным трафиком и понимаете что это большая ошибка, а решить эту проблему Вам не хватает знаний или желания, то я Вам могу помочь. Пока есть свободное время, я могу сделать Ваш ресурс адаптивным, за скромную цену. Совсем скоро начну создание авторского курса и времени уже на это не будет.
Пишите мне через контакты, все обсудим. Часть моего портфолио:
Кстати завершил все таки работу над бесплатной книгой "справочник Версталя", скоро вышлю ее своим подписчикам! Подпишись на обновления блога, будешь в числе первых!
МММ... Хотите научиться качественно верстать сайты и быть востребованным верстальщиком? Ко мне на почту ежедневно приходят заявки - сверстать то, сверстать сё, помогите тут и там =)
Профессия "версталя" - это постоянный доход в интернете, так как Вас будут ценить и обращаться к Вам снова и снова! За одну лишь услугу адаптивной верстки сайта я получаю 5000 рублей и более... Вы тоже так сможете, я уверен!
Мне очень понравились уроки Евгения Попова - курс по CSS (45 видеоуроков), курс по HTML (33 видеоурока) и CSS практика (36 видеоуроков)! Все уроки в видео формате, по этому их легко освоить! Это то, что Вам нужно!
В будущем я сам планирую обучать этому ремеслу, но на данный момент у меня совершенно нет времени на это! По этому, для нетерпеливых, я решил найти достойные альтернативы! А кто хочет обучаться именно у меня, подпишитесь на обновления - я сообщу когда будет набор!
До скорой встречи в новой статье!