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

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

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

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

Пример

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

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

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

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

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

Пример

/* Контейнер навигации */
.navbar <
overflow: hidden;
background-color: #333;
font-family: Arial;
>

/* Ссылки в панели навигации */
.navbar a <
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>

/* Выпадающий контейнер */
.dropdown <
float: left;
overflow: hidden;
>

/* Кнопка выпадающего списка */
.dropdown .dropbtn <
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit; /* Важно для вертикального выравнивания на мобильных телефонах */
margin: 0; /* Важно для вертикального выравнивания на мобильных телефонах */
>

/* Добавить красный цвет фона для ссылок на навигационную панель при наведении курсора */
.navbar a:hover, .dropdown:hover .dropbtn <
background-color: red;
>

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

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

/* Добавить серый цвет фона для выпадающих ссылок при наведении курсора */
.dropdown-content a:hover <
background-color: #ddd;
>

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

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

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

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

Класс .dropdown — это контейнер для .dropdown-content . Поскольку это элемент <div>, а не элемент <a>, мы должны переместить его, чтобы убедиться, что он остается рядом со ссылками.

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

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

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

Кликабельно выпадающий список в навигации

Пример

Совет: Зайдите на наш учебник CSS Выпадающий, чтобы узнать больше о выпадающих списках.

Совет: Зайдите на наш учебник Кликабельное выпадающее, чтобы узнать больше о выпадающем кликабельном списке

Совет: Зайдите на наш учебник CSS Навигации, чтобы узнать больше о навигации.

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

Создаем выпадающее меню на чистом CSS

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

demosourse

Концепция

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

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

Разметка

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

Разметка достаточно проста и представляет собой серию вложенных списков <ul> . Нет никаких ID, классов и элементов. Простой ясный код.

Элемент #nav <ul> содержит серию элементов <li> . Все пункты, которые нуждаются в выпадающих подпунктах, содержат другой элемент <ul> . Обратите внимание, что элемент <ul> выпадающих подпунктов не имеет класса. Мы используем каскадные стили, сохраняя разметку как можно более чистой.

Здесь происходит магия превращения — мы используем CSS для трансформирования серии вложенных списков <ul> в отличное, простое в использовании и самодостаточное выпадающее меню.

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

Следует отметить использование position:relative; для элементов списка. Таким образом, мы сможем использовать position:absolute; для вложенных элементов <ul> .

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

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

Следующая строка гораздо более интересна. Обычно используется свойство display:none; для того, чтобы скрыть выпадающий пункт, когда он не используется. Но так как большинство программ для чтения с экрана игнорируют все, что имеет свойство display:none;, то использование такого метода очень нежелательно. Вместо этого мы используем абсолютное позиционирование <ul> для помещения его в позицию -9999px за пределами экрана, когда он не используется.

Затем следует свойство opacity:0; , для скрытия <ul> , и декларация для браузеров Webkit, для плавного вывода элемента <ul> при наведении курсора мыши.

Здесь мы устанавливаем стили по умолчанию для пунктов списка и ссылок. Обратите внимание на свойство padding-top:1px; для элемента <li> . Так как все цвета устанавливаются для элементов <a> , то установка отступа в 1px для элемента <li> сдвигает элемент <a>, и, следовательно, цветную область от границы пункта списка. Таким образом, создается иллюзия, что пункты списка разделены. Интересно, что IE не распознает шаблон <li> при наведении курсора мыши и закрывает выпадающий список. Для решения этой небольшой проблемы добавляется прозрачное изображение gif 1 х 1 px.

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

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

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

  • Выпадающий список <ul> расположен внутри элемента <li> .
  • Если навести курсор мыши на ссылку ( <a> ) в выпадающем списке ( <ul> ), то одновременно пункт списка верхнего уровня ( <li> ) тоже будет иметь состояние hover, так как выделен контент внутри него.
  • Так как технически используется состояние hover для элемента списка верхнего уровня, то #nav li:hover a действует, задавая стиля для ссылки.

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

Также добавляется правило для браузеров Webkit -webkit-transition:-webkit-transform 0.075s linear; , которое анимирует -webkit-transform с помощью затухания/появления в течение 0.075 секунды.

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

Вначале мы определяем два свойства background:; . Определение background:rgba(51,51,51,0.75); устанавливает умеренно серый фон для пункта с прозрачностью 0.75. Те браузеры, которые не распознают такое определение цвета (например, IE) будут использовать определение цвета в старом стиле в предыдущей строке.

Готово!

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
Перевел: Сергей Фастунов
Урок создан: 23 Февраля 2011
Просмотров: 470611
Правила перепечатки

5 последних уроков рубрики "CSS"

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

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

Соавтор(ы): Jack Lloyd. Джек Ллойд — автор и редактор, пишущий о технологиях для wikiHow. Имеет более двух лет опыта в написании и редактировании статей на технические темы. Энтузиаст всего связанного с технологиями и учитель английского языка.

Количество просмотров этой статьи: 41 699.

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

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

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