Главная » Языки программирования

Выпадающее меню html css при наведении

Содержание
  1. How TO — Hoverable Dropdown
  2. Dropdown
  3. Create A Hoverable Dropdown
  4. Example
  5. Example Explained
  6. Example
  7. Example Explained
  8. Создаем выпадающее меню CSS
  9. Добавляем индикатор выпадающего списка
  10. В завершение
  11. Как сделать — Выпадающее меню
  12. Создать выпадающее меню
  13. Пример
  14. Объяснение примера
  15. Пример
  16. Объяснение примера
  17. Создаем выпадающее меню на чистом CSS
  18. Концепция
  19. Разметка
  20. CSS
  21. Вложенные списки
  22. Готово!
  23. 5 последних уроков рубрики «CSS»
  24. Забавные эффекты для букв
  25. Реализация забавных подсказок
  26. Анимированные буквы
  27. Солнцезащитные очки от первого лица

How TO — Hoverable Dropdown

Learn how to create a hoverable dropdown menu with CSS.

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:

Create A Hoverable Dropdown

Create a dropdown menu that appears when the user moves the mouse over an element.

Step 1) Add HTML:

Example

Example Explained

Use any element to open the dropdown menu, e.g. a , or

element.

Use a container element (like ) to create the dropdown menu and add the dropdown links inside it.

Wrap a element around the button and the to position the dropdown menu correctly with CSS.

Step 2) Add CSS:

Example

/* Dropdown Button */
.dropbtn background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
>

/* The container — needed to position the dropdown content */
.dropdown position: relative;
display: inline-block;
>

/* Dropdown Content (Hidden by Default) */
.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;
>

/* Links inside the dropdown */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>

/* Change color of dropdown links on hover */
.dropdown-content a:hover

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn

Example Explained

We have styled the dropdown button with a background-color, padding, etc.

The .dropdown class uses position:relative , which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute ).

The .dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 160px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).

Instead of using a border, we have used the box-shadow property to make the dropdown menu look like a «card». We also use z-index to place the dropdown in front of other elements.

The :hover selector is used to show the dropdown menu when the user moves the mouse over the dropdown button.

Источник

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

В сегодняшней статье я хотел бы рассказать, как создать на CSS2.1 и HTML выпадающее меню. Также я покажу один небольшой трюк, при помощи которого можно будет добавлять иконку «+» к элементам навигации в том случае, если в них скрыто выпадающее меню. Для этого мы воспользуемся псевдоэлементом :only-child .

Для начала мы создадим базовую структуру навигационного меню, состоящего из шести пунктов:

Далее нам нужно добавить базовые CSS-стили для HTML горизонтального меню. Я оставил комментарии к каждому блоку кода:

/* задаем цвет фона для контейнера nav. */ nav < margin: 100px 0; background-color: #E64A19; >/* убираем отступы и поля, а также list-style для «ul», * и добавляем «position:relative» */ nav ul < padding:0; margin:0; list-style: none; position: relative; >/* применяем inline-block позиционирование к элементам навигации */ nav ul li < margin: 0px -7px 0 0; display:inline-block; background-color: #E64A19; >/* стилизуем ссылки */ nav a < display:block; padding:0 10px; color:#FFF; font-size:20px; line-height: 60px; text-decoration:none; >/* изменяем цвет фона при наведении курсора */ nav a:hover

После применения стилей у нас должно получиться нечто вроде этого:

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

Теперь добавим CSS-стили , чтобы выпадающий список был скрыт по умолчанию, и появлялся, когда посетитель наводит курсор мыши на соответствующий родительский элемент HTML меню для сайта. После приведенного выше CSS-кода добавьте следующий фрагмент:

/* скрываем выпадающие списки по умолчанию * и задаем абсолютное позиционирование */ nav ul ul < display: none; position: absolute; top: 100%; >/* отображаем выпадающий список при наведении */ nav ul li:hover > ul < display:inherit; >/* первый уровень выпадающего списка */ nav ul ul li

Если до этого момента вы все делали правильно, то при наведении курсора на пункт меню « WordPress » должны увидеть выпадающий список с тремя другими пунктами (« Themes », « Plugins », « Tutorials »):

Взгляните на приведенный ниже HTML-код , в котором мы добавляем второй уровень выпадающего списка к пункту меню « Tutorial », который находится внутри пункта « WordPress »:

Чтобы вертикальное меню HTML отображалось корректно, нужно добавить еще пару строк CSS кода :

/* второй, третий и последующие уровни * смещаем 2 и 3 уровни влево * на значение длины первого уровня. */ nav ul ul ul

Если все сделано правильно, у вас должно получиться нечто вроде этого:

Этот процесс можно повторять, и добавлять новые уровни. Но не следует добавлять их к последнему элементу выпадающего списка, так как я сделал это лишь для примера.

Добавляем индикатор выпадающего списка

Перед тем, как сделать выпадающее меню в HTML до конца, разберемся с индикатором, который указывает на наличие выпадающего списка, прикрепленного к тому или иному пункту меню (знак «+» ):

/* измените ‘ +’ на любой другой символ, если нужно */ li > a:after < content: ' +'; >li > a:only-child:after

Добавляем индикатор выпадающего списка

Значит, вы все сделали правильно.

В завершение

Многие для достижения подобного эффекта используют jQuery или другие библиотеки. Я считаю, что в этой статье приведен самый простой и легкий вариант. Но выбор за вами.

А как вы сделали меню на HTML ? Пожалуйста, расскажите об этом в комментариях.

Источник

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

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

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

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

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

Пример

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

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

.

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

Оберните элемент вокруг кнопки и , чтобы правильно расположить выпадающее меню с помощью 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

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

demosourse

Концепция

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

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

Разметка

Большинство выпадающих меню основано на использовании громоздкой разметки и Javascript. Наш вариант будет использовать простую структуру HTML кода и 19 строк CSS, с небольшим вкраплением CSS3 для придания внешнего лоска.

    . Нет никаких ID, классов и элементов. Простой ясный код.

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

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

      CSS

        в отличное, простое в использовании и самодостаточное выпадающее меню.

      /*------------------------------------*\ НАВИГАЦИЯ \*------------------------------------*/ #nav < float:left; width:100%; list-style:none; font-weight:bold; margin-bottom:10px; >#nav li < float:left; margin-right:10px; position:relative; display:block; >#nav li a < display:block; padding:5px; color:#fff; background:#333; text-decoration:none; text-shadow:1px 1px 1px rgba(0,0,0,0.75); /* Тень текста, чтобы приподнять его на немного */ -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; >#nav li a:hover < color:#fff; background:#6b0c36; background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */ text-decoration:underline; >/*--- ВЫПАДАЮЩИЕ ПУНКТЫ ---*/ #nav ul < list-style:none; position:absolute; left:-9999px; /* Скрываем за экраном, когда не нужно (данный метод лучше, чем display:none;) */ opacity:0; /* Устанавливаем начальное состояние прозрачности */ -webkit-transition:0.25s linear opacity; /* В Webkit выпадающие пункты будут проявляться */ >#nav ul li < padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */ float:none; background:url(dot.gif); >#nav ul a < white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */ display:block; >#nav li:hover ul < /* Выводим выпадающий пункт при наведении курсора */ left:0; /* Приносим его обратно на экран, когда нужно */ opacity:1; /* Делаем непрозрачным */ >#nav li:hover a < /* Устанавливаем стили для верхнего уровня, когда выводится выпадающий список */ background:#6b0c36; background:rgba(107,12,54,0.75); /* Выглядит полупрозрачным */ text-decoration:underline; >#nav li:hover ul a < /* Изменяем некоторые стили верхнего уровня при выводе выпадающего пункта */ text-decoration:none; -webkit-transition:-webkit-transform 0.075s linear; >#nav li:hover ul li a:hover < /* Устанавливаем стили для выпадающих пунктов, когда курсор наводится на конкретный пункт */ background:#333; background:rgba(51,51,51,0.75); /* Будет полупрозрачным */ text-decoration:underline; -moz-transform:scale(1.05); -webkit-transform:scale(1.05); >

      Первый раздел кода весьма простой — мы устанавливаем обычное горизонтальное меню. Но, обратите внимание, что селекторы #nav li и #nav li a выделяют все элементы списка и ссылки в выпадающих пунктах тоже. Использование каскадов.

      Вложенные списки

        в пункт верхнего уровня. Очевидно, что нужно удалить метки пунктов списка с помощью list-style:none; , и установить position:absolute; для позиционирования выпадающих подпунктов под пунктом списка, который их содержит.

        для помещения его в позицию -9999px за пределами экрана, когда он не используется.

        , и декларация для браузеров Webkit, для плавного вывода элемента

          при наведении курсора мыши. 
        #nav ul li < padding-top:1px; /* Вводим отступ между li чтобы создать иллюзию разделенных пунктов меню */ float:none; background:url(dot.gif); >#nav ul a < white-space:nowrap; /* Останавливаем перенос текста и создаем многострочный выпадающий пункт */ display:block; >#nav li:hover ul < /* Выводим выпадающий пункт при наведении курсора */ left:0; /* Приносим его обратно на экран, когда нужно */ opacity:1; /* Делаем непрозрачным */ >

        Для элемента #nav ul a мы устанавливаем свойство white-space:nowrap; для предотвращения переноса строк на другую строку.

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

        #nav li:hover a определяет, что произойдет со ссылкой верхнего уровня, когда наследник будет иметь состояние hover:

Оцените статью
© 2024 Программирование