Как сделать выпадающее меню css
Перейти к содержимому

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

  • автор:

Как сделать — Выпадающее меню

Выпадающее меню — это переключаемое меню, которое позволяет пользователю выбрать одно значение из предопределенного списка:

Выпадающее

Создать выпадающее меню

Создайте выпадающее меню, которое появляется при наведении курсора мыши на элемент.

Шаг 1) Добавить HTML:

Пример

Ссылка 1
Ссылка 2
Ссылка 3

Объяснение примера

Используйте любой элемент, чтобы открыть выпадающее меню, например элемент , или

.

Используйте элемент контейнера (например, ), чтобы создать раскрывающееся меню и добавить в него раскрывающиеся ссылки.

Оберните элемент вокруг кнопки и , чтобы правильно расположить выпадающее меню с помощью CSS.

Шаг 2) Добавить CSS:

Пример

/* Кнопка выпадающего списка */
.dropbtn background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
>

/* Контейнер — необходим для размещения выпадающего содержимого */
.dropdown position: relative;
display: inline-block;
>

/* Выпадающее содержимое (скрыто по умолчанию) */
.dropdown-content display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
>

/* Ссылки внутри выпадающего списка */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>

/* Изменение цвета выпадающих ссылок при наведении курсора */
.dropdown-content a:hover

/* Показать выпадающее меню при наведении курсора */
.dropdown:hover .dropdown-content

/* Изменение цвета фона кнопки раскрывающегося списка при отображении содержимого раскрывающегося списка */
.dropdown:hover .dropbtn

Объяснение примера

Мы оформили кнопку выпадающего списка с цветом фона, отступами и т.д.

Класс .dropdown использует position:relative , что необходимо, когда мы хотим, чтобы выпадающий контент был размещен прямо под кнопкой выпадающего списка (с помощью position:absolute ).

Класс .dropdown-content содержит фактическое выпадающее меню. Он скрыт по умолчанию и будет отображаться при наведении курсора (см. ниже). Примечание установлено значение min-width 160px. Не стесняйтесь изменить это. Совет: Если вы хотите, чтобы ширина раскрывающегося содержимого была такой же широкой, как кнопка раскрывающегося списка, установите width на 100% (и overflow:auto чтобы включить прокрутку на небольших экранах).

Вместо того, чтобы использовать границу, мы использовали свойство box-shadow чтобы сделать выпадающее меню похожим на «карту». Мы также используем z-индекс для размещения выпадающего списка перед другими элементами.

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

Как Создать Выпадающее Меню CSS

Как Создать Выпадающее Меню CSS

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

Нужен недорогой, но надёжный хостинг для вашего нового проекта? Обратите внимание, что в Hostinger действуют скидки на все тарифы хостинга. Воспользуйтесь предложением и разместите сайт до 90% дешевле!

Что вам понадобится

Перед тем, как мы начнем это руководство, вам понадобится следующее:

  • Доступ к контрольной панели вашего хостинга

Шаг 1 — Создание HTML-файла

Во-первых, вам нужно создать пустой HTML-файл. В этом руководстве мы создадим новый файл под названием menu.html. Для этого мы будем использовать Файловый менеджер. Однако тот же результат может быть достигнут с использованием FTP-клиента (создайте файл menu.html на вашем компьютере и загрузите его на ваш хостинг).

создать меню выпадающее меню css

Шаг 2 — Добавление кода HTML меню

Наше меню будет сделано из одного родительского элемента под названием Главное меню и пяти подразделов. Изменяя адрес внутри атрибута href, вы можете связать каждый подраздел с разными страницами вашего сайта. Вы наверное заметили, что каждый элемент имеет разный класс — dropdown, mainmenubtn и dropdown-child. Классы необходимы для применения правил CSS.

 
 
Подраздел 1 Подраздел 2 Подраздел 3 Подраздел 4 Подраздел 5

Вот, как это выглядит без применения каких-либо CSS-правил:

меню без 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

Как вы видите, класс .dropdown-child имеет CSS правило display: none. Однако, как только пользователь проведет курсором (.dropdown:hover) по родительскому элементу, это правило изменит его отображение на display: block. Это и создаст эффект выпадающего меню.

Ниже представлен финальный результат нашего файла menu.html:

   .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  
 
Подраздел 1 Подраздел 2 Подраздел 3 Подраздел 4 Подраздел 5

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

Как только вы закончите, финальный результат должен быть похож на это:

Не бойтесь экспериментировать c CSS стилем, изменяя цвета и размер. Адаптируйте меню под ваши нужды.

Заключение

Закончив данное руководство вы научились, как создать выпадающее меню CSS. Код приведенный в данном руководстве достаточно легок и не повлияет на время загрузки вашего сайта.

Как создать выпадающее меню навигации с помощью CSS

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

В этой статье мы расскажем, как создать выпадающее меню навигации. А сейчас пошагово покажем, как создать интересное навигационное меню.

Есть три способа создания выпадающего меню с помощью Flash, JavaScript и CSS/HTML.

Мы покажем меню на основе CSS/HTML, так как оно имеет некоторые преимущества. Это самый легкий способ, а также имеет небольшой размер приложения.

Использование CSS/HTML — самый лучший метод, чтобы избежать конфликтов при JavaScript. Помимо этого, меню на основе CSS/HTML могут быть использованы многими.

1. Создайте HTML.

Как всегда мы начинаем с создания HTML.

  • Создайте элемент с id. Создайте тег внутри элемента с классом «navbar». Тег
      используется для указания неупорядоченного списка, который содержит элементы без порядковых номеров. Каждый элемент неупорядоченного списка описывается внутри тега .
    • Внутри тега
    • добавьте контент, который хотите показать в меню.
    div >ul li> a href="#">Главная страницаa> li> li> a href="#">Учебникиa> ul> li>a href="#">Изучите HTMLa>li> li>a href="#">Изучите CSSa>li> li>a href="#">Изучите JavaScripta>li> li>a href="#">Изучите PHPa>li> ul> li> li> a href="#">Тестыa> ul> li>a href="#" >Основы CSSa>li> li>a href="#">Основы PHPa>li> li>a href="#">Основы JavaScripta>li> ul> li> li> a href="#">Инструментыa> ul> li>a href="#">Геометрические изображенияa>li> li>a href="#">Color Pickera>li> li>a href="#">Генератор паролейa>li> li>a href="#">HTML редакторa>li> li>a href="#">Base 64a>li> ul> li> li> a href="#">Сниппетыa> ul> li>a href="#">CSSa>li> li>a href="#">JavaScripta>li> li>a href="#">Angulara>li> li>a href="#">Javaa>li> ul> li> li> a href="#">String Functionsa> ul> li>a href="#">Реверс строкиa>li> li>a href="#">URL кодерa>li> li>a href="#">Удаление пустых строкa>li> li>a href="#">Подсчет слов в строкеa>li> ul> li> ul>

    Первая часть готова. А теперь продолжим и создадим красивое навигационное меню.

    2. Добавьте CSS.

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

    • Установите для меню ширину и высоту с помощью свойств width и height.
    • Установите z-index, чтобы убедиться, что навигационное меню будет находится поверх остальных элементов.
    • Установите также цвет для всего меню с помощью свойства color. Можете выбрать цвет из нашего инструмента Color Picker.
    #wrap< width: 100%; height: 50px; margin: 0; z-index: 99; position: relative; background-color: #444444; >
    • Установите свойство position в значение «absolute», чтобы навигационное меню не смещало остальные элементы вниз.
    .navbar< height: 50px; padding: 0; margin: 0; position: absolute; >
    • Расположите элементы меню по горизонтали сверху от страницы с помощью свойства float со значением «left».
    .navbar li < height: auto; width: 135.8px; float: left; text-align: center; list-style: none; font: normal bold 13px/1em Arial, Verdana, Helvetica; padding: 0; margin: 0; background-color: #444444; >
    • Добавьте стиль к остальным тегам привязки.
    .navbar a< padding: 18px 0; border-left: 1px solid #ccc9c9; text-decoration: none; color: white; display: block; >
    • Добавьте стиль для фона меню, чтобы изменить цвет при наведении курсора мыши.
    .navbar li:hover, a:hover < background-color: #444444; >
    • Добавьте стиль, чтобы скрыть выпадающее меню и еще один стиль для его отображения при наведении курсора мыши на элемент главного меню.
    .navbar li ul< display: none; height: auto; margin: 0; padding: 0; > .navbar li:hover ul< display: block; >
    • Добавьте стиль к выпадающему меню.
    .navbar li ul li< background-color: #444444; >
    • Измените границы для создания эффекта главного меню.
    .navbar li ul li a< border-left: 1px solid #444444; border-right: 1px solid #444444; border-top: 1px solid #c9d4d8; border-bottom: 1px solid #444444; > .navbar li ul li a:hover< background-color: #a3a1a1; >

    А сейчас увидим, каким получилось выпадающее меню:

    Пример

    html> html> head> style> #wrap< width: 100%; height: 50px; margin: 0; z-index: 99; position: relative; background-color: #444444; > .navbar< height: 50px; padding: 0; margin: 0; position: absolute; > .navbar li< height: auto; width: 135.8px; float: left; text-align: center; list-style: none; font: normal bold 13px/1em Arial, Verdana, Helvetica; padding: 0; margin: 0; background-color: #444444; > .navbar a< padding: 18px 0; border-left: 1px solid #ccc9c9; text-decoration: none; color: white; display: block; > .navbar li:hover, a:hover < background-color: #444444; > .navbar li ul< display: none; height: auto; margin: 0; padding: 0; > .navbar li:hover ul< display: block; > .navbar li ul li < background-color: #444444; > .navbar li ul li a< border-left: 1px solid #444444; border-right: 1px solid #444444; border-top: 1px solid #c9d4d8; border-bottom: 1px solid #444444; > .navbar li ul li a:hover< background-color: #a3a1a1; > style> head> body> h2>Создайте модальное окно h2> div id="wrap"> ul class="navbar"> li> a href="#">Главная страница a> li> li> a href="#">Учебники a> ul> li>a href="#">Изучите HTML a> li> li>a href="#">Изучите CSS a> li> li>a href="#">Изучите JavaScript a> li> li> a href="#">Изучите PHP a> li> ul> li> li> a href="#">Тесты a> ul> li>a href="#" >Основы CSS a> li> li>a href="#">Основы PHP a> li> li>a href="#">Основы JavaScript a> li> ul> li> li> a href="#">Инструменты a> ul> li>a href="#">Геометрические изображения a> li> li>a href="#">Color Picker a> li> li>a href="#">Генератор паролей a> li> li>a href="#">HTML редактор a> li> li> a href="#">Base 64 a> li> ul> li> li> a href="#">Сниппеты a> ul> li>a href="#">CSS a> li> li>a href="#">JavaScript a> li> li>a href="#">Angular a> li> li> a href="#">Java a> li> ul> li> li> a href="#">String Functions a> ul> li>a href="#">Реверс строки a> li> li>a href="#">URL кодер a> li> li>a href="#">Удаление пустых строк a> li> li>a href="#">Подсчет слов в строке a> li> ul> li> ul> div> body> html>

    Рассмотрим другой пример выпадающего меню навигации:

    Пример

    html> html> head> title>Заголовок документа title> style> *< margin: 0; padding: 0; list-style-type: none; box-sizing: border-box; > body< background: url('https://images.unsplash.com/photo-1532210317995-cc56d90177d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80') center; background-size: cover; min-height: 600px; font-family: 'Helvetica Neue', sans-serif; > nav< text-align: center; > .menu< display: inline-block; > .menu > li< float: left; color: #e298e1; width: 140px; height: 40px; line-height: 40px; background: rgba(0,0,0, 0.7); cursor: pointer; font-size: 17px; > .sub-menu< transform: scale(0); transform-origin: top center; transition: all 300ms ease-in-out; > .sub-menu li< font-size: 14px; background: rgba(0,0,0, 0.8); padding: 8px 0; color: white; border-bottom: 1px solid rgba(255,255,255, 0.2); transform: scale(0); transform-origin: top center; transition: all 300ms ease-in-out; > .sub-menu li:last-child< border-bottom: 0; > .sub-menu li:hover< background: black; > .menu > li:hover .sub-menu li< transform: scale(1); > .menu > li:hover .sub-menu< transform: scale(1); > style> head> body> nav> ul class="menu"> li> Италия ul class="sub-menu"> li>Рим li> li>Милан li> li>Венеция li> li>Лацио li> li>Флоренция li> ul> li> li> Франция ul class="sub-menu"> li>Париж li> li>Бурдо li> li>Марсель li> li>Тулуза li> ul> li> li> Испания ul class="sub-menu"> li>Мадрид li> li>Валенсия li> li>Барселона li> li>Севилья li> li>Бильбао li> ul> li> li> Россия ul class="sub-menu"> li>Москва li> li>Санкт-Петербург li> li>Тула li> li>Чехов li> ul> li> li> Германия ul class="sub-menu"> li>Берлин li> li>Мюнхен li> li>Франкфурт li> li>Гамбург li> li>Дрезден li> ul> li> ul> nav> body> html>

    Выпадающее меню на HTML / CSS без использования JavaScript

    Очень часто необходимо сделать на сайте выпадающее при наведении меню. Большинство используют для этого JavaScript / Jquery. Это конечно хорошо, но такого роди задачи легко решаются с помощью HTML / CSS .

    Dropdown Menu

    Вот простой пример меню:

    Для построения меню был использован список с классом menu. Подменю сделаны списками с классом submenu.

    Теперь давайте минимально оформим наше меню стилями:

    body < font: 14px 'Verdana'; margin: 0; padding: 0; >ul < display: block; margin: 0; padding: 0; list-style: none; >ul:after < display: block; content: ' '; clear: both; float: none; >ul.menu > li < float: left; position: relative; >ul.menu > li > a < display: block; padding: 10px; color: white; background-color: red; text-decoration: none; >ul.menu > li > a:hover < background-color: black; >ul.submenu < display: none; position: absolute; width: 120px; top: 37px; left: 0; background-color: white; border: 1px solid red; >ul.submenu > li < display: block; >ul.submenu > li > a < display: block; padding: 10px; color: white; background-color: red; text-decoration: none; >ul.submenu > li > a:hover

    Для класса submenu было установлено свойство ‘display: none’. Это позволило на спрятать наше выпадающее меню.

    Теперь добавим в CSS такой код:

     ul.menu > li:hover > ul.submenu

    Это позволит показывать подменю при наведении.

    Вот и все. Просто и легко без JavaScript.

    Похожие публикации:
    1. Где купить газонокосилку makita dlm380pm2
    2. Как посчитать средневзвешенное значение в excel
    3. Какой последний honor
    4. С чего начать изучать javascript

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *