Выпадающее многоуровневое навигационное меню на CSS3

Сегодня вы увидите, как можно создать прикольное выпадающее многоуровневое навигационное меню, используя при этом чистый CSS со свойствами из CSS3, например, таких-как border-radius, box-shadow, text-shadow и linear gradient. Это меню будет выглядеть идеально в Firefox, Chrome и, конечно, Safari.

Пример Скачать (.zip, 1.6 Кб)

HTML

Далее идет обычный HTML код для создания такого меню (в основном, это вложенные списки).

Ниже вы видите чистый скелет этого меню без каких-либо стилей.

CSS

А теперь начнем обтягивать этот скелет «кожей» или прописывать стили CSS для нашей конструкции.

После того, как добавите этот стиль, вы увидите обычное меню без эффектов и выпадающих элементов.

После добавления следующего CSS кода, вы увидите выпадающее меню при наведении курсора мыши на элементы основного меню.

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

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

Вот и все. Теперь вы можете еще раз посмотреть пример или скачать архив этого меню.

Не знаешь, где сделать МРТ в Саратове http://mrt-saratov.ru/118? Заходи на сайт, там тебе все объяснят и расскажут.


6 комментариев на “Выпадающее многоуровневое навигационное меню на CSS3

  1. Не леквид, в IE ужасно гребёт... Подойдёт разьве что в узкоспециализированных проектах, например в какой-нибудь панели администратора для «самого себя». То есть, в тех проектах, где факт использования IE исключается. В остальных случаях — это будет полный провал...

    Thumb up 0 Thumb down 0

    • Проходят времена, когда мы должны подстраиваться под IEшку. Именно благодаря упорному использованию в своих работах магии CSS3, зашевелились и разработчики IE. Учитывая как втюхиваются обновления в Windows, можно не особо переживать, 9й IE накроет большую часть своих сторонников, а этот «тпру-у-узер» довольно неплохо справляется с CSS3.

      Thumb up 0 Thumb down 0

  2. Как сделать таким же образом вертикальное меню? Как расположить основные рубрики по вертикали, и чтобы при наведении на них, подрубрики показывались не снизу, а слева? Спасибо.

    Thumb up 0 Thumb down 0

  3. Это не многоуровневое, а трехуровневое максимум. Как в примере.

    Все уровни, начиная с 4-го, будут отображаться при наведении на 2-й

    Thumb up 0 Thumb down 0

Оставить комментарий