Октябрь 29, 2019 Запись была обновлена
Адаптивная навигация для меню
Всем привет!
Сегодня хочу поделиться интересным решением для основного меню.Такой подход может стать альтернативой стандартному выпадающему меню.Кроме того оно уже адаптивно.
Смотреть примерСкачать
Похожие статьи на эту тему:
- Красивый выпадающий список для сайта — делаем выпадающий список
- Пользовательские стили для формы на чистом CSS без Javascript
Добавляем HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <header> <nav class="cd-main-nav-wrapper"> <ul class="cd-main-nav"> <li><a href="#0">О нас</a></li> <li><a href="#0">Проекты</a></li> <li><a href="#0">Блог</a></li> <li><a href="#0">Контакты</a></li> <li> <a href="#0" class="cd-subnav-trigger"><span>Категории</span></a> <ul> <li class="go-back"><a href="#0">Меню</a></li> <li><a href="#0">Категория 1</a></li> <li><a href="#0">Категория 2</a></li> <li><a href="#0">Категория 3</a></li> <li><a href="#0">Категория 4</a></li> <li><a href="#0">Категория 5</a></li> <li><a href="#0" class="placeholder">Placeholder</a></li> </ul> </li> </ul> <!-- .cd-main-nav --> </nav> <!-- .cd-main-nav-wrapper --> <a href="#0" class="cd-nav-trigger">Menu<span></span></a> </header> |
Вся навигации состоит из двух неупорядоченных списков. Названия разделов и категорий меню вы, соответственно, меняете на свои.
1 | <a href="#0" class="cd-nav-trigger">Menu<span></span></a> |
Последняя строка отвечает за навигацию при маленьком разрешении экрана.
Добавляем CSS
Архив с примером содержит файл style.css. В нем в разделе «Стили для меню» находятся все стили оформления меню в том числе и медиазапросы. Вы можете скачать весь файл, или добавить стили только для самого меню. Если вы, скачали в свой проект весь style.css, то не забудьте подключить его в свой html файл между тегами <head>.
1 | <link rel="stylesheet" href="css/style.css"> |
Добавляем JQuery
Из архива копируем папку js. И подключаем скрипты в наш html документ.
1 2 3 | <script src="js/modernizr.js"></script> <script src="js/jquery-2.1.1.js"></script> <script src="js/main.js"></script> |
Если в вашем проекте уже есть modernizr.js и jquery-2.1.1.js, то второй раз подключать их не нужно. Меню готово!
Также такой вариант навигации можно использовать для поиска по сайту, формы входа или для ссылок на соц.сети.
Всем удачи!
Источник: Оригинал
С Уважением, Михалев Валентин
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Благодарю за такое меню) хорошая штука) не сразу, но установил)
А в каком месте поменять, что бы та менюшка с лева выезжала?
Спасибо хорошее меню как раз вот подумываю поставить адаптивную навигацию, скажите а можно расположить по центру?
Здравствуйте, Сергей!
Да, можно сделать по центру. Для этого в файле style.css в 320-й строке измените свойство text-align на "center".
Здравствуйте. На wordpress кто-нибудь пробовал устанавливать данное меню? У меня не работает адаптивная версия, хотя все подключил по инструкции
Здравствуйте!
Подскажите, как добавить логотип в данное меню симметрично самому меню слева?
Добрый день, Александр!
Есть несколько вариантов. Вот 2 варианта из тех, что сразу пришли на ум:
1. Разместить блочный элемент, а затем у него сделать обтекание (про обтекание можно почитать здесь, а здесь пример каркаса на основе обтекания).
2. Разместить блочный элемент и сделать его в абсолютном позиционировании (здесь можно почитать о нем).
Пробовал установить на instantcms шаблон
не выпадает меню =( Жаль… задумка хорошая
поясню немного — хотел сделать не одну закладку "категории" а несколько … не получилось
Лучше расскажите как сделать меню, что на этом сайте. Оно намного лучше!
Задумка конечно хорошая, НО! у неё огромный косяк в том, что она привязана к header и не регулируема ни по вертикали, ни по выбору стороны выпадания. Слишком замудрёное меню, не думаю что поисковикам понравится неуниверсальный и в то же время нагромождённый код.
Здравствуйте, Александр!
У вас есть все исходники, чтобы сделать меню регулируемым по вертикали, а также сделать универсальный код для поисковиков 😉 .
Ну да конечно, еслиб я это умел, что бы я тогда тут делал на вашем сайте? Думаю в инете найдётся ваш аналог с кодом попроще. ))
Здравствуйте, хорошее меню, мне понравилось, особенно мобильный вид!)
Но единственное подскажите, как мне добавить еще один пункт меню с выпадающем меню?
я несколько раз попробовала у меня не получилось(
помогите пожалуйста)
Безполезно Настюша, там для этого нужно будет всё css перелопачивать, не универсальное это меню, я в итоге от него отказался как от криворуко настроенного кода и вам советую, разрабы сделали эту замануху чтоб бабусек подбить.
Тут еще баг вылазит при разрешении 1024px появляется строка прокрутки в меню .. и если ее вручную прокрутить в категории, то ссылка обратно не работает
Сколько будет стоить заказать второе такое меню, только вертикальное. Что бы было два меню, горизонтальное и вертикальное?
Спасибо огромное. Использую в двух проектах. Удачи автору!
онромное спасибо то что искал
Здравствуйте! Помогите, пожалуйста, адаптирую меню на сайте: https://metalik-msk.ru/. Как складывать меню в «бутерброд»?
Михаил, а с чем у вас проблема? Сейчас у вас там ничего не происходит и меню выглядит как обычный список. У вас сложности с внедрением меню, которое в статье?
Я ни как не могу прикрутить, крутил крутил.