Создаем выпадающее меню CSS
В сегодняшней статье я хотел бы рассказать, как создать на CSS2.1 и HTML выпадающее меню. Также я покажу один небольшой трюк, при помощи которого можно будет добавлять иконку «+» к элементам навигации в том случае, если в них скрыто выпадающее меню. Для этого мы воспользуемся псевдоэлементом :only-child .
Исходный код
Демо
Для начала мы создадим базовую структуру навигационного меню, состоящего из шести пунктов:
Далее нам нужно добавить базовые CSS-стили для HTML горизонтального меню. Я оставил комментарии к каждому блоку кода:
После применения стилей у нас должно получиться нечто вроде этого:
Чтобы добавить выпадающий список к какому-либо из элементов HTML меню, нам нужно добавить <ul> внутрь элемента <li> для пункта, в котором нужно скрыть выпадающий список:
Мы добавили новый неупорядоченный список с тремя пунктами списка внутрь второго элемента <li>, который отвечает за пункт меню WordPress . Обратите внимание на то, что мы добавили <ul> после анкорного тега (<a>).
Теперь добавим CSS-стили , чтобы выпадающий список был скрыт по умолчанию, и появлялся, когда посетитель наводит курсор мыши на соответствующий родительский элемент HTML меню для сайта. После приведенного выше CSS-кода добавьте следующий фрагмент:
Если до этого момента вы все делали правильно, то при наведении курсора на пункт меню « WordPress » должны увидеть выпадающий список с тремя другими пунктами (« Themes », « Plugins », « Tutorials »):
Чтобы добавить выпадающие списки, состоящие из нескольких уровней, этот процесс нужно повторить. Определяем пункт меню, из которого нужно сделать выпадающий список, и добавляем новый <ul> между тегами <li></li>.
Взгляните на приведенный ниже HTML-код , в котором мы добавляем второй уровень выпадающего списка к пункту меню « Tutorial », который находится внутри пункта « WordPress »:
Чтобы вертикальное меню HTML отображалось корректно, нужно добавить еще пару строк CSS кода :
Если все сделано правильно, у вас должно получиться нечто вроде этого:
Этот процесс можно повторять, и добавлять новые уровни. Но не следует добавлять их к последнему элементу выпадающего списка, так как я сделал это лишь для примера.
Добавляем индикатор выпадающего списка
Перед тем, как сделать выпадающее меню в HTML до конца, разберемся с индикатором, который указывает на наличие выпадающего списка, прикрепленного к тому или иному пункту меню (знак «+» ):
Для этого мы используем псевдоэлемент CSS3 (:only-child) . В данном случае он проверяет, имеются ли в тегах <li> родительского элемента другие элементы. Если нет, то знак плюса просто убирается, так как по умолчанию он присутствует рядом со всеми пунктами. Видите + возле пунктов WordPress и Tutorials ?
Значит, вы все сделали правильно.
В завершение
Многие для достижения подобного эффекта используют jQuery или другие библиотеки. Я считаю, что в этой статье приведен самый простой и легкий вариант. Но выбор за вами.
А как вы сделали меню на HTML ? Пожалуйста, расскажите об этом в комментариях.
How to Create an HTML Dropdown Menu [+ Examples]
Learn more from HubSpot’s introductory guide to HTML & CSS.
When building out web pages, you have limited real estate to display all your content. To maximize space, you can use dropdown menus.
The ecommerce website Designer Junkie Apparel uses a dropdown menu to display all its product categories, for example. That way, visitors can either shop the whole collection or hover over the menu and click one of the options to narrow down to the products they’re most interested in.
In this post, we’ll walk through how to make a dropdown menu using HTML so you can incorporate it into your website designs.
HTML Dropdown Menu
A drop-down menu is a list of options that is only revealed when a user interacts with the menu — either by clicking or hovering over it. The options then descend vertically, or “drop down,” and disappear again once the user disengages with the menu.
Since a dropdown menu allows you to place more content on a page without cluttering it, it’s commonly used in website navigation and forms. Let’s walk through how to create a basic and hoverable dropdown in HTML below.
How to Make a Dropdown Menu in HTML
It’s easy to create a basic dropdown menu in HTML with the <select> element. Let’s break the process down step by step below.
Step 1: Create a label element.
To start, add a <label> element. In the opening tag, add a for attribute with a shorthand name for the dropdown list. For example, if the dropdown contains a list of dog names, then you could set the attribute equal to “dog-nams.” Here’s what your HTML might look like so far:
Step 2: Create a select element.
Next, add a <select> element. In the opening tag, add a name and ID attribute and set both to the same value as the for attribute in the previous step.
So, for this example, you’d set the name and ID attributes to “dogs.” Here’s the HTML:
The name attribute is required for any data from the dropdown menu to be submitted.
The id attribute, on the other hand, is required to associate the dropdown list with a label.
An Introduction to HTML for Marketers and Developers
Fill out the form to access your free guide.
Step 3: Create option elements and place them inside the select element.
Finally, you’ll add option elements between the opening and closing tags of the select element. Add as many options as you want to provide in the dropdown list. Then, add a value attribute within each opening <option> tag and set it to the option name. Here are four examples:
Here’s the HTML all together and the result:
See the Pen HTML-only Dropdown by Christina Perricone (@hubspot) on CodePen.
HTML Dropdown Default Value
The first option will be listed as the default value of the dropdown menu, as you can see in the example above. However, to change the default value, you can use the “selected” boolean attribute. Simply add it to the opening tag of the option element you want to display as the default, after its value attribute.
In the example below, you’ll see a dropdown menu for membership plans. While the options include a free and bronze plan, the boolean attribute is used to set the default value to silver.
How to Make a Hoverable Dropdown Menu
If you’d like a dropdown menu to only appear when a user hovers over an element, then you’ll need to use HTML and CSS. Let’s look at the process below.
Step 1: Create and style a div with a class name “dropdown.”
First, you’ll need to create a div and add a class attribute. Set this class attribute to “dropdown.” Then, in CSS, set this div’s display to “inline-block” and position to “relative.” This will allow the dropdown content to appear right below the dropdown button.
Step 2: Create the hoverable element.
Next, create an element that will reveal the dropdown list when a user hovers over it. For this example, we’ll create a button. Then, place it inside the div.
Here’s the HTML so far:
Step 3: Create and style the dropdown content.
Now it’s time to create the actual dropdown content, which will be hidden until the user hovers over the button. For the example below, we’ll include three links in the drop down menu. Each of the links will be wrapped in a div with the classname “dropdown-content.”
Here’s the HTML for the dropdown content:
In CSS, set this div’s display to “none,” its position to “absolute,” and its width to 100%. This will ensure the dropdown content appears right below the dropdown button and is the same width as the button. Also, set the overflow property to “auto” to enable scroll on small screens. Finally, the box-shadow property is defined to make the dropdown content stand out against the background.
Step 4: Set the dropdown menu’s hover state.
To ensure the dropdown content actually shows on hover, you need to specify the div’s display property with the pseudo-class “:hover.” This defines a special state of the element — in this case, how it appears when a user is hovering over it.
Step 5: Style the links inside the dropdown menu.
Without any styling, the links inside the dropdown menu would be bright blue and underlined, with no spacing in between. To make them look better, let’s set the font color to black, the padding property to 5px, and the text decoration property to “none.”
Step 6: Change the color of dropdown links on hover.
You can also style the links to appear differently on hover using the pseudo-class “:hover.” Say, you want the text and background color of a link to change when a user hovers over it.
Here’s the code all together and the result:
Multiselect Dropdown
In the examples above, users could only select one option from the dropdown menu. You can create a menu that allows users to select multiple options. This is called a multiselect dropdown. To create a multiselect dropdown, you will need HTML, CSS, and Javascript.
Here’s an example created by game and app developer Charlie Walter. Notice that he uses a form element.
What’s Next in Coding Dropdown Menus
Now that you know how to create some different types of dropdown menus, you’re ready to move onto the next stage: web accessibility. Dropdown menus must be accessible so that all visitors — including those with disabilities — can browse your site, submit forms, and so on.
To learn about the fundamentals of drop-down menu accessibility, check out How to Create Drop-Down and Fly-Out Menus That Are Web-Accessible.
Создаем выпадающее меню на чистом CSS
В данном уроке мы разберем, как создать выпадающее меню совсем без использования JavaScript. Простое, но функциональное решение на основе общедоступных свойств CSS можно использовать где угодно.
Концепция
Выпадающее меню служит в качестве обзора иерархии разделов, которые содержатся в пункте меню, объединяющем их. Обычно в меню перечисляются все подразделы определенной секции, если навести указатель мыши на нее.
Выпадающее меню очень удобно, когда показывает все содержание всех секции, содержащихся на сайте, и дает возможность перейти на любую страницу из любого места сайта.
Разметка
Большинство выпадающих меню основано на использовании громоздкой разметки и 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
Просмотров: 472649
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.