Выбор из выпадающего списка в HTML. Элементы HTML форм — выпадающий список (теги select, option, optgroup), текстовое поле (textarea), а также применение label, fieldset и legend Выпадающий список при наведения css

Горизонтальное выпадающее меню используется для упорядочения структуры навигации по сайту. Оптимальное количество уровней вложения — один-два. Чем меньше уровней вложений, тем легче посетителю сайта найти нужную информацию. Как создать обычное горизонтальное меню, подробно изложено в .

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

1. HTML-разметка и базовые стили для выпадающего меню с одним уровнем вложения

HTML-разметка горизонтального выпадающего меню отличается от обычного меню тем, что к нужному элементу списка

добавляется вложенный список

Для позиционирования вложенного меню относительно основного меню объявляются следующие стили:
— для элемента списка, в который вложен выпадающий список: li {position: relative;} ;
— для выпадающего меню ul {position: absolute;} , а также значения left и top .

Для наглядности и удобства форматирования добавим основному меню класс topmenu , выпадающему — submenu .

Скрыть выпадающее меню можно несколькими способами:
1) display: none;
2) visibility: hidden;
3) opacity: 0;
4) transform: scaleY(0);
5) с помощью библиотеки jQuery.

Способ 1. {display: none;}

Выпадающее меню скрывается с помощью.submenu {display: none;} , при наведении показывается с помощью.topmenu li:hover .submenu {display: block;} .

Способ 2. {visibility: hidden;}

Меню скрывается с помощью.submenu {visibility: hidden;} , показывается — .topmenu li:hover .submenu {visibility: visible;} .

Способ 3. {opacity: 0;}

Меню скрывается с помощью.submenu {opacity: 0;} , показывается — .topmenu li:hover .submenu {opacity: 1;} . Чтобы меню не появлялось при наведении на область, где оно расположено, добавляем visibility: hidden; , а при наведении меняем на visibility: visible; .

Способ 4. {transform: scaleY(0);}

Меню скрывается с помощью.submenu {transform: scaleY(0);} , показывается — .topmenu li:hover .submenu {transform: scaleY(1);} . Поскольку трансформация элемента по умолчанию происходит из центра, нужно добавить для.submenu {transform-origin: 0 0;} , т.е. из верхнего левого угла.

Способ 5. С помощью jQuery

2. 3D выпадающее меню

Интересные эффекты можно создавать с помощью CSS3-трансформаций, например, заставить меню появляться из глубины экрана.

3. Разворачивающееся выпадающее меню с логотипом

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

Лого

4. Увеличивающееся выпадающее меню

Ещё один пример для выпадающего меню. Эффект увеличения при появлении меню реализуется за счет уменьшения первоначального размера.submenu {transform: scale(.8);} , при наведении размер увеличивается до.topmenu > li:hover .submenu {transform: scale(1);} .

5. Подъезжающее выпадающее меню

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

В этой статье мы с Вами рассмотрим элементы, которые позволяют создавать раскрывающиеся списки, научимся формировать группы в этих списках, рассмотрим как отключать пункты и даже группы списков, познакомимся с элементом, который позволяет создать многострочное текстовое поле, его в дальнейшем вы можете использовать внутри HTML форм (элемент

Раскрывающийся список

Первый пункт в списке, как правило, отображается как выбранный, но вы можете добавить к этому элементу атрибут selected , чтобы задать предопределенный вариант.

Давайте

</span>Пример использования элемента <select><span>

В этом примере мы тегом

В браузере это выглядит следующим образом:

Группировка пунктов меню

Давайте рассмотрим следующий тег , который используется для группировки связанных данных в раскрывающемся списке name = "black&white" > label = "Whitelist" >

В данном примере мы выделили 2 группы тегом . Атрибут label элемента задает наименование выделенной группы, выполненное полужирным начертанием:

В следующем примере с использованием логического атрибута disabled мы отключим одну группу ("Group B "):

</span>Пример использования атрибута disabled HTML тега <optgroup><span>

Результат нашего примера:

Отключение списка и мультивыбор

</span>Атрибуты disabled и multiple тега <select><span>

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

Для второго списка мы использовали атрибут multiple , который указывает, что допускается выбрать в списке несколько вариантов сразу (через Ctrl в Windows и через Command в Mac).

В браузере это выглядит следующим образом:

Текстовая область

Результат нашего примера:

Отключение текстовой области

По аналогии с ранее рассмотренными элементами тег имеет логический атрибут disabled , который указывает, что текстовая область должна быть отключена (недоступна для взаимодействия с пользователем). Атрибут может использоваться совместно со скриптами, например, пока какое-то условие не выполнено элемент неактивен.</p> <p>Рассмотрим пример использования:</p> <span><!DOCTYPE html> <html> <head> <title> </span>Атрибуты disabled и name тега <textarea><span></title> </head> <body> <form> <textarea name = "userInfo" > </span>Текстовое поле доступно к заполнению.<span> </span>Текстовое поле не доступно к заполнению.

), для первой и второй области атрибутом name мы задали уникальные имена. Для второй текстовой области атрибутом disabled мы указали, что она будет отключена при загрузке страницы.</p> <p>Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки "отправка формы": type = "submit" ).</p> <p>Результат нашего примера:</p> <h2>Подсказка для текстовой области</h2> <p>И так мы с Вами рассмотрим заключительный пример и перейдем к <a href="/wi-fi/kak-v-tele-vyglyadyat-negativnye-programmy-mentalnyi-virus--/">практическому заданию</a> статьи этого учебника.</p> <p>Благодаря атрибуту (HTML тега <textarea>) допускается указывать текст подсказки, которая описывает ожидаемое значение для ввода пользователем в элемент.</p> <p>Текст подсказки скрывается, когда пользователь вводит значение (любой символ) в текстовое поле, если его убрать, то подсказка будет отображена снова.</p> <p>Рассмотрим пример использования:</p> <span><!DOCTYPE html> <html> <head> <title> </span>Атрибуты placeholder и readonly тега <textarea><span></title> </head> <body> <form> <textarea placeholder = <span>"Введите информацию в текстовое поле" </span>> "Поле доступно только для чтения" </span> readonly >
type = "submit" name = "submitInfo" value = "отправить" >

В этом примере мы создали две текстовые области (элемент ), для первой и второй области атрибутом мы задали подсказку для пользователя, которая отображается бледным цветом текста внутри элемента. Для второй текстовой области атрибутом readonly мы указали, что оно будет доступно только для чтения (содержимое не может быть изменено).</p> <p>Обратите внимание на то, что если текстовое поле доступно только для чтения, то при этом содержимое не может быть изменено, но пользователь при этом может перейти к содержимому, выделить и скопировать его.</p> <p>Кроме того, мы разместили внутри формы кнопку, которая служит для отправки формы (элемент <input> с типом кнопки "отправка формы": type = "submit" ).</p> <p>Результат нашего примера:</p> <h2>Вопросы и задачи по теме</h2> <p>Перед тем как перейти к изучению следующей темы пройдите практическое задание:</p> <ul><li>Используя полученные знания составьте следующую форму размещения вакансии:</li> </ul><p>Прежде чем преступить к выполнению задания откройте пример в новом окне и внимательно рассмотрите форму, чтобы повторить все её моменты. Для выполнения задания Вам потребуются знания из статьи . Если вы пропустили её, то вернитесь для её изучения.</p> <p>После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.</p> <p>Часто новички сталкиваются с проблемой оформления выпадающего списка. Так как с оригинальным <b>select </b> особенного ничего не сделаешь. Тогда на помощь приходит <b>jQuery </b>, и тогда можно сделать чуть ли не что угодно.</p> <p>А что если я скажу, что можно и стандартный <b>HTML </b> выпадающий список не плохо оформить на чистом <b>CSS </b>?</p> <h3>Выпадающий список на HTML</h3> <p>Цвет фона и текста можно менять, причем делается это очень просто.</p> <p> <span class="custom-dropdown big"> <select> <option>Sherlock Holmes</option> <option>The Great Gatsby</option> <option>V for Vendetta</option> <option>The Wolf of Wallstreet</option> <option>Quantum of Solace</option> </select> </p><p>В <b>span </b> мы добавили 2 класса, один основной, на который ляжут все основные стили “<b>custom-dropdown </b>“, а второй big, который будет определять размер <b>выпадающего списка </b>. Мы можем заранее подготивить скажем 3 размера, <b>big, medium, small </b>, задать в стилях <b>font-size </b>. И в дальнейшем не заморачиваться. Это можно и пропустить, все зависит от вашего дизайна на сайте.</p> <p>Body { background: #2a2a2b; color: #fff; text-align: center; font-family: Arial, Helvetica; } .big { font-size: 1.2em; } /* Custom dropdown */ .custom-dropdown { position: relative; display: inline-block; vertical-align: middle; margin: 10px; /* demo only */ } .custom-dropdown select { cursor:pointer; background-color: #2980b9; color: #fff; font-size: inherit; padding: .5em; padding-right: 2.5em; border: 0; margin: 0; border-radius: 3px; text-indent: 0.01px; text-overflow: ""; -webkit-appearance: button; /* hide default arrow in chrome OSX */ } .custom-dropdown::before, .custom-dropdown::after { content: ""; position: absolute; pointer-events: none; } .custom-dropdown::after { /* Custom dropdown arrow */ content: "\25BC"; height: 1em; font-size: .625em; line-height: 1; right: 1.2em; top: 50%; margin-top: -.5em; } .custom-dropdown::before { /* Custom dropdown arrow cover */ width: 2em; right: 0; top: 0; bottom: 0; border-radius: 0 3px 3px 0; } .custom-dropdown select { color: rgba(0,0,0,.3); } .custom-dropdown select::after { color: rgba(0,0,0,.1); } .custom-dropdown::before { background-color: rgba(0,0,0,.15); } .custom-dropdown::after { color: rgba(0,0,0,.4); } </p><p>Если вы не хотите заморачиваться и изучать стили, а просто добавить себе на сайт и поменять цвет под дизайн вашего сайта. То вам всего лишь в стиле “<b>.custom-dropdown select </b>” нужно поменять значения <b>background-color </b> и <b>color </b></p> <p>Тег option HTML используется для создания выпадающего списка, с помощью которого пользователь может выбрать один вариант из заранее определенного набора значений.</p> <p>Текст, видимый пользователю, может отличаться от текста, указанного в атрибуте value . Вот, как можно создать выпадающий список:</p> <p><select id="selectID"> <option value=”GR”>Green</option> <option value=”YE”>Yellow</option> <option value=”BL”>Black</option> </select></p> <ul><li>Выпадающий список создается с помощью тега <select>;</li> <li>Внутри тега <select> определяются варианты для выбора с помощью тега <option>;</li> <li>В теге <option> можно использовать атрибут value , чтобы получить доступ к выбранному варианту с помощью PHP , JS , Jquery и т.д.</li> </ul><p>Также можно задать класс CSS вместо того, чтобы использовать идентификатор для определения стиля выпадающего списка.</p> <p>В следующем разделе я покажу примеры использования выпадающего <a href="/wi-fi/mnogourovnevyi-uporyadochennyi-spisok-v-html-sozdanie-spiska-v-html/">списка HTML</a> в JavaScript / JQuery . В примерах также будет показано, как задавать стили <select> с помощью CSS / CSS3 и <span>фреймворка Bootstrap </span>.</p> <h2>Пример создания простого выпадающего списка</h2> <p>В этом примере HTML select option используется для создания выпадающего списка с тремя вариантами на выбор:</p> <br> <p>В приведенном выше примере для создания выпадающего списка используется следующая разметка:</p> <p><select id="selectvalue"> <option>5</option> <option>10</option> <option>15</option> <option>20</option> <option>25</option> </select></p> <h3>Использование атрибута value</h3> <p>Как упоминалось ранее, значение атрибута value может отличаться от текста, выводимого на странице. Например, можно вывести для пользователей названия стран или цветов, а в атрибуте value использовать шорткоды.</p> <p>В следующем примере мы создадим выпадающий список с атрибутом value :</p> <br><span>Посмотреть онлайн демо-версию и код </span> <p>Для тега <select> используется следующий код:</p> <p><select id="selecttheme"> <option value="Mar">Maroon</option> <option value="Gre">Green</option> <option value="Yel">Yellow</option> <option value="Blu">Blue</option> <option value="Red">Red</option> </select></p> <h3>Пример получения доступа к выбранному варианту в JavaScript</h3> <p>Теперь создадим пример получения доступа к значению выбранного варианта и выполнения некоторых действий. Тот же список, что и в приведенном выше примере, мы создаем с вариантами выбора цвета. После выбора нажмите кнопку, чтобы применить этот цвет к документу:</p> <br><span>Посмотреть онлайн демо-версию и код </span> <p>Для option value HTML используется следующий код:</p> <p><select id="selcolor"> <option value="Maroon">Maroon</option> <option value="Green">Green</option> <option value="Yellow">Yellow</option> <option value="Blue">Blue</option> <option value="Red">Red</option> <option value="White">Other</option> </select></p> <p>Следующая строка кода используется в JavaScript , чтобы получить доступ к значению атрибута value варианта <select>:</p> <p>var seltheme = document.getElementById(“selcolor”).value;</p> <p>При нажатии кнопки вызывается функция JS , которая присваивает выбранное в выпадающем списке значение переменной. Это значение используется для применения цвета к текущему документу.</p> <h3>Получение доступа к видимому тексту в JQuery</h3> <p>На этот раз я буду использовать JQuery , чтобы получить доступ к значению выбранного варианта: как к тексту, так и к value . В этой демо-версии я буду получать доступ к видимому тексту в теге option в HTML :</p> <br><span>Посмотреть онлайн демо-версию и код </span> <p>В коде для каждого варианта в теге <select> значение отличается от текста. После того, как вы выберете цвет, jQuery отображает видимый текст в предупреждении. Код тега <select> следующий:</p> <p><select id="jqueryselect"> <option value="MAR">Maroon</option> <option value="GRE">Green</option> <option value="YEL">Yellow</option> <option value="BLU">Blue</option> <option value="RED">Red</option> </select></p> <p>Вот как обеспечивается доступ к этому значению в <span>HTML select option selected JavaScript </span>:</p> <p>var selectedcolor = $("#jqueryselect option:selected").text();</p> <p>Также можно получить доступ к значению с помощью JQuery-метода $.val() :</p> <p>var selectedcolor = $("#jqueryselect").val();</p> <p>Замените эту строку в приведенном выше примере, и код будет отображать шорткод / значение цвета в атрибуте value , а не видимый текст.</p> <h3>Пример получения значения в скрипте PHP</h3> <p>В этом примере получения значения выбранного из выпадающего списка варианта форма создается с помощью тега <select> в разделе разметки. После выбора цвета из выпадающего списка нажмите на кнопку “Submit ”. Данные формы будут передаваться в тот же PHP-файл , после чего отобразится выбранный цвет:</p> <br><span>Посмотреть онлайн демо-версию и код </span> <p>Метод формы, используемый в примере — POST , поэтому можно получить значения формы с помощью <a href="/wi-fi/php-associativnyi-massiv-poluchit-znachenie-po-klyuchu-massivy-v-php/">массива PHP</a> $_POST[“”] . Это код формы, используемый в примере:</p> <p><form action="" method="post"> <div class="seldemo"> <label>Select A Color: </label> <select name="selphp"> <option value="Maroon">Maroon</option> <option value="Green">Green</option> <option value="Yellow">Yellow</option> <option value="Blue">Blue</option> <option value="Red">Red</option> </select> <p><input type="submit" value="Submit" class="btncls"></p> </div> </form></p> <p>А вот как PHP-скрипт используется, чтобы получить <a href="/connection/html-input-znachenie-v-pole/">значение HTML</a> select option :</p> <p><?php if($_POST["selphp"] != "") { echo "You selected the following color:<strong>". $_POST["selphp"]."</strong>"; } ?></p> <p>Если в форме указан метод GET , тогда используйте <span>PHP-массив $_GET[“”] </span>.</p> <h3>Определение стилей выпадающего списка с помощью CSS</h3> <p>Теперь рассмотрим, как определить стили выпадающего списка <select>, используя возможности CSS . В следующей демо-версии я использовал несколько простых <a href="/how-to-work/kakie-css-svoistva-izmenyaet-markery-spiskov-ustanovka-markera-spiska/">свойств CSS</a> и свойства градиента CSS3 :</p> <br><span>Посмотреть онлайн демо-версию и код </span> <p>Вместе с linear-gradient здесь использовано свойство box-shadow . Полный код CSS выглядит следующим образом:</p> <p>Selcls { padding: 3px; border: solid 1px #517B97; outline: 0; background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #CAD9E3), to(#FFFFFF)); background: -moz-linear-gradient(top, #FFFFFF, #CAD9E3 1px, #FFFFFF 25px); box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; width:150px; }</p> <h3>Закругленные углы с помощью свойства border-radius</h3> <p>Для HTML select option мы зададим свойство CSS3 border-radius , чтобы сделать закругленные углы. Цветовая гамма также изменяется. Вы можете экспериментировать с рамками, шириной, полями и другими свойствами, как захотите:</p> <br><span>Посмотреть онлайн демо-версию и код </span> <h3>Использование нескольких атрибутов и стилей CSS</h3> <p>Чтобы дать пользователям возможность выбирать из списка несколько вариантов, нужно использовать атрибут multiple . В приведенном выше примере может быть выбран только один вариант. При использовании multiple можно выбрать несколько вариантов, нажав клавишу CTRL :</p> <br><span>Посмотреть онлайн демо-версию и код </span> <h3>Использование фреймворка Bootstrap и плагинов для создания красивых выпадающих списков</h3> <p>Если вы используете фреймворк Bootstrap , то у вас есть возможность применять плагины для создания крутых option HTML .</p> <p>В этом уроке мы сделаем, классическое горизонтальное меню на чистом CSS. Оно имеет иконки в списках. При наведение на пункт он плавно меняет цвет кнопки и текста, добавляется тень. Выпадающие списки можно делать многоуровневыми и главное это все довольно просто реализовано на чистом CSS3.</p> <p>В уроке задействуем:</p> <ul><li>display: flex; </li> <li>используем transition ;</li> <li>будем позиционировать элементы при помощи position .</li> </ul><h3>HTML структура горизонтального меню</h3> <p>П ервым делом напишем разметку под горизонтальное меню. Открываем свою среду разработки в моем случае это PhpStorm , создаем index.html файл, пропишем каркас html:5 , заменю lang на ru .</p> <p>Все meta удалю кроме кодировки, пропишу свой заголовок «<b>Tom menu </b>».</p> <p>Между body пишем тег header , а в нем блок с классом .dws-menu в котором будет находиться наше меню. Далее структура будет следующая, создадим списки в количестве пяти штук. В каждом списке будет ссылка с атрибутом href="#" . Затем будет идти иконка I с классом .fa .fa- </p><p> <header> <nav class="dws-menu"> ul>li*5>a>i.fa.fa- </nav> </header> </p><p>Жмем применить.<br></p> <p>Пропишем название пунктов меню (<i>Главная, Продукция, Услуги, Новости, Контакты </i>).</p> <p>Далее отбираем и подключаем иконки. Переходим на сайт Font Awesome , отберем себе иконки под данные пункты меню:<br></p><p> <i class="fa fa-<b>home </b>"></i> <i class="fa fa-<b>shopping- </b><b>cart </b>"></i> <i class="fa fa-<b>cogs </b>"></i> <i class="fa fa-<b>th-list </b>"></i> <i class="fa fa-<b>envelope-open </b>"></i> </p><p>Скачиваем архив с сайта с иконками, извлекаем его содержимое к себе на компьютер, копируем папку fonts и папку css в свою среду разработки.</p> <p>В папке fonts лежат шрифты иконок, а в папке css их стили. Сжатые стили можно удалить font-awesome.min, подключим не сжатый font-awesome.css .</p> <p>В index.html подключаем иконки, и прописываем каждому пункту свой стиль иконки (<b>home </b>, <b>shopping-cart </b>, <b>cogs </b>, <b>th-list </b>, <b>envelope-open </b>).</p> <p>Основной каркас мы сделали, подменю сформируем после описания основного стиля, а теперь создадим файл где будем описывать основные стили горизонтального меню style.css и подключим его к index.html . Для проверки, что стили подключены, создам папку img , в ней размещу произвольную картинку на задний фон. Пропишем подключение картинки при помощи background .<br></p><p>Body{ background-image: url("../img/ep_naturalwhite.png"); } </p> <h2>Описываем CSS стили горизонтального меню</h2> <p>Первым делом сбросим все отступы, которые могут задавать по умолчанию разные браузеры:</p><p>Dws-menu *{ margin: 0; padding: 0; } </p><p>Зададим header в 200 пик. и назначим шрифт Cuprum который можно скачать и отдельно подключить к себе на сайте, на всякий случай пропишем дополнительные шрифты.</p><p>Header{ margin: 200px; font-family: Cuprum, Arial, Helvetica, sans-serif; } </p><p>Скроем маркеры у списков:</p><p>Dws-menu ul, .dws-menu ol{ list-style: none; } </p><p>Списки отобразим по горизонтали при помощи display: flax , и делаем его по центру:</p><p>Dws-menu > ul{ display: flex; justify-content: center; } </p><p>В header сделаем отступ только сверху, пропишем margin-top .</p><p>Header{ <b> margin-top: 200px; </b> font-family: Cuprum, Arial, Helvetica, sans-serif; } </p><p>Оформим наше меню, зададим цвет кнопок, шрифт и т.д.</p> <p>Dws-menu > ul li a{ display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; } </p><p>Затем позиционируем иконки, спискам присвоим position: relative; для дальнейшее центровки иконок:</p><p>Dws-menu > ul li{ position: relative; } </p><p>Dws-menu > ul li > a i.fa{ position: absolute; top: 15px; left: 12px; font-size: 18px; } </p><p>Назначим спискам разделитель в виде бордюрчика, отбираем первый элемент LI, задаем бордюр. Отбираем последний элемент LI присваиваем ему аналогичный бордюр.</p><p>Dws-menu > ul li:first-child{ border-left: 1px solid #b2b3b5; } .dws-menu > ul li:last-child{ border-right: 1px solid #babbbd; } </p><p>Делаем разделители спискам LI :</p> <span>.dws-menu > ul li{ position: relative; </span> <span> border-right: 1px solid #c7c8ca; </span> } <p>Меню приобрело <a href="/bluetooth/kak-izmenit-ikonku-puska-v-windows-7-izmenenie-vneshnego-vida-knopki-pusk-v-windows/">внешний вид</a>, затем можно приступать к описанию стилей при наведении.</p> <h3>Анимируем горизонтальное меню при наведение<br></h3> <p>Dws-menu li a:hover{ background: #454547; color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0.3s ease; } </p><p>И что бы этот эффект плавно исчезал, добавим этот стиль к ссылке в покое:</p> <span>.dws-menu > ul li a{ display: block; background: #ececed; padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; </span> transition: all 0.3s ease; } <p>Основное меню закончили и можно приступать к описанию подменю и вложенные в них меню.</p> <h3>Описываем выпадающее меню CSS / HTML</h3> <p>О ткрываем index.html и добавим, к примеру, в продукцию дополнительное меню. Между списками LI вставляем UL , в нем разместим пять списков, в которых будут находиться ссылки с атрибутом herf=”#” .</p> <p>ul>li*5>a <br></p> <p>Жмем применить, пропишем название пунктов (<i>Одежда, Электроника, Продукты питания, Инструменты, Быт. химия </i>).</p><p> <ul> <li>Одежда</li> <li>Электроника</li> <li>Продукты питания</li> <li>Инструменты</li> <li>Быт. химия</li> </ul> </p><p>Затем открываем style.css и опишем стили подменю.<br></p> <p>Отбираем второй список и присвоим ему position: absolute; , зададим минимальную ширину в 150 пик.</p><p> /*sub menu*/ .dws-menu li ul{ position: absolute; min-width: 150px; } </p><p>Пропишем спискам border в 1 пик.</p><p>Dws-menu li > ul li{ border: 1px solid #c7c8ca; } </p><p>Для ссылок в подменю установим отступы в 10 пик., уберем трансформацию текста и фон сделаем на пару тонов темнее background: #e4e4e5; .</p><p>Dws-menu li > ul li a{ padding: 10px; text-transform: none; background: #e4e4e5; } </p><p>Затем создадим еще одно вложенное меню. Перейдем в файл разметки и к примеру в "Электронике" формируем по аналогии меню как делали мы до этого. Описываем заголовки пунктов (<i>Камеры, Компьютеры, Телефоны </i>) и сохраняемся.</p><p> <li>Электроника <ul> <li>Камеры</li> <li>Компьютеры</li> <li>Телефоны</li> </ul> </li> </p><p>Они вывелись, но скрыты под основным меню, теперь position: absolute; вложенного UL и сдвинем его на 150 пик. в сторону:</p><p>Dws-menu li > ul li ul{ position: absolute; right: -150px; top: 0; } </p> <span>/*sub menu*/ .dws-menu li ul{ position: absolute; min-width: 150px; </span> display: none; } <p>А для их появления отберем списки при наведении и отобразим их при помощи display: block; .</p><p>Dws-menu li:hover > ul{ display: block; } </p><p>Теперь можно добавлять <a href="/overview/cherstvyi-menu-php-mnogourovnevoe-menyu-na-php-i-mysql-kak-sdelat-ssylku-v-menyu/">многоуровневые меню</a> просто простым копированием блока UL , изменением его пунктов.</p><p> <ul> <li><i class="fa fa-home"></i>Главная</li> <li><i class="fa fa-shopping-cart"></i>Продукция <ul> <li>Одежда <ul> <li>Обувь</li> <li>Куртки</li> <li>Брюки</li> </ul> </li> <li>Электроника <ul> <li>Камеры</li> <li>Компьютеры</li> <li>Телефоны <ul> <li>Samsung</li> <li>Flf</li> <li>Apple</li> </ul> </li> </ul> </li> <li>Продукты питания</li> <li>Инструменты</li> <li>Быт. химия</li> </ul> </li> <li><i class="fa fa-cogs"></i>Услуги <ul> <li>Услуга 1</li> <li>Услуга 2</li> <li>Услуга 3</li> </ul> </li> <li><i class="fa fa-th-list"></i>Новости</li> <li><i class="fa fa-envelope-open"></i>Контакты</li> </ul> </p><p>Затем давайте завершающим этапам оформим кнопки ингредиентом. Я пользуюсь CSS генератором , у меня создано несколько Presets , вы можете создать свои, в моем случае я просто копирую данный код и размещаю в место background который прописывал до этого.<br></p> <span>.dws-menu > ul li a{ display: block; </span> <span> /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c9c9c9+0,f6f6f6+2,c4c5c7+98,757577+100;Custom+3 */ background: #c9c9c9; /* Old browsers */ background: -moz-linear-gradient(top, #c9c9c9 0%, #f6f6f6 2%, #c4c5c7 98%, #757577 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #c9c9c9 0%,#f6f6f6 2%,#c4c5c7 98%,#757577 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9c9c9", endColorstr="#757577",GradientType=0); /* IE6-9 */ </span> <span> padding: 15px 30px 15px 40px; font-size: 14px; color: #454547; text-decoration: none; text-transform:uppercase; transition: all 0.3s ease; } </span> .dws-menu li a:hover{ <span> /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e0e1e5+0,454547+2,454547+98,e0e1e5+100 */ background: #e0e1e5; /* Old browsers */ background: -moz-linear-gradient(top, #e0e1e5 0%, #454547 2%, #454547 98%, #e0e1e5 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #e0e1e5 0%,#454547 2%,#454547 98%,#e0e1e5 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e0e1e5", endColorstr="#e0e1e5",GradientType=0); /* IE6-9 */ </span> <span> color: #ffffff; box-shadow: 1px 5px 10px -5px black; transition: all 0.3s ease; } </span> <br><img src='https://i1.wp.com/opt-568316.ssl.1c-bitrix-cdn.ru/upload/medialibrary/c9c/c9c23a8ee4eb052a2afdcfa98fabe0a2.jpg' width="100%" loading=lazy><br><p>При желании данное меню можно оформить под тот стиль, который именно подойдем вам на сайте, достаточно просто с генерировать цвет и заменить его в коде. Получилась простое и в тоже время симпатичное горизонтальное меню, сделанное на чистом CSS.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> <div class="evc-social-likes" data-url="https://ymol.ru/setting/vybor-iz-vypadayushchego-spiska-v-html-elementy-html-form/" data-title="Выбор из выпадающего списка в HTML. Элементы HTML форм — выпадающий список (теги select, option, optgroup), текстовое поле (textarea), а также применение label, fieldset и legend Выпадающий список при наведения css" data-media=""> <div class="social-likes "> <div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div> <div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div> <div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div> <div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div> </div> </div> <span class="thecategory"><i class="icon-globe"></i> <a href="/category/setting/" rel="category tag">Настройка </a></span> </div> </article> <div class="post-tags"></div> <div class="related-posts"> <h4>Вам также может понравиться</h4> <article id="post-35140" class="latestpost post-35140 post type-post status-publish format-standard hentry category-poleznye-sovety"> <a href="/instructions/telefon-htc-opisanie-i-harakteristiki-htc-one-m7---tehnicheskie-harakteristiki/" title="HTC One M7 - Технические характеристики" id="featured-thumbnail"> <div class="featured-thumbnail"> <img src="/uploads/4bc314f15c1f091524b50952db37e7d3.jpg" alt="HTC One M7 - Технические характеристики" / loading=lazy> </div> </a> <header class="entry-header"> <h1 class="entry-title"><a href="/instructions/telefon-htc-opisanie-i-harakteristiki-htc-one-m7---tehnicheskie-harakteristiki/" rel="bookmark">HTC One M7 - Технические характеристики</a></h1> </header> </article> <article id="post-35138" class="latestpost post-35138 post type-post status-publish format-standard hentry category-poleznye-sovety"> <a href="/choice/regulyarnye-vyrazheniya-poisk-ne-vklyuchaya-stroku-javascript-regulyarnoe/" title="Javascript, регулярное выражение: примеры, проверка регулярных выражений" id="featured-thumbnail"> <div class="featured-thumbnail"> <img src="/uploads/94aca27994d6e891ddf4a846ad2a9f01.jpg" alt="Javascript, регулярное выражение: примеры, проверка регулярных выражений" / loading=lazy> </div> </a> <header class="entry-header"> <h1 class="entry-title"><a href="/choice/regulyarnye-vyrazheniya-poisk-ne-vklyuchaya-stroku-javascript-regulyarnoe/" rel="bookmark">Javascript, регулярное выражение: примеры, проверка регулярных выражений</a></h1> </header> </article> <article id="post-35137" class="latestpost post-35137 post type-post status-publish format-standard hentry category-poleznye-sovety"> <a href="/overview/m1-b-3-kompyuternye-tehnologii-v-nauke-i-proizvodstve-kompyuternye/" title="М1.Б.3 Компьютерные технологии в науке и производстве. Компьютерные технологии в науке и образовании Компьютерные технологии в науке и производстве" id="featured-thumbnail"> <div class="featured-thumbnail"> <img src="/uploads/b623d93a993f69f5cf1d87689d96a904.jpg" alt="М1.Б.3 Компьютерные технологии в науке и производстве. Компьютерные технологии в науке и образовании Компьютерные технологии в науке и производстве" / loading=lazy> </div> </a> <header class="entry-header"> <h1 class="entry-title"><a href="/overview/m1-b-3-kompyuternye-tehnologii-v-nauke-i-proizvodstve-kompyuternye/" rel="bookmark">М1.Б.3 Компьютерные технологии в науке и производстве. Компьютерные технологии в науке и образовании Компьютерные технологии в науке и производстве</a></h1> </header> </article> </div> </main> <div id="sidebar" class="sidebar c-4-12" role="complementary" itemscope itemtype="http://schema.org/WPSideBar"> <aside id="recent-posts-3" class="widget widget_recent_entries"> <h3 class="widget-title">Самое популярное</h3> <ul> <li class='li1'><a href='/instructions/progress-dispetchera-zagruzok-ne-otobrazhaetsya-v-oblasti/' title='Почему на флешке не видно файлов, и как это исправить Почему загруженные файлы не отображаются в загрузках'>Почему на флешке не видно файлов, и как это исправить Почему загруженные файлы не отображаются в загрузках</a></li> <li class='li1'><a href='/setting/nl-interneshnl-lichnyi-kabinet-vhod-nl-international-otzyvy-interesuyut/' title='NL International – отзывы интересуют?'>NL International – отзывы интересуют?</a></li> <li class='li1'><a href='/setting/svetyashchiesya-linii-dlya-fotoshopa-kak-sozdat-svetyashchiesya-linii-v/' title='Как создать светящиеся линии в фотошопе - быстро и красиво'>Как создать светящиеся линии в фотошопе - быстро и красиво</a></li> <li class='li1'><a href='/reviews/critical-service-failed-windows-8-na-noutbuke-oshibka-critical-process-died-chto-ona/' title='Ошибка critical process died что она обозначает и как исправить'>Ошибка critical process died что она обозначает и как исправить</a></li> <li class='li1'><a href='/connection/panel-upravleniya-bystryi-dostup-k-appletam-paneli-upravleniya-windows/' title='Быстрый доступ к апплетам Панели управления Windows Windows где размещается панель управления'>Быстрый доступ к апплетам Панели управления Windows Windows где размещается панель управления</a></li> <li class='li1'><a href='/instructions/zhivye-ramki-s-23-fevralya/' title='Живые рамки с 23 февраля'>Живые рамки с 23 февраля</a></li> <li class='li1'><a href='/reviews/kak-otpravit-besplatnoe-sms-na-laif-kak-otpravit/' title='Как отправить текстовое сообщение на Лайф'>Как отправить текстовое сообщение на Лайф</a></li> <li class='li1'><a href='/how-to-work/kak-udalit-s-aifona-rington-ili-muzyku-podrobnye-instrukcii-kak/' title='Как удалить музыку с Айфона?'>Как удалить музыку с Айфона?</a></li> <li class='li1'><a href='/bluetooth/chto-takoe-svetodiodnyi-piksel-led-pixel-raschet-neobhodimogo-kolichestva/' title='Расчет необходимого количества пикселей для использования в проекте'>Расчет необходимого количества пикселей для использования в проекте</a></li> <li class='li1'><a href='/instructions/gruppa-ili-pablik-vkontakte-chto-takoe-publichnaya-stranica/' title='Что такое публичная страница вконтакте'>Что такое публичная страница вконтакте</a></li> </ul> </aside> <aside id="wpforo_widget_recent_topics-2" class="widget widget_wpforo_widget_recent_topics"><div id="wpf-widget-recent-replies" class="wpforo-widget-wrap"><h3 class="widget-title">Новые сообщения</h3><div class="wpforo-widget-content"><ul> <li> <div class="wpforo-list-item"> <div class="wpforo-list-item-left"> <img class="avatar" src="/uploads/24525dd2ee77ea651e3e4479891e0b33.jpg" height="96" width="96" / loading=lazy> </div> <div class="wpforo-list-item-right"> <p class="posttitle"><a href="/instructions/pochta-gonkonga-otslezhivanie-pochtovyh-otpravlenii-pochta-gonkonga-hongkong-post-i/">Почта гонконга отслеживание почтовых отправлений</a></p> <p class="postuser">2024-04-18 03:16:29</p> </div> <div class="wpf-clear"></div> </div> </li> <li> <div class="wpforo-list-item"> <div class="wpforo-list-item-left"> <img class="avatar" src="/uploads/570e758d31a76dc7cc5faa2df81af69a.jpg" height="96" width="96" / loading=lazy> </div> <div class="wpforo-list-item-right"> <p class="posttitle"><a href="/setting/kak-sdelat-rabochii-stol-na-v-8/">Как сделать рабочий стол на в 8</a></p> <p class="postuser">2024-04-14 03:25:12</p> </div> <div class="wpf-clear"></div> </div> </li> <li> <div class="wpforo-list-item"> <div class="wpforo-list-item-left"> <img class="avatar" src="/uploads/994b03a4974aff57ce3a28ca67738283.jpg" height="96" width="96" / loading=lazy> </div> <div class="wpforo-list-item-right"> <p class="posttitle"><a href="/problems/obzor-meizu-m5-note-ocharovatelnyi-serednyak-obzor-smartfona-meizu-m5-note/">Обзор смартфона Meizu M5 Note: незначительный апгрейд Слабая производительность в играх</a></p> <p class="postuser">2024-04-13 03:39:23</p> </div> <div class="wpf-clear"></div> </div> </li> <li> <div class="wpforo-list-item"> <div class="wpforo-list-item-left"> <img class="avatar" src="/uploads/f19244080995b15682e1ce9c2c88cfec.jpg" height="96" width="96" / loading=lazy> </div> <div class="wpforo-list-item-right"> <p class="posttitle"><a href="/reviews/udalennyi-dostup-k-kompyuteru-na-russkom-kak-podklyuchit-udal-nnyi-dostup-k/">Как подключить удалённый доступ к компьютеру через интернет: Руководство</a></p> <p class="postuser">2024-04-12 03:24:12</p> </div> <div class="wpf-clear"></div> </div> </li> <li> <div class="wpforo-list-item"> <div class="wpforo-list-item-left"> <img class="avatar" src="/uploads/41fa0f408db00a488d2f36007967f84c.jpg" height="96" width="96" / loading=lazy> </div> <div class="wpforo-list-item-right"> <p class="posttitle"><a href="/wi-fi/zadachi-na-funkcii-raboty-so-strokami-v-javascript-javascript-rabota/">Javascript: работа со строками, функции Jquery функции работы со строкой</a></p> <p class="postuser">2024-04-11 03:25:40</p> </div> <div class="wpf-clear"></div> </div> </li> </ul></div></div></aside><aside id="categories-2" class="widget widget_categories"><h3 class="widget-title">Рубрики</h3> <ul> <li class="cat-item cat-item-84"><a href="/category/bluetooth/">Bluetooth</a> </li> <li class="cat-item cat-item-84"><a href="/category/wi-fi/">Wi-Fi</a> </li> <li class="cat-item cat-item-84"><a href="/category/choice/">Выбор </a> </li> <li class="cat-item cat-item-84"><a href="/category/instructions/">Инструкции</a> </li> <li class="cat-item cat-item-84"><a href="/category/how-to-work/">Как работать</a> </li> <li class="cat-item cat-item-84"><a href="/category/setting/">Настройка </a> </li> <li class="cat-item cat-item-84"><a href="/category/beginning/">Начало</a> </li> <li class="cat-item cat-item-84"><a href="/category/overview/">Обзор</a> </li> <li class="cat-item cat-item-84"><a href="/category/overview/">Обзор </a> </li> <li class="cat-item cat-item-84"><a href="/category/reviews/">Обзоры</a> </li> </ul> </aside><aside id="dwqa-latest-question-2" class="widget widget_categories"><h3 class="widget-title">Новые статьи</h3><ul> <li class="cat-item"><a href="/setting/testirovanie-monitora-na-bitye-pikseli-pri-pokupke-kak-proverit/">Как проверить монитор на битые пиксели перед покупкой</a></li> <li class="cat-item"><a href="/wi-fi/vindovs-10-stavitsya-brauzer-po-umolchaniyu/">Виндовс 10 ставится браузер по умолчанию</a></li> <li class="cat-item"><a href="/instructions/telefon-htc-opisanie-i-harakteristiki-htc-one-m7---tehnicheskie-harakteristiki/">HTC One M7 - Технические характеристики</a></li> <li class="cat-item"><a href="/choice/regulyarnye-vyrazheniya-poisk-ne-vklyuchaya-stroku-javascript-regulyarnoe/">Javascript, регулярное выражение: примеры, проверка регулярных выражений</a></li> <li class="cat-item"><a href="/overview/m1-b-3-kompyuternye-tehnologii-v-nauke-i-proizvodstve-kompyuternye/">М1.Б.3 Компьютерные технологии в науке и производстве. Компьютерные технологии в науке и образовании Компьютерные технологии в науке и производстве</a></li> <li class="cat-item"><a href="/instructions/progress-dispetchera-zagruzok-ne-otobrazhaetsya-v-oblasti/">Почему на флешке не видно файлов, и как это исправить Почему загруженные файлы не отображаются в загрузках</a></li> <li class="cat-item"><a href="/setting/nl-interneshnl-lichnyi-kabinet-vhod-nl-international-otzyvy-interesuyut/">NL International – отзывы интересуют?</a></li> <li class="cat-item"><a href="/setting/svetyashchiesya-linii-dlya-fotoshopa-kak-sozdat-svetyashchiesya-linii-v/">Как создать светящиеся линии в фотошопе - быстро и красиво</a></li> <li class="cat-item"><a href="/reviews/critical-service-failed-windows-8-na-noutbuke-oshibka-critical-process-died-chto-ona/">Ошибка critical process died что она обозначает и как исправить</a></li> <li class="cat-item"><a href="/connection/panel-upravleniya-bystryi-dostup-k-appletam-paneli-upravleniya-windows/">Быстрый доступ к апплетам Панели управления Windows Windows где размещается панель управления</a></li> </ul></aside></div> </div> </div> </div> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="site-info container"> <div class="copyrights"> <span class="sep"> </span> ymol.ru - Все о планшетах - Информационный портал </div> <a href="#blog" class="toplink" ><i class="icon-angle-up"></i></a> <nav id="navigation" class="footer-navigation" role="navigation"> <div class="menu-footer-menu-container"><ul id="menu-footer-menu" class="menu"> <li class="menu-item type-post_type object-page "><a href="/sitemap.xml">Карта сайта</a></li> <li class="menu-item type-post_type object-page "><a href="/feedback/">Контакты</a></li> </ul></div> </nav> </div> </footer> </div> <div id="vk_api_transport"></div> <script type="text/javascript"> jQuery(document).ready(function ($) { if ($('.social-likes')) { $('.social-likes').each(function () { var p = $(this).parent(); if (p.data('url')) { $(this).data({ 'url': p.data('url'), 'title': p.data('title') } ); } if ($(this).find('.pinterest').length) { if (p.data('media')) { $($(this).find('.pinterest')[0]).data({ 'media': p.data('media') } ); } else $($(this).find('.pinterest')[0]).remove(); } } ); $('.social-likes').socialLikes({ zeroes: 0 } ); } } ); </script> <script type='text/javascript' src='https://ymol.ru/wp-content/plugins/akismet/_inc/form.js?ver=3.2'></script> <script type='text/javascript' src='https://ymol.ru/wp-content/plugins/easy-vkontakte-connect/js/evc-share.js'></script> <script type='text/javascript' src='https://ymol.ru/wp-content/plugins/easy-vkontakte-connect/js/social-likes.min.js?ver=3.0.4'></script> <script type='text/javascript' src='https://ymol.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://ymol.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.5.1'></script> <script type='text/javascript' src='https://ymol.ru/wp-content/plugins/wp-review/assets/js/main.js?ver=4.0.6'></script> <script type='text/javascript' src='https://ymol.ru/wp-content/themes/sociallyviral/js/customscripts.js?ver=20120212'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.6.9'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.6.9'></script> <script>setTimeout( function(){ jQuery.post('/wp-content/plugins/kama-postviews/ajax-request.php',{ meta_id:'1438', view_type:'post_view', relpath:'' } ,function(result){ jQuery('.ajax_views').html(result); } );} , 2000);</script> <script>function lc_get_cookie(name) { var c = document.cookie;if (c.indexOf(name) != -1) { var x = c.indexOf(name)+name.length+1;var y = c.indexOf(";",x);if (y < 0) y = c.length;return decodeURIComponent(c.substring(x,y));} else return "";} if ((d = document.getElementById("commentform")) != null) { e = d.elements;var z = lc_get_cookie("comment_author_email_27b5a291828a105bf783f92a6d070718");if (z != "") e["email"].value = z;z = lc_get_cookie("comment_author_27b5a291828a105bf783f92a6d070718");if (z != "") e["author"].value = z.replace(/\+/g, " ");z = lc_get_cookie("comment_author_url_27b5a291828a105bf783f92a6d070718");if (z != "") e["url"].value = z;} </script></body></html>