CSS3 Menu. Бесплатная программа для создания меню CSS. Большой обзор красивых многоуровневых меню с 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

Решение неплохое, но слишком уж много используется классов. Радует, что нет 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

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

CSS3 Menu Dropdowns (особенное решение)!

Темное горизонтальное меню с тринадцатью (13) вариантами анимации! Обязательно советую ознакомиться, пригодится в быту.
http://codepen.io/cmcg/pen/ofFiz

П.С.
Надеюсь, Вам понравилась сборка из 23 решений. Если хотите и дальше их читать, то пройдите снизу опрос.
Всем приятной работы.

CSS3 меняет технологию создания вебсайтов. Хотя многие не хотят начинать использовать CSS3 из-за отсутствия поддержки в некоторых браузерах, есть те, кто идет вперед и создает удивительные вещи с помощью потрясающих возможностей CSS3. Больше не нужно полагаться на скрипты и картинки, чтобы создать стильные элементы для вебсайта, такие как кнопки и меню.

Вы можете создать современное меню без Javascript и картинок, эффективно используя новые CSS3 свойства: радиус границы и анимацию. Это меню прекрасно работает с Firefox, Opera, Chrome и Safari. Выпадающее меню работает также в браузерах, которые не поддерживают CSS3, таких как ИЕ7+, но закругленные углы и тени не будут отображаться. Эффекты CSS3 однажды заменят всю jQuery анимацию, которую используют дизайнеры.

Особенности меню

Получить полную версию

Плата требуется для использования в коммерческих целях. Бизнес версия CSS3Menu дополнительно предоставляет опцию для создания многоколоночного меню и включает расширенные наборы шаблонов меню и иконок.

После того как Вы завершите платеж через безопасную форму, Вы немедленно получите лициензионную информацию по электронной почте. Вы можете выбрать наиболее подходящий метод оплаты: кредитная карта, банковский перевод, чек, PayPal и т.д.

• Загрузить бесплатную версию
  для Windows & Mac
• Загрузить коммерческую версию
  для Windows & Mac - $59

Помощь

Как создать стильное анимированное CSS3 меню без JavaScript

1) Откройте приложение CSS3 Menu , нажмите кнопки "Добавить элемент" и "Добавить подменю" , расположенные на панели инструментов CSS3 Menu, чтобы создать меню. Также Вы можете использовать кнопку "Удалить элемент" , чтобы удалить некоторые кнопки.

2) Используйте готовые шаблоны . Чтобы это сделать, выберите понравившуюся тему в списке "Шаблоны". Дважды щелкните по теме чтобы применить ее.

3) Настройка внешнего вида меню.
3.1. Кликом выберите элемент и измените настройки внешнего вида кнопки для нормального и наведенного состояний, установите ссылку и значение атрибута Target на вкладке "Главное меню".
3.2. Кликом выберите элемент и измените внешний вид подменю для нормального и наведенного состояний, установите ссылку и значение атрибута Target на вкладке "Подменю".

4) Сохранение меню.
4.1. Сохранение файла проекта. Чтобы сохранить проект, просто нажмите кнопку "Сохранить" , расположенную на панели инструментов или выберите пункты "Сохранить" или "Сохранить..." в главном меню.
4.2. Публикация меню в формате HTML. Чтобы сделать это, нажмите кнопку "Опубликовать" на панели инструментов.

Связаться с нами

CSS3 Menu
При обнаружении ошибок в работе программы, возникновении вопросов и пожеланий свяжитесь с технической поддержкой . Убедитесь, что в письмо включена информация о браузере, ОС, версии CSS3Menu, а также ссылка на вашу страницу. В большинстве случаев Вы получите ответ в течение одного рабочего дня. Пожалуйста, сначала ознакомьтесь с FAQ . Возможно, на ваш вопрос уже ответили.
E-mail:

Всем снова здравствуйте!
В своих статьях, я не раз обращался к различным способам создания навигационных для сайтов. Рассматривались менюшки на любой вкус и цвет, навигация в популярном стиле « », горизонтальные и вертикальные, с использованием javascript и картинок, не мало внимания уделялось . Как вы понимаете способы создания меню ограничены лишь фантазией разработчиков, а она у них воистину безгранична.
Сегодня мне хотелось бы рассказать и показать на примере еще один вариант исполнения меню исключительно средствами 3, без javascript и дополнительных изображений. В дизайне меню мы будем использовать скругленные углы, градиент фона и простые эффекты при наведении курсора. Все это вместе работает достаточно хорошо и стабильно, конечно только в современных браузерах, которые поддерживают 3, даже новые версии замшелого IE, со скрипом, но все же отображают конечный результат.

И так, вооружившись терпением и шпаргалками (кому оно надо), начнем из «фарша» мертвого кода, творить живое и динамичное меню навигации. Начнём, как всегда с построения в Html, простейшего списка нашей менюшки.

HTML разметка

• Главная
• О Блоге
• Контакт
• Наша Карта

Как вы видите, разметка выглядит до безобразия просто, выполнена в виде элементарного неупорядоченного списка. Чтобы вдохнуть жизнь и придать привлекательности этому списку, мы прибегнем к помощи «магии» , а точнее сказать, поработаем с параметрами таблиц каскадных стилей. Присвоив списку идентификатор id="main-navigation" , а первому пункту class="first", и уже в css, в волю поколдуем над формой, цветом, и функциональностью нашего будущего меню.

CSS3 верстка

В оформлении меню используем закругленные углы border-radius и функцию линейного градиента, кстати с не давних пор, и моя любимая Opera, начиная с 11-й версии, наконец таки включила . Ну, а IEшка тоже пыжится и не отстает от собратьев, пусть даже и не без помощи специального фильтра.

#main-navigation { width: 100%; border-radius: 8px; -moz-border-radius: 8px; -khtml-border-radius: 8px; -webkit-border-radius: 8px; background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#666666)); background: -moz-linear-gradient(top, #444444, #666666); background: -ms-linear-gradient(top, #444444, #666666); background-image: -o-linear-gradient(top,rgb(68,68,68), rgb(102,102,102)); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#444444", endColorstr="#666666"); border: 1px solid #444; list-style: none; padding: 0; margin: 0; float: left; } #main-navigation li { float: left; border-right: 1px solid #777; } #main-navigation li a { font: 13px Georgia, "Times New Roman", Times, serif; letter-spacing: 1px; padding: 12px 20px; border-right: 1px solid #333; display: block; color: #fff; }

Проделав все выше описанное, на выхлопе вы получите отличный результат и будет он выглядеть следующим образом:

Все получилось просто замечательно. В первом примере, при наведении на пункт меню, мы использовали стандартное подчеркивание. Давайте немного усложним стиль, уберем подчеркивание ссылки и добавим более красивый эффект. Сильно мудрить не будем, а просто сменим направление градиента в момент наведения указателя на пункт меню:

#main-navigation li a:hover { background: -webkit-gradient(linear, left top, left bottom, from(#666666), to(#444444)); background: -moz-linear-gradient(top, #666666, #444444); background: -ms-linear-gradient(top, #666666, #444444); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#666666", endColorstr="#444444"); text-decoration: none; }

2. Креативное анимированное меню CSS 3

Несколько интересных идей для меню с помощью анимации css3.

3. Меню с эффектом размытия

Несколько интересных идей размытого меню средствами css3 для flat дизайна.

4. Навигация в виде круга

Красивая навигация css3 с миниатюрами для слайдера в виде круга.

5. Галерея с плавающими миниатюрами

Галерея при помощи HTML5, CSS3 и jQuery. Изюминка в том что после наведения элемент немного меняет свою позицию.

6. Регулятор CSS3

Ручка управления, хорошо подойдет для регулятора громкости. Выполнена с помощью css3 и jquery.

7. Классическая анимация горячих новостей

Интересная идея для новостного сайта. Появление горячих новостей в классическом стиле кино но с новыми технологиями css3.

8. Сервис “Фото с веб камеры” на css3

Прикольный сервис где вы можете сделать свое фото с веб камеры и посмотреть на тех кто их уже оставил. Тут конечно не только css3 используется но и php + jquery

9. Выпадающее меню css3

Выпадающее меню для сайта с миниатюрами на jquery и css3.

10. Адаптивный шаблон css3

Адаптивный шаблон при помощи одного лишь css3. Шаблон корректно отображается на любом расширении экрана.

11. Анимация загрузки

Красивая анимация загрузки с помощью css3.

12. Эффект hover-2 css3

Еще один css3 эффект при наведении курсора на блок.

13. Анимация загрузки 2

Полоса загрузки для сайта при помощи css3

14. Цикл загрузки css3

Анимация бесконечной загрузки для вашего сайта с помощью css3.

15. Оригинальная презентация страницы контактов

Интересный и плавный эффект css3 появления информации при наведении на миниатюру.

Подсказки для сайта на css3.

17. Часы на css3 и jquery

Легкие электронные часы для вашего сайта.

18. Галерея «Полароид»

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

20. Сочные вкладки

21. Круги на фоне

Интересная идея для фона сайта при помощи чистого css3 и немного jquery.

22. Выпадающее, летающее меню CSS3

Вылетающее меню, а точнее информация о пункте меню на css3 и jquery

23. Миниатюрное меню CSS3

Меню css3 в стиле минимализма.

24. Уведомления для сайта

Уведомления для вашего сайта в виде выпадающего блока, все работает на css3 и jquery.

25. Миниатюры с псевдо элементами

Интересная идея для миниатюр на сайте с фотографиями.

26. Меню аккордеон

Удобное и красивое меню аккордеон для сайта без помощи jquery.

27. Оригинальный tooltip

Подсказки для вашего сайта на новой технологии используя css3.0 и jquery.

28. Сложенные ленты на CSS3

Теперь чтобы сделать эффект сложенных лент вам не нужно использовать графически редактор, достаточно написать несколько строчек css.

29. Навигация на чистом html и css3

Основное меню на сайте с помощью одного лишь кода.

30. Теги на css

Теги в виде билетов для сайта.

31. Анимация движения на CSS3

При наведении на блок, объект начинает движение.

32. Тизер для сайта

Легки тизер с помощью одного лишь кода.

33. Поворот изображения CSS3

Поворот изображения на определенный угол при помощи rotate.

34. Tooltip с изображением

Подсказки которые работаю при наведении или при нажатии на мобильных устройствах.

35. Круговое меню

Круговое меню, достаточно интересная и проверенная годами идея, которая актуальная и по сей день.

36. Форма обратной связи CSS3

Форма обратной связи выполнена с проверкой полей и подсказками на языке html5 и css3.

37. Навигатор