Главная > Инструменты > Меню при наведении. Как сделать плавное выпадающее меню на CSS

Меню при наведении. Как сделать плавное выпадающее меню на CSS

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

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

Вертикальных менюшек для сайтов довольно много, в этом уроке я покажу вам только вертикальное выпадающее меню на CSS при наведении с выпадашкой вправо и влево, а также многоуровневые выпадающие меню. Другие варианты вертикальных меню для сайта будут описаны в следующих уроках. И так преступим.

Навигация по странице:

В качестве вступления, думаю стоит рассказать принцип работы выпадашек на CSS.

У всех браузеров, которые запущенные с ПК или ноутбука, в CSS доступно свойство :hover (тут я малость неправ, это псевдокласс 🙂) на базе которого можно построить практически любое вертикальное выпадающее меню.

А что же делать с мобильными браузерами? - или на планшетах спросите вы.

К счастью, разработчики мобильных браузеров предусмотрели (к сожалению не везде) возможность срабатывания псевдокласса:hover при первом нажатии на ссылку, если оно описано в CSS. Благодаря этим стараниям, большинство пользователей сможет увидеть ваше вертикальное выпадающее меню CSS.

Пара слов о преимуществе выпадающих меню:

  • можно вместить очень длинные меню в ограниченное пространство;
  • дизайн становится более изящным;
  • частично улучшаются поведенческие факторы.
Вертикальное выпадающее меню вправо

Представляю вашему вниманию первый пример: простое вертикальное выпадающее меню вправо при наведении.

Написание менюшки мы начнем с html кода и сделаем его универсальным на списках, вариант ответа идентичный тому, что возвращает wordpress.

Html для вертикального меню

Думаю в плане понимания html у вас не возникнет никаких сложностей, типичные списки с тегами ul и li. Смотрим код:

  • Первая услуга
  • Вторая услуга
    • Выпадашка 1
    • Выпадашка 2
  • Третья
    • Выпадашка с третьей услуги 1
    • Выпадашка с третьей услуги 2
    • Краткая выпадашка
  • 4 услуга
  • 5 услуга
    • 111111
    • 2222 2222
  • 6 услуга
  • 7 услуга
  • 8 услуга

Меню для сайта на списках: у некоторых пунктов есть выпадающие блоки, у некоторых нет. Все предельно просто, думаю никаких пояснений не нужно.

Вертикальное выпадающее меню CSS

Со стилями CSS вопрос немного по сложнее. Я вам покажу код только самого меню, а остальные стили вы сможете посмотреть когда скачаете пример.

#menuVertical{width:100%;height:auto;} #menuVertical ul{ display:block; width:100%; height:auto; margin:0px; padding:0px; list-style:none; position:relative; } #menuVertical ul li{display:block; width:100%; height:auto; position:relative;} #menuVertical ul li a{ position:relative; display:block; width:100%; height:auto; box-sizing:border-box; font-size:13px; text-transform:uppercase; font-weight:bold; color:#FBF7F7; line-height:1.2em; padding:10px 15px; background:#3A9CD3; border-top:1px solid #236A92; text-decoration:none; } #menuVertical ul li:first-child a{border:0px;} #menuVertical ul li a:hover, #menuVertical ul li:hover a{ background:#0A3CC1; } #menuVertical ul li ul{ position:absolute; top:0px; left:100%; display:none; width:auto; } /*******показываем выпадашку при наведении ********/ #menuVertical ul li:hover ul{display:block;} #menuVertical ul li ul li a{ white-space:nowrap; text-transform:none; padding:5px 20px; } #menuVertical ul li ul li a:hover{ background:#75C1D4; color:#0A3CC1; }

Вот эта строчка CSS

#menuVertical ul li:hover ul{display:block;}

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

Посмотреть что у нас получилось в этом примере можно на скине:

Как работает вертикальное выпадающее меню css вы можете увидеть в режиме демо ниже, или скачав пример:

Вот такой не сложный пример выпадающего меню у меня получился.

Предположим, что вам нужно сделать выпадающее меню при наведении с выпадашкой влево. На основе примера выпадашки вправо мы сейчас ее и реализуем.

Вертикальное выпадающее меню влево на CSS

Хтмл код оставляем прежним, его нет смысла менять. Разве что в самом примере, мне придется поменять местами левый блок и правый, для наглядности примера. (увидите скачав пример в конце)

Стили CSS будут немножко отличаться, хотя не кардинально. В моем простом примере достаточно исправить одно значение. В комментариях, я помечу его.

Для более сложных меню, вам потребуется сделать немножко больше правок. Смотрим стили:

#menuVertical{width:100%;height:auto;} #menuVertical ul{ display:block; width:100%; height:auto; margin:0px; padding:0px; list-style:none; position:relative; } #menuVertical ul li{display:block; width:100%; height:auto; position:relative;} #menuVertical ul li a{ position:relative; display:block; width:100%; height:auto; box-sizing:border-box; font-size:13px; text-transform:uppercase; font-weight:bold; color:#FBF7F7; line-height:1.2em; padding:10px 15px; background:#3A9CD3; border-top:1px solid #236A92; text-decoration:none; } #menuVertical ul li:first-child a{border:0px;} #menuVertical ul li a:hover, #menuVertical ul li:hover a{ background:#0A3CC1; } #menuVertical ul li ul{ position:absolute; top:0px; right:100%;/*поменяли здесь*/ display:none; width:auto; } /*******показываем выпадашку при наведении ********/ #menuVertical ul li:hover ul{display:block;} #menuVertical ul li ul li a{ white-space:nowrap; text-transform:none; padding:5px 20px; } #menuVertical ul li ul li a:hover{ background:#75C1D4; color:#0A3CC1; }

Вот и все. У нас получилось вот такое меню. Слева кликабельный скин, справа демо и ссылка на скачивание примера:

Вертикальное многоуровневое меню

В жизни, вертикальные многоуровневые меню выпадающие при наведении встречаются довольно редко. Хотел показать пару примеров из своего загашника, но увы не смог найти. Придется сделать 🙂 . Сложного в этих меню для сайта ничего нет, типичный CSS для выпадашки.

Начнем. Для начала хтмл код. У нас добавится несколько списков ul li для следующих уровней сайта. Мой пример будет на 3 выпадающих подменю, по этому html код будет такой:

  • Первая услуга
  • Вторая услуга
    • Выпадашка 1
    • Выпадашка 2
  • Есть выпадашки далее
    • Выпадашка с третьей услуги 1
    • Есть выпадашки далее
      • Есть выпадашка далее
        • Пункт 1
        • Выпадашка конец
        • Выпадашка конец
      • Нет выпадашки далее
    • Краткая выпадашка
    • Краткая выпадашка
    • Краткая выпадашка
  • 4 услуга
  • 5 услуга
    • 111111
    • 2222 2222
  • 6 услуга

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

#menuVertical{width:100%;height:auto;} #menuVertical ul{ display:block; width:100%; height:auto; margin:0px; padding:0px; list-style:none; position:relative; } #menuVertical ul li{display:block; width:100%; height:auto; position:relative;} #menuVertical ul li a{ position:relative; display:block; width:100%; height:auto; box-sizing:border-box; font-size:13px; text-transform:uppercase; font-weight:bold; color:#FBF7F7; line-height:1.2em; padding:10px 15px; background:#3A9CD3; border-top:1px solid #236A92; text-decoration:none; } #menuVertical ul > li:first-child > a{border:0px;} #menuVertical ul li a:hover, #menuVertical ul li:hover a{ background:#0A3CC1; } #menuVertical ul li ul{ position:absolute; top:0px; left:100%; display:none; width:150px; } /*******показываем выпадашку при наведении ********/ #menuVertical ul li:hover > ul{display:block;} #menuVertical ul li ul li a{ text-transform:none; padding:5px 20px; } #menuVertical ul li ul li a:hover, #menuVertical ul li ul li:hover > a{ background:#75C1D4; color:#0A3CC1; }

Это стили для создания вертикального многоуровневого выпадающего меню вправо при наведении. Вариант с выпадашкой влево будет чуть далее. Смотрим ниже что у нас получилось на рисунке (скин кликабельный).

Горизонтальное меню представляет собой список разделов сайта, поэтому логичнее разметить внутри элемента

Статьи по теме:
Введение в пакетный менеджер NPM для начинающих
Введение в пакетный менеджер NPM для начинающих
Последнее обновление: 18.11.2018 Кроме встроенных и кастомных модулей Node.js существует огромный пласт различных библиотек и фреймворков, разнообразных утилит, которые создаются сторонними производителями и которые также можно использовать в проекте, нап
Сервисные коды для Samsung GT
Сервисные коды для Samsung GT
Секретные коды (недокументированные инженерные коды) для мобильных телефонов Samsung. Введите *2767*MVT# (*2767*688#) что бы сделать E2P MVT Reset Этот код действительно работает! Убирает все SP lock без кабеля! Включая: -Network lock -Subnet lock
Безопасность беспроводных сетей
Безопасность беспроводных сетей
По всей видимости, нет смысла говорить о том, что большинство пользователей сталкивалось с ситуацией, когда при попытке подключения к беспроводной сети система выдает требование ввода так называемого ключа безопасности сети.О том, что это такое, для чего
Голосовое приложение Google Now
Голосовое приложение Google Now
Когда Google впервые выпустил Google Now, он был отмечен пользователями Android по всем направлениям. Однако, когда произошли изменения в Google Feed, эти изменения были менее приняты. Но Лента новостей это отличная вещь, если Вы просто потратите время на