Как сделать выпадающее меню на CSS

Как сделать выпадающее меню на CSSВ данном видеоуроке у нас речь пройдет про создание горизонтального, выпадающего меню. Делать мы его будем на чистом CSS, поэтому всяких классных эффектов при появлении списка, типа выплывания или плавного появления здесь не добиться. Если вы хотите создать меню с подобными эффектами, то для этих целей используйте jQuery.

Мы же с вами обойдемся лишь средствами CSS.

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

Чтобы увить то, что мы получим, кликните по кнопке «посмотреть демо» под видеоуроком.

Смотреть видеоурок

Что касается кроссбраузерности, то данное меню работает в Firefox, Opera, Chome, Safari, IE8+, поэтому вы можете его спокойно применять на своем сайте.

Я думаю, что теперь у вас не возникнет проблем при верстки подобных менюшек. Если данная тема вам оказалась интересной, пожалуйста напишите в комментариях, стоит ли записать аналогичный урок про создание выпадающего меню, но только уже с использованием jQuery?

Понравилась статья?

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

Комментарии ВКонтакте

Добавить комментарийКомментариев (4)

Михаил 30 ноября 2015 г. в 14:35

еще один интересный пример выпадающего меню - http://siteacademy.ru/index.php/css/45-css3-dropdown-menu

Ответить

Анна 28 августа 2015 г. в 21:01

Александр, спасибо! Очень пригодился Ваш урок! Но вот беда... если после меню идет обзац текста, как в Вашем примере, то все работает просто замечательно. А если, после меню поместить блок div, в котором отображаются плавно сменящиеся фото (при помощи библиотеки jQuery), то меню выпадает под этот блок и становится не видимым. Подскажите, пожалуйста, как можно решить эту проблему. Очень нужна Ваша помощь! Заранее спасибо!!!

Ответить

Vector 27 января 2015 г. в 19:12

Стоит записать аналогичный урок про создание выпадающего меню, но только уже с использованием jQuery.
Спасибо за уроки.

Ответить

Наталия 24 февраля 2014 г. в 20:58

Спасибо, Александр, за очередной хороший урок.
Конечно, было бы здорово увидеть "аналогичный урок про создание выпадающего меню, но только уже с использованием jQuery". И очень нужна еще похожая тема - всплывающие подсказки с использованием jQuery.

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад