Как оформить раскрывающийся список с помощью только css?
Содержание:
- HTML структура
- Выпадающее меню со списком элементов на HTML
- Примеры
- Как сделать раскрывающийся список html
- Атрибуты тега select
- JS
- Добавить меню для сайта wordpress
- Установка и настройка плагина выпадающего меню WordPress
- Изображения
- Подменю и ссылки
- Горизонтальное выпадающее меню с разделителями
- CSS
- Подсказка для текстовой области
- CSS
- Часть 2
- Хак с чекбоксом
- Итоги: скачать готовый html+css код выпадающего списка меню
HTML структура
<ul class=’menu’>
<li><a href=»#»>Section 1</a></li>
<li><a href=»#»>Section 2</a>
<ul> <!—выпадающий блок—>
<li><a href=»#»>Some page</a></li>
<li><a href=»#»>Some page</a></li>
<li><a href=»#»>Some page</a></li>
</ul>
</li>
<li><a href=»#»>Section 3</a>
<ul> <!—выпадающий блок—>
<li><a href=»#»>Some page</a></li>
<li><a href=»#»>Sub-section</a>
<ul> <!—выпадающий блок второго уровня—>
<li><a href=»#»>Some page</a></li>
<li><a href=»#»>Some page</a></li>
<li><a href=»#»>Some page</a></li>
</ul>
</li>
</ul>
</li>
</ul>
на основе других HTML-тегов
Выпадающее меню со списком элементов на HTML
Вебмастера и блоггеры периодически сталкиваются с проблемой создания горизонтального меню, при наведении на родительские элементы которого будут показывать дочерние элементы.
Конечно, подобную проблему можно решить многими способами, но я бы рекомендовал обходиться без дополнительного JS-кода (и jQuery).
Я считаю так — если задачу теоретически можно решить средствами HTML и CSS без применения джейквери, нужно делать это на практике. Если вы не знаете, что писать и куда нажимать — это отдельная проблема и она не должна вас останавливать. Нужно гуглить, учиться, расти, повышать свою квалификацию как верстальщика и фронтенд-разработчика — никогда не знаешь, где эти навыки пригодятся.
Давайте покажу на примере. Помните, недавно была статья о маркированных и нумерованных списках? Сейчас эти знания пригодятся, потому что именно так мы будем делать меню. Пример кода:
<ul class=»mmenuu»>
<li><a href=#>Меню №1<a>
<ul class=»ssubmenuu»>
<li><a href=#>Субменю №1 первого меню<a><li>
<ul>
<li>
<li><a href=#>Меню №2<a>
<ul class=»ssubmenuu»>
<li><a href=#>Субменю №2 второго меню<a><li>
<li><a href=#>Субменю №2 второго меню<a><li>
<ul>
<li>
<li><a href=#>Меню №3<a>
<ul class=»ssubmenuu»>
<li><a href=#>Субменю №3 третьего меню<a><li>
<li><a href=#>Субменю №3 третьего меню<a><li>
<li><a href=#>Субменю №3 третьего меню<a><li>
<ul>
<li><ul>
Первый шаг к нашему выпадающему списку в меню сделан и вот что получилось. Результат:
Мда. Пока не очень, да? Обычный список какой-то (похож на этот), ведь классы menu и submenu я использовал, а стили не написал.
Добавлю немного CSS-магии. Пропишу прямо в html-файле — в <head><style></style></head>. CSS-код:
body {
/* Убираю отступы. */
margin0px;
/* Убираю еще отступы. */
padding0px;
/* Задаю шрифт. */
font 14px ‘Verdana’;}
ul {
/* Убираю маркеры у списка*/
list-style none;
/* Делаю элементы блочными. */
display block;
/* Убираю отступы. */
margin0px;
/* Убираю еще отступы! */
padding0px;}
ulafter {
/* Делаю элементы блочными. */
display block;
/* Убираю выравнивание. */
float none;
content ‘ ‘;
clear both;}
ul.mmenuu > li {
/* Задаю выравнивание и позиционирование. */
float left;
/* Считаем координаты относительно исходного места*/
position relative;}
ul.mmenuu > li > a {
/* Делаю элементы блочными: */
display block;
/* Задаю белый цвет. */
color #fff;
/* Задаю отступ 10px. */
padding 10px;
/* Убираю форматирование*/
text-decoration none;
/* Задаю цвет. */
background-color #da570f;}
ul.mmenuu > li > ahover {
/* Задаю цвет при наведении. */
background-color #eb9316;}
ul.ssubmenuu {
position absolute;
width 240px;
top 37px;
left0px;
/* Делаю субменю скрытыми. */
display none;
/* Цвет — белый. */
background-color white;}
ul.ssubmenuu > li {
/* Блочное расположение элементов*/
display block;}
ul.ssubmenuu > li > a {
/* Делаю элементы блочными. */
display block;
/* Убираю форматирование*/
text-decoration none;
/* Задаю отступ. */
padding 10px;
/* Задаю цвет. */
color #ffffff;
/* Еще цвет. */
background-color #da570f;}
ul.ssubmenuu > li > ahover {
/* Цвет бэкграунда при наведении. */
background-color #eb9316;
/* Задаю подчеркивание*/
text-decoration underline;}
ul.mmenuu > lihover > ul.ssubmenuu {
/* Делаю элементы блочными. */
display block;}
Результат:
Ого! В жизни не видел ничего прекраснее этого минималистичного выпадающего списка. Без JavaScript и обращения к фрилансерам!
Примеры
Оберните «контролирующий» элемент (ссылку или кнопку) выпадающего элемента и выпадающее меню классом или другим элементом с . При необходимости выпадающие элементы можно запускать из элементов или .
Выпадающие элементы одинарных кнопок
Любую одинарную кнопку можно превратить в «контролирующий» элемент (кнопка открытия\скрытия) при помощи некоторых изменений разметки. Вот как вы можете это сделать также и с элементами :
Кнопка выпадающего списка
А вот так — с элементами:
Самое забавное, что это можно сделать с любым из вариантов кнопок: «главная, вторичная, успех, инфо, предупреждение, опасность»:
Главная
Вторичная
Успех
Инфо
Предупреждение
Опасность
Выпадающие элементы кнопок с разделенными зонами
По такому же принципу создавайте выпадающие элементы в кнопках с разделенными зонами, используя почти такую же разметку, как в пункте выше, но с добавлением класса для правильного отступа вокруг выпадающего элемента.
Тут используется дополнительный класс, который уменьшает на 25% горизонтальный паддинг с обеих сторон выпадающей «каретки» и удаляет , добавленный для выпадающих элементов обычных кнопок. Эти изменения позволяют центрировать выпадающую «каретку» в разделенной кнопке и обеспечивают более подходящий размер «зоны клика» вблизи главной кнопки.
Главная
Toggle Dropdown
Вторичная
Toggle Dropdown
Успех
Toggle Dropdown
Инфо
Toggle Dropdown
Предупреждение
Toggle Dropdown
Опасность
Toggle Dropdown
Как сделать раскрывающийся список html
Для создания в html выпадающего списка существует тег <select>, который совместно с тегом <option>, позволяет создавать элементы интерфейса, содержащие перечень параметров в виде выпадающего списка с возможностью единичного или множественного выбора.
Перечень атрибутов для тега <select>:
autofocus – установка фокуса на элементе при загрузки страницыdisabled – отключение элементаmultiple – множественный выбор элементов раскрывающегося списка htmlrequired – делает обязательным для заполненияsize – определяет высоту в закрытом состоянии. Задается числовым значением.form – подключение к форме обратной связиname – имя, для получения выбранного значения и передачи его в скрипт для обработки
Для последних трёх значение указывается в кавычках, все остальные просто дописываются к тегу <select>
Атрибуты для тега <option>:
disabled – позволят заблокировать пункт для выбораlabel — дает возможность задать метку для элементаselected – устанавливает пункт выбранным по умолчаниюvalue – позволяет задать значение для пункта, которое будет передано в форму для отправки или в скрипта для обработки.
Ниже я приведу несколько примеров использования атрибутов для тегов <select> и <option>
Пример самого простого раскрывающегося списка html:
Код:
PHP
<select>
<option>Опция 1</option>
<option>Опция 2</option>
</select>
|
1 |
<select> <option>Опция1<option> <option>Опция2<option> <select> |
Размер выпадающего элемента, то есть, количество отображаемых элементов зависит от заданного параметра size. В случае, если он не задан, то в раскрывающемся списке html отображается по умолчанию 1 элемент.
Ширина элемента по умолчанию определяется исходя из ширины самой длинной записи. Так же ее можно изменять CSS-стилями.
Атрибуты тега select
| Атрибут | Значения | Описание |
|---|---|---|
| autofocus | не указывается / autofocus |
Логический атрибут. Если указан, при загрузке документа фокус будет переведен на список. |
| disabled | не указывается / disabled |
Логический атрибут. Если указан, делает список неактивным. Данные списка, отмеченного этим атрибутом, не будут переданы на сервер при отправке формы. Атрибут также отключает возможность изменения состояния списка пользователем (например, изменение выбранного пункта). |
| form | id формы |
Указывает на форму, к которой относится список. Используется, если список <select> находится вне HTML кода формы. Если список находится внутри тега <form>, то использовать атрибут form не нужно, список по умолчанию привязан к форме, внутри которой находится. |
| multiple | не указывается / multiple |
Логический атрибут. Открывает возможность множественного выбора. Если указан, вместо выпадающего списка будет выведен список с возможностью выбрать несколько значений (пунктов) одновременно. Количество элементов, доступных без скроллинга регулируется атрибутом size. |
| name | текст |
Имя списка. Используется при передаче данных формы на сервер. Значение списка будет передано в переменной, имеющей имя, указанное в этом атрибуте. |
| required | не указывается / required |
Логический атрибут. Если указан, список будет определен как обязательный для заполнения (обязательный для выбора). Форма не будет отправлена на сервер, если в таком списке не будет выбрано ни одно значение. Заполнение контролируется браузером. При попытке отправить форму с незаполненным обязательным списком браузеры обычно выводят на экран ошибку заполнения. |
| size | число |
Количество пунктов списка, одновременно выводимых на экран. Для выпадающего списка используется значение 1. Это значение по умолчанию. Если значение больше чем 1, вместо выпадающего списка будет выведен список со скроллингом. |
JS
Подключите jQuery и скрипт common.js в head.
<script src=»js/jquery-3.2.1.min.js»></script>
<script src=»js/common.js»></script>
|
1 |
<script src=»js/jquery-3.2.1.min.js»></script> <script src=»js/common.js»></script> |
common.js
$(document).ready(function() {
$(‘html’).removeClass(‘no-js’);
$(‘.menu-click a’).on(‘click’, function () {
var el = $(this);
el.parent().toggleClass(‘menu-active’);
el.parent().siblings(‘.menu-click.menu-active’).removeClass(‘menu-active’);
});
});
|
1 |
$(document).ready(function(){ $(‘html’).removeClass(‘no-js’); $(‘.menu-click a’).on(‘click’,function(){ varel=$(this); el.parent().toggleClass(‘menu-active’); el.parent().siblings(‘.menu-click.menu-active’).removeClass(‘menu-active’); }); }); |
Добавить меню для сайта wordpress
Обычно, я рассказываю в своих уроках о CMS WordPress, так как позиционирую себя как специалиста по Вордпресс. В этом уроке, также хотелось бы поговорить о выпадающих меню WP.
По сути, выпадающее меню wordpress ни чем не отличается от менюшек для остальных CMS, главное правильно вывести и добавить его.
Бывает приносят верстку, а там вот такой чудо хтмл код:
Ну и как такое чудо, можно по человечески вставить в WP – по сути без переделки никак. Ну и начинается возня с заказчиком. Он же верстку в Равшана с Джамшутом заказал, так сказать бюджетный вариант на базе говнокода.
В этой записи можно посмотреть как правильно в wordpress добавить меню. Конкретно в этом посте нас интересует работа функции wordpress:
Все примеры выше, выпадающее меню на списках, идеально подходят для установки на wordpress.
Краткая инструкция выпадающее меню wordpress – установка
1) Находим подходящий для себя шаблон меню выше.
2) Скачиваем пример к себе на комп, разархивируем его.
3) На место, где будет выводится меню устанавливаем хтмл код, который отвечает за меню. Он начинается и заканчивается в моих примерах тегом <nav></nav> (тег и идентификатор обязательные для копирования, иначе стили не будут работать)
4) Если у примера есть javascript, его нужно подключить в ваш шаблон. Библиотеку jQuery подключать не нужно, так как она у WP подключается автоматически. Главное добавлять код после функции wp_head().
5) Стили из примера нужно скопировать у файл style.css вашей темы.
6) Для вывода меню используем функцию wp_nav_menu(), ее нужно вставить вместо хтмл который находится между <nav> и </nav>.
На этом у меня все, в качестве спасибо можно поделиться ссылкой со своими друзьями в соц. сетях:
Следите за этим постом, по мере возможности, я буду добавлять сюда ссылки на новые шаблоны выпадающих меню.
Установка и настройка плагина выпадающего меню WordPress
Итак, для создания выпадающего меню WordPress нам для начала нужно установить плагин Mega Main Menu из репозитория.
- 1.Заходим в админку WordPress и переходим в раздел «Плагины» => «Добавить новый».
-
2.В строку поиска вставляем название, ждем, пока пройдет поиск, в результатах поиска выбираем нужный нам плагин и жмем на кнопку «Установить», а затем «Активировать».
-
3.Далее, нам нужно перейти в раздел «Внешний вид» => «Меню» и здесь создать новое, или выбрать уже существующее меню, которое мы хотим сделать выпадающим. Для наглядности и экономии времени я заранее сделала заготовку, которое имеет в разделе «Каталог» два уровня вложенности.
-
4.Для начала работы с плагином нам нужно включить его в левой панели управления, в разделе «Настройка Max Mega Menu»
-
5.Здесь же мы можем в графе «Событие» выбрать, при каких действиях пользователя будет открываться пункты меню.
Доступно для выбора три варианта:
Hover intent – тоже самое, что и «Наведение мышки»
Наведение мышки — открывается при наведении указателя мышки на пункте
Клик мышки – открывается при клике указателем мышки по пункту
-
6.В графе «Эффект» мы можем выбрать эффект при открытии выпадающего меню WordPress
И скорость, с которой оно будет открываться:
-
7.Далее, при наведении указателя мышки на пункт меню, возле его названия появляется синяя кнопка «Мега Меню», нажав на которую мы откроем окно настроек для данного пункта.
-
8.Во вкладке открывшегося окна «Мега Меню» мы можем:
-
В разделе «Режим отображения» выбрать способ расположения элементов. Если мы выберем пункт «Выпадающее меню», то в результате мы получим стандартное выпадающее меню WordPress, где пункты будут открываться при наведении на них указателя мышки, либо клике по ним.
Если же мы выберем пункт «Мега Меню» то в раскрывающейся области подпункты будут располагаться в столбик:
-
В раскрывающемся списке, который расположен рядом с настройкой режима отображения мы можем выбрать и добавить в открывающуюся область любой из доступных виджетов
-
В следующем раскрывающемся списке мы можем изменить количество столбцов, в которых будут располагаться наши пункты и добавленные виджеты.
-
-
9.На вкладке «Settings» вы можете скрыть надпись или стрелку, отключить ссылку, отключить отображение элемента на мобильных устройствах или компьютерах, задать настройки выравнивания для самого элемента, иконки и подменю, а так же можно отключить отображение подменю на мобильных устройствах.
-
10. На следующей вкладке мы можем задать иконку для пункта меню.
В бесплатной версии плагина доступны для использования только стандартные иконки. Иконки Font Awesome, Genericons и возможность добавления своих иконок доступна только для Pro-версии.
-
11.Далее нам нужно перейти в раздел «Мега Меню» на главной странице WordPress. Здесь нам нужны две вкладки: «Темы меню» и «Локации меню»
-
12. На вкладке «Темы меню» нам нужно задать тему цветового оформления для нашего выпадающего меню WordPress, так как в этом плагине нет стандартных заготовок.
Переключаясь по вкладкам раздела вам нужно задать настройки цвета, отступы, высоту, шрифты, рамки, тени и другие визуальные настройки в соответствии с цветовым оформлением вашего сайта. После того, как вы зададите все настройки, не забудьте нажать на кнопку «Сохранить изменения».
Изображения
Слайд-шоуГалерея слайд-шоуМодальные изображенияЛайтбоксАдаптивная Сетка изображенияСетка изображенияГалерея вкладокОверлей изображенияСлайд с наложенным изображениемМасштабирование наложения изображенияНазвание наложения изображенияЗначок наложения изображенияЭффекты изображенияЧерно-белое изображениеТекст изображенияТекстовые блоки изображенийПрозрачный текст изображенияПолное изображение страницыФорма на картинкеГерой изображениеПараллельные изображенияОкругленные изображенияАватар изображенияАдаптивные образыЦентрировать изображенияМиниатюрыПознакомьтесь с командойЛипкое изображениеОтражение изображенияВстряхните изображениеПортфолио галереяПортфолио с фильтрациейМасштабирование изображенияИзображение увеличительное стеклоПолзунок сравнения изображений
Подменю и ссылки
Вы можете заметить, что в одном из элементов списка есть класс .menu-item-has-children, который содержит подменю. Кроме того, сразу под ссылкой размещен тег span с классом .sidebar-menu-arrow.
span имеет ::after pseudo-element и содержит стрелку FontAwesome. По умолчанию подменю скрыто и будет видно только при нажатии на стрелку. Вот как мы это можем сделать с jQuery:
Когда мы нажимаем на стрелку, мы вызываем функцию, которая в свою очередь нацелена на следующий элемент сразу после span (в нашем случае это подменю) и делает его видимым. Функцию, которую мы используем — slideToggle. Она заставляет элемент появляться и исчезать. Функция в нашем примере имеет один параметр — длительность анимации.
Элементы меню в примере имеют hover-эффект. Он создается с использованием ::after pseudo-element. Код выглядит так:
pseudo-element содержит элемент block level внизу каждой ссылки с полной шириной и высотой 0.15em. Выглядит все это как подчеркивание. Особенность заключается в том, что мы не просто применяем цвет фона к линии, мы используем функцию linear-gradient() на фоновом изображении. Хотя эта функция предназначена для создания цветовых градиентов, мы можем менять цвет, указав нужные проценты.
Половина лини здесь прозрачная, а вторая половина — желтая. Сделав размер фона 200%, мы удваиваем ширину нашего блока. Теперь прозрачная часть занимает всю ширину ссылки, а желтая часть перемещается влево и становится незаметной. Мы меняем положение фона при наведении на -100%. Теперь желтая часть становится видимой, а прозрачная — скрыта.
Вместо прозрачной части вы можете использовать любой другой цвет. Вы также можете поэкспериментировать с градиентами.
Демо | Скачать
Каждый из рассмотренных нами элементов работает как единое целое. Вы можете создать такое меню, используя любой дизайн сайта из коллекции TemplateMonster. Как видите, сделать это проще, чем можно себе представить. Удачи в создании профессиональных и удобных для пользователей сайтов!
Горизонтальное выпадающее меню с разделителями
Существует несколько десятков вариантов, как на чистом CSS добавить полоску (разделитель) между пунктами меню. Варианты, которые используют ::before или ::after , или куда проще border-left, border-right я дублировать не буду.
Бывают ситуации, когда верстка построена так чудесненько, что без jquery не обойтись.
Html код у нас остается прежним, мы только подключаем в самом начале библиотеку jQuery и файл, который ее использует:
Сразу после </title>.
Как вы поняли, нужно создать файл script-menu-3.js и туда закинуть вот такой маленький код:
Стили CSS для такого меню нужно оставить те что есть, + забросить вот этот кусок в конец:
Можно просмотреть в режиме демо или скачать шаблон горизонтального меню ниже:
Скачать пример
Преимуществами такого решения является:
- меню будет тянутся динамически;
- отступы от разделителя до пункта везде одинаковые;
- более красивое и гибкое оформление.
CSS
#bar {
background: #3F5883 -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
border-radius: 3px;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.25);
height: 50px;
list-style: none;
margin: 20px auto;
padding: 0 10px;
width: 40%;
}
#bar > li {
float: left;
margin-right: 30px;
position: relative;
}
#bar > li > a {
color: #fff;
display: block;
font-weight: bold;
margin-right: 0;
padding: 15px 0;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.25);
-webkit-transition: all 0.25s;
}
.menu .submenu {
background: #fff;
border-radius: 0px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
left: -12px;
list-style: none;
margin: 0;
opacity: 0;
padding: 0;
position: absolute;
top: 38px;
-webkit-transition: all 0.25s;
transition: all 0.25s;
visibility: hidden;
width: 200px;
}
.no-js .menu:hover .submenu,
.menu-hover:hover .submenu,
.menu-click.menu-active .submenu {
opacity: 1;
top: 100%;
visibility: visible;
}
.menu .submenu:before,
.menu .submenu::before {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
content: «»;
height: 0;
left: 24px;
position: absolute;
top: -6px;
width: 0;
}
.menu .submenu li {
border-bottom: 1px solid #EBEBEB;
padding: 7px 10px;
}
.menu .submenu li:last-child {
border-bottom: none;
}
.menu .submenu a {
color: #777;
display: inline-block;
line-height: 1.2em;
padding: 5px 0;
text-decoration: none;
}
.menu .submenu a:hover {
color: #3F5883;
}
.menu-right .submenu {
left: auto;
right: -12px;
text-align: right;
}
.menu-right .submenu:before,
.menu-right .submenu::before {
left: auto;
right: 24px;
}
|
1 |
#bar { background#3F5883 -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); border-radius3px; box-shadowinset1pxrgba(,,,0.1),1px1pxrgba(,,,0.25); height50px; list-stylenone; margin20pxauto; padding10px; width40%; } floatleft; margin-right30px; positionrelative; } color#fff; displayblock; font-weightbold; margin-right; padding15px; text-decorationnone; text-shadow-1pxrgba(,,,0.25); -webkit-transitionall0.25s; } .menu.submenu{ background#fff; border-radius0px; box-shadow1px1pxrgba(,,,0.5); left-12px; list-stylenone; margin; opacity; padding; positionabsolute; top38px; -webkit-transitionall0.25s; transitionall0.25s; visibilityhidden; width200px; } .no-js.menuhover.submenu, .menu-hoverhover.submenu, .menu-click.menu-active.submenu{ opacity1; top100%; visibilityvisible; } .menu.submenubefore, .menu.submenu::before{ border-left6pxsolid transparent; border-right6pxsolid transparent; border-bottom6pxsolid white; content»»; height; left24px; positionabsolute; top-6px; width; } .menu.submenu li{ border-bottom1pxsolid#EBEBEB; padding7px10px; } .menu.submenu lilast-child{ border-bottomnone; } .menu.submenua{ color#777; displayinline-block; line-height1.2em; padding5px; text-decorationnone; } .menu.submenuahover{ color#3F5883; } .menu-right.submenu{ leftauto; right-12px; text-alignright; } .menu-right.submenubefore, .menu-right.submenu::before{ leftauto; right24px; } |
Подсказка для текстовой области
И так мы с Вами рассмотрим заключительный пример и перейдем к практическому заданию статьи этого учебника.
Благодаря атрибуту placeholder (HTML тега <textarea>) допускается указывать текст подсказки, которая описывает ожидаемое значение для ввода пользователем в элемент.
Текст подсказки скрывается, когда пользователь вводит значение (любой символ) в текстовое поле, если его убрать, то подсказка будет отображена снова.
Рассмотрим пример использования:
<!DOCTYPE html> <html> <head> <title>Атрибуты placeholder и readonly тега <textarea></title> </head> <body> <form> <textarea placeholder = "Введите информацию в текстовое поле"></textarea> <textarea placeholder = "Поле доступно только для чтения" readonly></textarea><br> <input type = "submit" name = "submitInfo" value = "отправить"> </form> </body> </html>
В этом примере мы создали две текстовые области (элемент <textarea>), для первой и второй области атрибутом placeholder мы задали подсказку для пользователя, которая отображается бледным цветом текста внутри элемента. Для второй текстовой области атрибутом readonly мы указали, что оно будет доступно только для чтения (содержимое не может быть изменено).
Обратите внимание на то, что если текстовое поле доступно только для чтения, то при этом содержимое не может быть изменено, но пользователь при этом может перейти к содержимому, выделить и скопировать его. Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент с типом кнопки «отправка формы»: type = «submit»)
Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки «отправка формы»: type = «submit»).
Результат нашего примера:
Пример использования атрибутов placeholder и readonly тега <textarea>.
CSS
Пришло время заняться непосредственно выпадающим меню. Сначала, импортируем шрифты, которые будут использоваться для элементов нашего меню и заголовков:
@font-face
{
font-family: Museo500-Regular;
src: url('../fonts/Museo500-Regular.otf');
}
Теперь добавим стили для настройки общего вида: background с шестнадцатеричным значением #263544 и font face со значением Museo 500. Затем, установим несколько стилей для тегов <a> и <h2>:
body {background: #263544; font-family: Museo500-Regular;}
a{text-decoration: none;}
h2 {color: #fff; font-size: 22px; margin: 0 24px;}
Теперь, напишем стили для контейнеров иконок, в которых мы будем скрывать текст меню. Используя неупорядоченный список, определим класс icon-menu, где будем хранить все наши иконки меню.
Следующим будет класс icon-box с размерами 120 на 120 пикселей. Далее, обратимся по имени класса к каждому пункту меню и изменим для каждого из них значение свойства background:
ul.icon-menu {margin-top:29px;}
li.icon-box {width: 120px; height: 120px; list-style: none; left: -47px;position: relative; margin-bottom: 3px;}
li.icon-box.home {background: #e74c3c;}
li.icon-box.aboutme {background: #1dd0ad;}
li.icon-box.portfolio {background: #3498db;}
li.icon-box.blog {background: #f1c40f;}
li.icon-box.contact {background: #f39c12;}
.icon-box h2{Museo500-Regular; font-size: 20px; text-shadow: 1px 1px 2pxrgba(150, 150, 150, 1);}
.icon-box a {display: block;}
Затем, установим позиции иконок меню, используя спрайтовое изображение. Мы будем использовать тег <span> и присваивать иконку согласно классам для манипуляции позицией спрайтового изображения:
span.icon {display: inline-block; background: url('../img/icon-sprites.png')no-repeat; width: 32px; height: 32px; margin: 43px 45px;}
span.icon.home {background-position: 0px 0px;}
span.icon.aboutme {background-position: -36px 0px;}
span.icon.portfolio {background-position: -72px 0px;}
span.icon.blog {background-position: -109px 0px;}
span.icon.contact {background-position: -145px 0px;}
Для имени пункта меню будем использовать тег <h2>. Зададим ему position в значении absolute и подвинем влево. Используя свойство z-index, скроем текст под иконкой и контейнером.
Используя атрибут transition, мы можем добавить эффект плавной замены одного стиля другим без использования Flash-анимации или JavaScript.
Это значит, что каждый раз, когда курсор мыши пересекает иконку, она смещает свою позицию вправо добавлением значения свойства margin с использованием плавной анимации:
.icon-box.home h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #E74C3C;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #a7382d;
}
.icon-box.home a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
.icon-box.aboutme h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #1dd0ad;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #0d866e;
}
.icon-box.aboutme a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
.icon-box.portfolio h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #3498db;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #2177b1;
}
.icon-box.portfolio a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
.icon-box.blog h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #f1c40f;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #b8960e;
}
.icon-box.blog a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
.icon-box.contact h2 {
z-index: -999;
position: absolute;
top: 0;
left: 0;
opacity: 0;
background: #f39c12;
line-height: 120px;
width: 120px;
-webkit-transition: all .3s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
border-left: 3px solid #bc780d;
}
.icon-box.contact a:hover h2 {
opacity: 1; left: 120px; margin: 0;
text-align: center;
}
Вот собственно и все! С помощью приведенного выше кода, вы получаете то же самое, что было показано в демонстрационном примере в начале статьи.
Часть 2
Составление CSS
- Откройте CSS. Разместите ссылку на CSS стили в разделе <head> HTML-документа, если вы еще этого не сделали. В этой статье мы не будем касаться основных свойств CSS, таких как настройка шрифта и цвет фона:
- Добавьте код clearfix. Помните класс «clearfix«, который мы добавили к списку меню? Как правило, элементы HTML раскрывающегося списка имеют прозрачный фон и могут раздвигать другие элементы. Несложная настройка CSS поможет исправить эту проблему. Вот простое и красивое решение, хотя оно не поддерживается в Internet Explorer 7 и более ранних версиях:
.clearfix:after {
content: "";
display: table;
}
- Создание базовой структуры. Представленный ниже код задает размещение меню вдоль верхней части страницы и скрывает выпадающие элементы. Это только каркас общей структуры, который позволяет сосредоточиться на других элементах раскрывающегося свертывающегося списка HTML. Вы можете позже расширить его дополнительными свойствами CSS, такими как отступы и интервалы:
.nav-wrapper {
width:100%;
background: #999;
}
.nav-menu {
position:relative;
display:inline-block;
}
.nav-menu li {
display: inline;
list-style-type: none;
}
.sub-menu {
position:absolute;
display:none;
background: #ccc;
}
- Задаем вывод выпадающих элементов при наведении курсора мыши. Элементы в выпадающем списке по умолчанию скрыты. Вот как реализуется вывод вложенного списка при наведении курсора мыши на родительский элемент:
.nav-menu ul li:hover > ul {
display:inline-block;
}
Если пункты древовидного раскрывающегося списка HTML меню ведут к дополнительным подчиненным выпадающим меню, то любые свойства, добавляемые здесь, будут влиять на них. Если вы хотите задать стиль только для выпадающих меню первого уровня, используйте вместо этого «.nav-menu > ul«:
- Маркирование выпадающих меню стрелками. Веб-дизайнеры, как правило, показывают, что элемент содержит вложенное выпадающее меню, с помощью стрелки вниз. Следующий код добавляет стрелку к каждому элементу меню:
.nav-menu > ul > li:after {
content: "25BC"; /*escaped unicode for the down arrow*/
font-size: .5em;
display: inline;
position: relative;
}
Изменить положение стрелки можно с помощью свойств up, bottom, right или left.
Если не все пункты раскрывающегося списка HTML содержат вложенные выпадающие меню, не задавайте стиль для всего класса nav-menu. Вместо этого добавьте еще один класс (например, dropdown) для каждого элемента li, к которому нужно добавить стрелку. Укажите этот класс, а не приведенный в коде выше:
- Настройка отступов, фона и других свойств. Теперь наше меню является функциональным, но мы можем несколько улучшить его внешний вид с помощью редактирования кода CSS.
Подсказки
- Если вы хотите добавить выпадающее меню в форму, HTML 5 позволяет легко сделать это с помощью элемента ;
- Ссылка <a href=»#»> прокручивает страницу вверх, в то время как ссылка на несуществующий анкор, такая как <a href=»#!»>, не будет прокручивать страницу. Если это кажется вам не слишком аккуратным, то можно изменить внешний вид курсора с помощью CSS.
Данная публикация является переводом статьи «How to Create a Dropdown Menu in HTML and CSS» , подготовленная редакцией проекта.
Хак с чекбоксом
Нам нужно переключить отображение меню, используя только CSS. Лучший способ сделать это – использовать скрытый чекбокса.
Мы используем иконку гамбургера в качестве метки для этого чекбокса. После нажатия метки чекбокс будет выбран. Поэтому мы можем использовать селектор псевдокласса :checked, чтобы отобразить меню!
HTML
В файле index.html добавьте элемент checkbox перед элементом nav:
<input type="checkbox" id="checkbox">
В этом коде for=”checkbox” обеспечивает, чтобы чекбокс был установлен / снят при каждом нажатии на эту метку.
CSS
Сначала нужно скрыть чекбокс. Для этого в файл styles.css добавьте следующий код:
#checkbox {
display: none;
}
Это сердце кода:
#checkbox:checked ~ nav ul {
max-height: 200px;
padding: 15px 0;
transition: all 0.5s;
}
Символ ~ является общим селектором следующего смежного элемента, который отделяет два селектора (#checkbox:checked и nav ul). А также соответствует второму элементу, только если он следует за первым. Когда чекбокс установлен, меню сдвигается вниз, потому что значение свойства max-height изменяется от 0 до большого числа.
Итоги: скачать готовый html+css код выпадающего списка меню
Как вы могли убедиться на вышеприведенных примерах, выпадающий список без особых проблем делается на обычном HTML.
Надеюсь один из списков украсит меню вашего проекта или хотя бы будет использован в качестве основы.
Я подготовил для вас архив, который вы можете скачать. Там все 4 выпадающих списка — html код и css стили прямо в файле. Там думаю разберетесь.
Превью содержимого файла:
Скачать:
P.S. Ну а если вы вдруг неправильно написали поисковый запрос и зашли не туда (не нашли то чего нужно), не расстраивайтесь — у меня есть пара видео, где при помощи <select> и <option> в HTML страницу вставляются выпадающие списки. Видео 1:
Видео 2:
