В этой статье мы разберём, как происходит создание выпадающего меню на HTML, CSS и JavaScript.
Также, если вы вообще не знаете как делать меню, то посмотрите статью: Меню навигации на HTML и CSS, там вы научитесь создавать простое меню навигации.
Создание горизонтального выпадающего меню:
Сперва на HTML и CSS сделаем выпадающее меню которое будет проявляться при наведении мышки, вот его HTML.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <header> <nav> <ul> <li><a href="#">Главная</a></li> <li>Галерея <ul> <li><a href="#">Машины</a></li> <li><a href="#">Горы</a></li> <li><a href="#">Компьютеры</a></li> </ul> </li> <li>О себе <ul> <li><a href="#">Имя</a></li> <li><a href="#">Аватарка</a></li> </ul> </li> </ul> </nav> </header> |
Тут всё как в обычном меню, если вы читали статью про то как сделать меню навигации, единственное что отмечу, это то, что обязательно меню должно находится в теги <nav>, для лучшей индексации.
Теперь перейдём к CSS, но сначала мы не будем делать прям выпадающие меню, оно просто при наведении мыши, будет просто появляться, вот и всё.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | html, body { margin: 0; padding: 0; } nav > ul { display: flex; margin: 0; width: 100%; background-color: green; } nav > ul > li { margin-right: 20px; } li { color: white; list-style: none; font-size: 20px; } li a { color: white; text-decoration: none; } li > ul{ display: none; position: absolute; background-color: tomato; padding: 0; } li:hover > ul{ display: block; } |
В самом начале, мы убираем отступы со всего документа, чтобы, меню было чётко прибито ко краям страницы.
Дальше настраиваем внешний вид, делаем FlexBox и задаём отступы, самое главное, что нужно сделать, это тегам <ul>, которые находятся внутри тега <li>, сделать позиционирование absolute и добавить ему свойство display: none, что бы блок не показывался на экране.
Последнее важное изменение, это при наведении мышкой на <li>, внутри которого есть <ul>, он появлялся, вот что получилось.
Такое латовый вариант получился, теперь сделаем так, что бы меню выпадало с анимацией, а не просто появлялась, для этого не много изменим стили.
Примечание:
Тут покажу только те селекторы, которые изменим, а не весь CSS, так как, там добавилось не много.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | nav > ul { display: flex; margin: 0; width: 100%; height: 25px; background-color: green; } li > ul{ position: absolute; top: 40px; visibility: hidden; opacity: 0; background-color: tomato; padding: 0; transition: 400ms; } li:hover > ul{ visibility: visible; top: 25px; opacity: 1; } |
В первом селекторе мы добавляем высоту, чтобы было проще менять позицию, во втором, добавляем позицию
top равного 45 пикселем, также устанавливаем свойство visibility: hidden, которое отвечает за скрытие элемента, и opacity: 0, для прозрачности, значение ноль, означает что элемент полностью прозрачен.В последнем селекторе который мы изменяем, который ещё отвечает за наведение мышки, убираем display и добавляем visibility: visible, для показа элемента, top равный 25 пикселям и opacity: 1, для полной не прозрачности.
Также появилось свойство transition, для плавных переходов, мы задаём ему время перехода 400 миллисекунды.
Вывод:
В этой статье мы рассказали о создание выпадающего меню на HTML и CSS, если вам что то не понятно, то посмотрите наш учебник по HTML и CSS.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 5,00
Загрузка...