Большой обзор красивых многоуровневых меню с codepen



    Хабр, привет!

    На Сodepen появляется много хороших решений от разных специалистов, и я считаю, что лучшие из них нужно собирать в одном месте. Поэтому 2 года назад начал сохранять у себя на компьютере интересные скрипты по разным тематикам.

    Раньше я их выкладывал в группе продукта облачной IDE mr. Gefest, это были сборки из 5-8 решений. Но теперь у меня стало скапливаться по 15-30 скриптов в разных тематиках (кнопки, меню, подсказки и так далее).

    Такие большие наборы следует показывать большему числу специалистов. Поэтому выкладываю их на Хабр. Надеюсь они будут Вам полезны.

    В этом обзоре мы рассмотрим многоуровневые меню.

    Flat Horizontal Navigation



    Красивая навигационная панель с плавно появляющимся подменю. Код хорошо структурирован, используется js. Судя по использованным возможностям, работает в ie8+.
    http://codepen.io/andytran/pen/kmAEy

    Material Nav Header w/ Aligned Dropdowns



    Адаптивная панель ссылок с двухколонным подменю. Все сделано на css и html. Применены css3 селекторы, которые не поддерживаются в ie8.
    http://codepen.io/colewaldrip/pen/KpRwgQ
     
    Smooth Accordion Dropdown Menu



    Стильное вертикальное меню с плавно раскрывающимися элементами. Используется transition, transform js-код.
    http://codepen.io/fainder/pen/AydHJ
     
    Pure CSS Dark Inline Navigation Menu



    Темная вертикальная навигационная панель с иконками из ionicons. Применяется javascript. В ie8 скорее всего будет работать без анимации.
    http://codepen.io/3lv3n_snip3r/pen/XbddOO
     
    Pure CSS3 Mega Dropdown Menu With Animation





    Стильное меню с двумя форматами вывода: горизонтальным и вертикальным. Используются иконки и css3-анимация. В ie8 точно будет ужасно выглядеть, но зато в других браузерах все круто.
    Ссылка на вертикальную: http://codepen.io/rizky_k_r/full/sqcAn/
    Ссылка на горизонтальную: http://codepen.io/rizky_k_r/pen/xFjqs
     
    CSS3 Dropdown Menu



    Горизонтальное меню с большими элементами и выпадающим списком ссылок. Чистый и минималистичный код без js.
    http://codepen.io/ojbravo/pen/tIacg
     
    Simple Pure CSS Dropdown Menu



    Простое, но стильное горизонтальное меню. Используется font-awesome. Все работает на css и html, без js. В ie8 будет работать.
    http://codepen.io/Responsive/pen/raNrEW
     
    Bootstrap 3 mega-dropdown menu



    Отличное решение для интернет-магазинов. Отображает несколько уровней категорий и большие изображения (например, товар по акции). В его основе лежит boostrap 3.
    http://codepen.io/organizedchaos/full/rwlhd/
     
    Flat Navigation



    Стильная навигационная панель с плавным подменю. В старых браузерах отобразится с проблемами.
    http://codepen.io/andytran/pen/YPvQQN
     
    3D nested navigation



    Горизонтальное меню с очень крутой анимацией без js!
    http://codepen.io/devilishalchemist/pen/wBGVor
     
    Responsive Mega Menu — Navigation



    Горизонтальное адаптивное меню.  Выглядит неплохо, но мобильная версия немного "хромает". Используется css, html и js.
    http://codepen.io/samiralley/pen/xvFdc
     
    Pure Css3 Menu



    Оригинальное меню. С простым и чистым кодом без js. Применяйте для "вау" эффектов.
    http://codepen.io/Sonick/pen/xJagi
     
    Full CSS3 Dropdown Menu



    Красочное выпадающее меню с одним уровнем вложенности. Используются иконки из font-awesome, html и css.
    http://codepen.io/daniesy/pen/pfxFi
     
    Css3 only dropdown menu



    Достаточно неплохое горизонтальное меню с тремя уровнями вложенности. Работает без js.
    http://codepen.io/riogrande/pen/ahBrb
     
    Dropdown Menus



    Минималистичное меню с оригинальным эффектом появления вложенного списка элементов. Радует, что это решение тоже без javascript.
    http://codepen.io/kkrueger/pen/qfoLa
     
    Pure CSS DropDown Menu



    Примитивное, но эффективное решение. Только css и html.
    http://codepen.io/andornagy/pen/xhiJH
     
    Pull Menu — Menu Interaction Concept



    Интересный концепт меню для мобильного телефона. Я такого ещё не видел. Используется html, css и javascript.
    http://codepen.io/fbrz/pen/bNdMwZ
     
    Make Simple Dropdown Menu



    Чистый и простой код, без js. В ie8 точно работать будет.
    http://codepen.io/nyekrip/pen/pJoYgb
     
    Pure CSS dropdown [work for mobile touch screen]



    Решение неплохое, но слишком уж много используется классов. Радует, что нет js.
    http://codepen.io/jonathlee/pen/mJMzgR
     
    Dropdown Menu



    Симпатичное вертикальное меню с минимальным javascript-кодом. JQuery не используется!
    http://codepen.io/MeredithU/pen/GAinq
     
    CSS 3 Dropdown Menu



    Горизонтальное меню с дополнительными подписями может хорошо украсить Ваш сайт. Код простой и понятный. Javascript не применяется.
    http://codepen.io/ibeeback/pen/qdEZjR
     
    KVdKQJ (автор очень долго думал над названием)



    Красивое решение с большим количеством кода (html, css и js). Придумано 3 формата подменю. Для интернет-магазинов решение хорошо подходит.
    http://codepen.io/martinridgway/pen/KVdKQJ
     
    CSS3 Menu Dropdowns (особенное решение)!



    Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
    http://codepen.io/cmcg/pen/ofFiz
     
    П.С.
    Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
    Всем приятной работы.
    Вам интересны такие подборки по разным тематикам? (кнопки, вкладки, подсказки и так далее)

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

    Метки:
    mr. Gefest 31,62
    Создаем облачную IDE мечты для веб-разработчиков.
    Поделиться публикацией
    Реклама помогает поддерживать и развивать наши сервисы

    Подробнее
    Реклама
    Комментарии 33
    • +5
      Избавьте меня от всего этого «креатива»
      • 0
        Не перегибайте палку. В разумных приделах легкий и лаконичный дизайн не будет проблемой.
        • –1
          А что из этого всего — «легкий и лаконичный»?
          • +1
            вот 2 приятных варианта из подборки:
            http://codepen.io/andytran/pen/YPvQQN
            http://codepen.io/3lv3n_snip3r/pen/XbddOO

            Не знаю, почему такие подборки вызывают негатив: максимально понятное название, которое полностью соответствуют действительности. Крайне полезны, когда тупишь на тему нового дизайна — придумывать все всегда с нуля занимает нереальное количество времени. А так потыкал в подборку, подогнал прямо в codepen под свои данные и понял, надо оно тебе или нет.

            Автору большое спасибо!

            • 0
              Ни первое, ни второе не работает на мобильном устройстве, а значит нужно для мобильного пилить своём меню или допиливать текущее. Ну и слишком много анимации даже здесь. Нафига во-втором меню эффект лазерного выстрела?..
              • 0
                Если статья называется «Большой обзор красивых многоуровневых меню с codepen», почему в ней должны быть мобильные версии с минимум анимаций?..
                • 0
                  Потому что вэб становится сильно мобильным и решение нельзя взять «как есть», а если нельзя взять «как есть», то чем оно отличается от просто красивых картинок?
                  • 0
                    Красивые меню с большим количеством анимации обычно применяются на ПК, а под мобильное устройство делают отдельное, упрощенное. Например выезжающая панель, как в нативном приложении с минимум анимации, чтобы не съедать весь процессор телефона. В таком варианте можно не грузить лишний код на мобильном, который применялся на ПК.

                    А вот когда стараются объединить два вида меню в одном месте, получается обычно коряво, это особенно ощущается в интернет-магазинах. Я открываю сайт на телефоне, хочу зайти в список категорий, а тут вываливается огромный список на весь экран и когда я его стараюсь просмотреть, скролится вся страница целиком (или список не поверх контента, а сдвигает информацию сайта на 300-1000 пикселей, превращая все в гигантскую распашонку). Тыкаю пальцем на элемент и у она либо вызывает hover, либо кидает на другую страницу (что я точно не ожидал), либо происходить все сразу вместе, либо ещё что-то непонятное. А все потому что поведение на нажатие по элементам меню на компе и на мобильных устройствах тоже разное. Нужно писать другой код реагирования. Hover уже срабатывает не так. По сути это два разных меню, с разной механикой и разным дизайном.

                    Поэтому то, что применима на ПК, часто не применима на мобильных устройствах.
                    Для телефона и планшета нужно использовать другое решение, которых кстати на Codepen тоже много. Можно объединять подходящие скрипты(для мобильного и для ПК) в один, допиливать под свою задачу и радоваться. Если бы сразу в решениях на Codepen запихали два варианта, то код был бы сложнее, а в некоторых случая и во все мог быть плохо отделен друг от друга и помешал бы объединению нескольких хороший идей в одну.

                    От красивых картинок решения отличаются как минимум тем, что не нужно все реализовывать с нуля. Гораздо быстрее и проще применить уже готовую анимацию, а не тратить на это время, особенно когда все достаточно понятно запрограммировано.

                    Также готовые варианты помогают придумать интересные решения.

                    В работе же это можно показывать дизайнерам и говорит, какие эффекты уже можно реализовать и как они могут выглядеть.
                    • +2
                      Вам собственно о том и говорят — люди берут вот такие вот недоделанные «готовые решения», а потом «или переходит не туда» или «листается не то» и т.п.
                      Соглашусь с вами, что желательно делать разные версии для мобильного и для десктопного браузеров, чтобы не скрывать часть контента, а просто его не выводить, если он не будет использоваться, и не перегружать и так перегруженный мобильный канал.
                      Но практика такая не самая распространенная, и всё равно настоятельно рекомендуется, чтобы «полная» версия была хоть и менее удобной но работоспособной на мобильных устройствах.
                      Опять таки, трансформер с большим разрешением, у которого сняли или отвернули клавиатурный блок, и используют по планшетному, тыкая тачскрином это слать на полную версию или на мобильную? А проблемы с тапом остаются…
                      ПС: в любом случае мне менюхи понравились.
                • 0
                  не туда
                • 0
                  Приятно это слышать, значит не зря приготовил обзор!
          • +3
            Я нуб в веб-дизайне, подобные подборки помогают мне ликвидировать безграмотность.
            • +6
              Большинство таких вложенных свисто-перделочных меню раздражают тем, что они не работают без мыши: чтобы добраться до подменю, нужно тапнуть меню верхнего уровня. А в свою очередь тап воспринимается не как «покажи, что внутри», а как клик с последующим незапланированным переходом хрен знает куда.
              • +1
                К сожалению, это показывает уровень «грамотности» разработчика. Данная «фича» известна уже давно, а до сих пор находятся уникумы которые или вешают пустые якоря на ссылки или не делают event.preventDefault()
              • 0
                Похожее творится и с hover'ом на обычные блоки на странице. Кстати, пользователи redtube и xvideos с вами полностью согласны.
                • +7
                  Не поленился, потестировал эти красивые многоуровневые меню на девайсе без мыши.

                  1. Flat Horizontal Navigation — не работает.
                  2. Material Nav Header w/ Aligned Dropdowns — не работает.
                  3. Smooth Accordion Dropdown Menu — работает.
                  4. Pure CSS Dark Inline Navigation Menu — не работает.
                  5. Pure CSS3 Mega Dropdown Menu With Animation — не работает.
                  6. CSS3 Dropdown Menu — не работает.
                  7. Simple Pure CSS Dropdown Menu — не работает.
                  8. Bootstrap 3 mega-dropdown menu — работает.
                  9. Flat Navigation — не работает.
                  10. 3D nested navigation — не работает.
                  11. Responsive Mega Menu — Navigation — не работает.
                  12. Pure Css3 Menu — не работает.
                  13. Full CSS3 Dropdown Menu — работает.
                  14. Css3 only dropdown menu — не работает.
                  15. Dropdown Menus — не работает.
                  16. Pure CSS DropDown Menu — не работает.
                  17. Pull Menu — Menu Interaction Concept — на планшете не работает. мобильная версия на телефоне работает
                  18. Make Simple Dropdown Menu — не работает.
                  19. Pure CSS dropdown [work for mobile touch screen] — doesn't give a f*ck for tablet touch screen.
                  20. Dropdown Menu — не работает.
                  21. CSS 3 Dropdown Menu — не работает.
                  22. KVdKQJ (автор очень долго думал над названием) — не работает.
                  23. CSS3 Menu Dropdowns (особенное решение)! — не работает.

                  «Не работает» означает, что меню игнорировало тапы, либо тап приводил к переходу, либо с подменю было невозможно взаимодействовать (например, оно появлялось и мгновенно исчезало).

                  Делаю для себя вывод, что «pure css» с hover'ами — это скорее недостаток, чем достоинство.
                  • +1
                    С помощью pure CSS можно сделать «stateful hover», например:

                    <div class="menu-item" tabindex="0">
                        <a href="#">Link</a>
                    </a>
                    


                    .button .menu-item {
                        pointer-events: none;
                    }
                    
                    .button:focus .menu-item {
                        pointer-events: all;
                    }
                    


                    В таком случае переход произойдёт лишь при втором тапе.

                    P. S. Ну и, конечно, обернуть всё в media query.
                    • 0
                      Спасибо, отлично протестировал!

                      Понятно, что «Pure css» с hover'ами подходит для ПК, а не для мобильных устройств. На них вообще механизм взаимодействия нужно другой применять. Но ведь то, что какой-то вариант не подходит для мобильного не говорит о том, что его нельзя использовать на ПК, просто надо сделать по другому.

                      Всему свое место.
                • 0
                  Мне понравилось Bootstrap 3 mega-dropdown menu. Но как сложно все эти ссылки вводить с телефона… QR код был бы очень уместен.
                  • 0
                    А клик по ссылке из статьи?
                    • 0
                      Идея в том, чтобы на десктопе найти устраивающее меню для десктопа и быстро открыть его в телефоне и планшете. Реальная то работа пока на десктопе.
                  • 0
                    Недавно понадобилось запилить двухуровневое меню, это когда две полосы с кнопками, содержимое нижней полосы зависит от верхней, интересно есть какие то готовые решения? Не нашёл ничего подходящего, руками допиливал меню jQuery UI
                    • 0
                      А картинку показать можете?
                      • 0
                        Это же частный случай табов, только вместо текста второй ряд кнопок.
                        http://jsfiddle.net/syahrasi/us8uc/
                        • 0
                          так и делал но были там какието сложности, кажется пришлось допиливать css ну и основная сложность была в переходе по урлу на нужную вкладку
                        • 0
                          Такое не подходит? codepen.io/ojbravo/pen/tIacg
                          Второй уровень меню тоже в строчку.
                          • 0
                            да выглядит именно так, но вложенный уровень формируется динамически, спасибо за хороший пример, возьму на вооружение
                        • +2
                          Спасибо за интересную подборку.

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

                          Самое читаемое