Как Создать Выпадающее Меню CSS
Введение
Для сайта время его загрузки и удобство использования являются одними из самых важных аспектов. Поэтому, вы не должны загромождать ваш сайт дополнительными JavaScript и большими изображениями. Но что, если вы хотите красивое выпадающее CSS меню? Для этого не нужно использовать JavaScript, сегодня выпадающее меню можно сделать используя только CSS. В этом руководстве вы научитесь, как создать выпадающее меню CSS.
Нужен недорогой, но надёжный хостинг для вашего нового проекта? Обратите внимание, что в Hostinger действуют скидки на все тарифы хостинга. Воспользуйтесь предложением и разместите сайт до 90% дешевле!
Оглавление
Что вам понадобится
Перед тем, как мы начнем это руководство, вам понадобится следующее:
- Доступ к контрольной панели вашего хостинга
Шаг 1 — Создание HTML-файла
Во-первых, вам нужно создать пустой HTML-файл. В этом руководстве мы создадим новый файл под названием menu.html. Для этого мы будем использовать Файловый менеджер. Однако тот же результат может быть достигнут с использованием FTP-клиента (создайте файл menu.html на вашем компьютере и загрузите его на ваш хостинг).
Шаг 2 — Добавление кода HTML меню
Наше меню будет сделано из одного родительского элемента под названием Главное меню и пяти подразделов. Изменяя адрес внутри атрибута href, вы можете связать каждый подраздел с разными страницами вашего сайта. Вы наверное заметили, что каждый элемент имеет разный класс — dropdown, mainmenubtn и dropdown-child. Классы необходимы для применения правил CSS.
<div class="dropdown"> <button class="mainmenubtn">Главное меню</button> <div class="dropdown-child"> <a href="http://www.вашдомен.ru/page1.html">Подраздел 1</a> <a href="http://www.вашдомен.ru/page2.html">Подраздел 2</a> <a href="http://www.вашдомен.ru/page3.html">Подраздел 3</a> <a href="http://www.вашдомен.ru/page4.html">Подраздел 4</a> <a href="http://www.вашдомен.ru/page5.html">Подраздел 5</a> </div> </div>
Вот, как это выглядит без применения каких-либо CSS-правил:
Как вы видите обычное HTML меню не оптимизировано и выглядит не очень красиво. Однако мы применим CSS правила и изменим это в следующем шаге.
Шаг 3 — Как создать выпадающее меню CSS
Мы стилизуем наш HTML код используя следующие CSS правила:
.mainmenubtn { background-color: red; color: white; border: none; cursor: pointer; padding:20px; margin-top:20px; } .mainmenubtn:hover { background-color: red; } .dropdown { position: relative; display: inline-block; } .dropdown-child { display: none; background-color: black; min-width: 200px; } .dropdown-child a { color: white; padding: 20px; text-decoration: none; display: block; } .dropdown:hover .dropdown-child { display: block; }
Как вы видите, класс .dropdown-child имеет CSS правило display: none. Однако, как только пользователь проведет курсором (.dropdown:hover) по родительскому элементу, это правило изменит его отображение на display: block. Это и создаст эффект выпадающего меню.
Ниже представлен финальный результат нашего файла menu.html:
<html> <head> <style> .mainmenubtn { background-color: red; color: white; border: none; cursor: pointer; padding:20px; margin-top:20px; } .dropdown { position: relative; display: inline-block; } .dropdown-child { display: none; background-color: black; min-width: 200px; } .dropdown-child a { color: white; padding: 20px; text-decoration: none; display: block; } .dropdown:hover .dropdown-child { display: block; } </style> </head> <body> <div class="dropdown"> <button class="mainmenubtn">Главное меню</button> <div class="dropdown-child"> <a href="http://www.вашдомен.ru/page1.html">Подраздел 1</a> <a href="http://www.вашдомен.ru/page2.html">Подраздел 2</a> <a href="http://www.вашдомен.ru/page3.html">Подраздел 3</a> <a href="http://www.вашдомен.ru/page4.html">Подраздел 4</a> <a href="http://www.вашдомен.ru/page5.html">Подраздел 5</a> </div> </div> </body> </html>
В этом примере мы используем внутренние таблицы стилей, что означает CSS стили находятся в самом файле HTML. Однако существует множество способов для подключения CSS стилей к HTML документу.
Как только вы закончите, финальный результат должен быть похож на это:
Не бойтесь экспериментировать c CSS стилем, изменяя цвета и размер. Адаптируйте меню под ваши нужды.
Заключение
Закончив данное руководство вы научились, как создать выпадающее меню CSS. Код приведенный в данном руководстве достаточно легок и не повлияет на время загрузки вашего сайта.
Коментарі
28 ноября 2018
а как сделать что бы при нажатии выпадало меню, а не при наведении?
01 декабря 2018
Добрый день. Обратитесь пожалуйста в службу поддержки.
18 декабря 2018
Подскажите, что здесь необходимо изменить что бы при наведение на меню выпадали подменю @media(max-width:767px) and (min-width:100px){.navbar-default ul.nav li.dropdown ul{box-shadow:0 3px 7px rgba(0,0,0,0.3);margin-top:8px;padding:5px 0;width:100%!important} .navbar-default ul.nav li.dropdown ul.dropdown-menu li a:hover{background-color:#fff;border-radius:0;color:#f1c40f!important} .navbar-default ul.nav li.dropdown ul li:first-child{border-top:1px solid rgba(255,255,255,0.3)} .navbar-default ul.nav li.dropdown ul li:last-child{border-bottom:1px solid rgba(255,255,255,0.3)} .navbar-nav .open .dropdown-menu > li > a,.navbar-nav .open .dropdown-menu .dropdown-header{padding:10px 5px 10px 15px} .navbar-default ul.nav li a{color:#fff!important;font-weight:600} .about-information img{border:5px solid #bdc3c7;border-radius:50%;display:block;height:auto;margin:0 auto 30px;max-width:70%;width:auto} .navbar.navbar-default .navbar-brand{margin:8px 25px 8px 10px} .navbar-default .navbar-toggle{border-color:#f1c40f} .navbar-default .navbar-toggle .icon-bar{background-color:#f1c40f} .navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{background-color:#fff} #main_header .slide_item_block h2{font-size:28px;font-weight:800;text-transform:uppercase} }
19 декабря 2018
Добрый день. Обратитесь пожалуйста в службу поддержки. Они подскажут гораздо более оперативно)
29 июня 2019
Самый полезный сайт.Респект.
30 сентября 2019
Полезная статья. Тем не менее, есть пара недочетов. 1) Контент сайта будет сдвигаться, в связи с появлением блока с меню. Чтобы отображать дроплист поверх основного контента сайта, нужно добавить "position: absolute;" в класс ".dropdown:hover .dropdown-child". 2) Блок, который появляется, отображается "ниже" некоторых элементов (например, ). Чтобы поправить, надо добавить в тот же класс, что в 1 пункте "z-index: 999999;".