Лого www.SiteHere.ru

Адаптивная навигация для меню

Всем привет!

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

Смотреть примерСкачать

Похожие статьи на эту тему:

Добавляем HTML

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>

Вся навигации состоит из двух неупорядоченных списков. Названия разделов и категорий меню вы, соответственно, меняете на свои.

HTML КОД
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, то второй раз подключать их не нужно. Меню готово!

Также такой вариант навигации можно использовать для поиска по сайту, формы входа или для ссылок на соц.сети.

Всем удачи!

Источник: Оригинал

С Уважением, Михалев Валентин

Адаптивная навигация для меню 5.00/5 (100.00%) 6 голос(ов)

Понравилась статья - расскажи друзьям! :)

18 комментариев к записи
  • Алексей

    Благодарю за такое меню) хорошая штука) не сразу, но установил)

     
  • Kalwin

    А в каком месте поменять, что бы та менюшка с лева выезжала?

     
    • Артём Есеноманов

      Kalwin, к сожалению мы не можем помочь Вам с данным вопросом…
      Потому, что мы не помогаем отвечать на те вопросы,
      за которые берем деньги :). http://individual.sitehere.ru/skype-consulting/

      Вы требуете слишком большого изменения исходного кода лично под Вас…

      С уважением, Артём Есеноманов.

       
  • Сергей

    Спасибо хорошее меню как раз вот подумываю поставить адаптивную навигацию, скажите а можно расположить по центру? 

     
    • Юрий

      Здравствуйте, Сергей!

      Да, можно сделать по центру. Для этого в файле style.css в 320-й строке измените свойство text-align на "center".

       
  • Dmitry

    Здравствуйте. На wordpress кто-нибудь пробовал устанавливать данное меню? У меня не работает адаптивная версия, хотя все подключил по инструкции

     
  • Александр

    Здравствуйте!

    Подскажите, как добавить логотип в данное меню симметрично самому меню слева?

     
  • 12345

    Пробовал установить на instantcms шаблон

    не выпадает меню =( Жаль… задумка хорошая 

     
  • 12345

    поясню немного — хотел сделать не одну закладку "категории" а несколько … не получилось 

     
  • Андрей Александрович

    Лучше расскажите как сделать меню, что на этом сайте. Оно намного лучше!

     
  • Александр

    Задумка конечно хорошая,  НО! у неё огромный косяк в том, что она привязана к header и не регулируема ни по вертикали, ни по выбору стороны выпадания. Слишком замудрёное меню, не думаю что поисковикам понравится неуниверсальный и в то же время нагромождённый код.

     
    • Юрий Немец

      Здравствуйте, Александр!

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

       
      • Александр

        Ну да конечно, еслиб я это умел, что бы я тогда тут делал на вашем сайте? Думаю в инете найдётся ваш аналог с кодом попроще. ))

         
  • Анастасия

    Здравствуйте, хорошее меню, мне понравилось, особенно мобильный вид!) 
    Но единственное подскажите, как мне добавить еще один пункт меню с выпадающем меню? 

    я несколько раз попробовала у меня не получилось(

    помогите пожалуйста)
     

     
    • Александр

      Безполезно Настюша, там для этого нужно будет всё css перелопачивать, не универсальное это меню, я в итоге от него отказался как от криворуко настроенного кода и вам советую, разрабы сделали эту замануху чтоб бабусек подбить.

       
  • ывавы

    Тут еще баг вылазит при разрешении 1024px появляется строка прокрутки в меню .. и если ее вручную прокрутить в категории, то ссылка обратно не работает  

     
  • Женя

    Сколько будет стоить заказать второе такое меню, только вертикальное. Что бы было два меню, горизонтальное и вертикальное?

     

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *