Привет! В этой статье вас ожидают примеры выпадающих списков и меню на CSS и, кто бы мог подумать, HTML. Насчет использования JavaScript не уверен — попробуем обойтись без него.
Выпадающее меню со списком элементов на HTML
Вебмастера и блоггеры периодически сталкиваются с проблемой создания горизонтального меню, при наведении на родительские элементы которого будут показывать дочерние элементы.
Конечно, подобную проблему можно решить многими способами, но я бы рекомендовал обходиться без дополнительного JS-кода (и jQuery).
Я считаю так — если задачу теоретически можно решить средствами HTML и CSS без применения джейквери, нужно делать это на практике. Если вы не знаете, что писать и куда нажимать — это отдельная проблема и она не должна вас останавливать. Нужно гуглить, учиться, расти, повышать свою квалификацию как верстальщика и фронтенд-разработчика — никогда не знаешь, где эти навыки пригодятся.
Давайте покажу на примере. Помните, недавно была статья о маркированных и нумерованных списках? Сейчас эти знания пригодятся, потому что именно так мы будем делать меню. Пример кода:
Выпадающие списки в Excel
Первый шаг к нашему выпадающему списку в меню сделан и вот что получилось. Результат:
Мда. Пока не очень, да? Обычный список какой-то (похож на этот), ведь классы menu и submenu я использовал, а стили не написал.
Добавлю немного CSS-магии. Пропишу прямо в html-файле — в . CSS-код:
body {
/* Убираю отступы. */
margin : 0px ;
/* Убираю еще отступы. */
padding : 0px ;
/* Задаю шрифт. */
font : 14px ‘Verdana’ ;
}
ul {
/* Убираю маркеры у списка*/
list-style : none ;
/* Делаю элементы блочными. */
display : block ;
/* Убираю отступы. */
margin : 0px ;
/* Убираю еще отступы! */
padding : 0px ;
}
ul : after {
/* Делаю элементы блочными. */
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 > a : hover {
/* Задаю цвет при наведении. */
background-color : #eb9316 ;
}
ul .ssubmenuu {
position : absolute ;
width : 240px ;
top : 37px ;
left : 0px ;
/* Делаю субменю скрытыми. */
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 > a : hover {
/* Цвет бэкграунда при наведении. */
background-color : #eb9316 ;
/* Задаю подчеркивание*/
text-decoration : underline ;
}
ul .mmenuu > li : hover > ul .ssubmenuu {
/* Делаю элементы блочными. */
display : block ;
}
Ого! В жизни не видел ничего прекраснее этого минималистичного выпадающего списка. Без JavaScript и обращения к фрилансерам!
Выпадающий при наведении список меню на HTML
И снова мы изобретаем меню на чистом CSS, без использования JS.
Учитывая то, что вы видели в предыдущей части статьи, думаю выглядит многообещающе. А все благодаря чему? Потому что мы умеем присваивать нужным элементам стиль «display:none» и прописывать в CSS чтобы при наведении на него приоритетным было что-то типа «inline-block» взамен «none».
Давайте немного подробнее остановимся на вышеприведенном коде. В нем я присвоил «id=»menu»» основному списку, то есть всему выпадающему меню. Я сделал это для того чтобы обозначить сразу родительские элементы выпадающего списка и сделать их видимыми.
-
, которые содержат в себе выпадающие ссылки (см. также как вставить ссылку в HTML). Они будут появляться при наведении.
Перейдем к CSS. Код:
/* Обнуляю отступы и убираю маркеры у списков. */
ul , li {
margin : 0 ;
padding : 0 ;
list-style-type : none ;
}
/* Задаю параметры для основного, родительского блока, меню выпадающего списка. */
# menu {
display : block ;
position : absolute ;
top : 20px ;
left : 20px ;
/* Задаю стили для блоков выпадающего списка. */
# menu > li {
display : inline-block ;
height : 20px ;
/* Считаем координаты относительно исходного места. */
position : relative ;
}
/* Задаю стили, чтобы скрыть дочерние блоки выпадающего списка. Ну и немного украшаю. */
# menu > li > ul {
position : absolute ;
top : 20px ;
left : 10px ;
display : none ;
background-color : bisque ;
border-radius : 5px ;
width : 185px ;
font-size : 14px ;
padding : 10 0 10 10 ;
}
/* Так я делаю прежде скрытую часть видимой — при наведении курсора. */
# menu > li : hover > ul {
display : block ;
}
Что хочу отметить дополнительно.
«#menu > li» означает, что стили будут применены только к дочерним элементам по отношению к тегу «ul#menu», а не ко всем как могли подумать некоторые. Внимательнее!
«Position: relative;» — отсчитывает координаты от угла одного из разделов в главном списке, откуда выпадают дочерние элементы.
Последнее: выпадающий список по примеру выше на HTML (см. также особенности HTML) и CSS в оформлении меню сайта это удобная вещь. Для ПК и десктопов. На мобильных устройствах и планшетах нет мышки и курсоров, поэтому такой вариант не подойдет.
А значит для пользователей посещающих сайт с мобильных устройств вам понадобится отдельная реализация меню с выпадающим списком. Вот пожалуй и все в этой части статьи.
Как создать крутое выпадающее меню
Третье готовое, простое и функциональное решение для создания красивого горизонтального меню с выпадающим списком разнообразных элементов.
Концепция, как и прежде, до глубины души простая. Мы делаем горизонтальную иерархию разделов, используя ненумерованный список без маркеров, и затем оборачиваем в красивые стили.
Стили помогают нам скрыть элементы и сделать их выпадающими при наведении курсора.
Хотел немного его прокомментировать, да передумал еще раз взглянув на код — он чистый, ясный, красивый. Вроде все должно быть понятно.
-
в крутое и удобное в использовании выпадающее меню с несколькими элементами.
Перейдем к CSS-коду. Что-то мне стало скучно туда-сюда бегать, поэтому я хорошенько его прокомментировал прямо в стилях. Да и вам удобнее будет, если будете пользоваться этим решением.
CSS-код, помещенный в страницы:
-
. */
/* Делаем так, чтобы Webkit плавно показывал нам всплывающие элементы выпадающего списка при наведении мышки. */
-webkit-transition : 0.24s linear opacity ;
position : absolute ;
}
#nnavv ul li {
/* Здесь я задаю отступ между элементами <li>. Это необходимо для разделения пунктов меню, его не было в предыдущей части статьи (просто забыл)*/
padding-top : 1px ;
float : none ;
}
#nnavv ul a {
/* Делаю элементы блочными. */
display : block ;
/* Запрещаю перенос строк текста на новую строку, чтобы создавался многострочный выпадающий элемент списка. */
white-space : nowrap ;
}
#nnavv li : hover ul { /* Создаю выпадающий пункт, который появится при наведении. */
left : 0 ; /* Возвращаю его обратно на экран пользователя, — когда нужно. */
opacity : 1 ; /* Убираю прозрачность*/
}
#nnavv li : hover a { /* В этом стиле я устанавливаю свойства для элементов верхнего уровня, — в то время, когда показывается выпадающий список. */
/* Подчеркну*/
text-decoration : underline ;
/* Сделаю полупрозрачным. */
background : rgba ( 109 , 15 , 53 , 0.74 ) ;
background : #6b0c36 ;
}
#nnavv li : hover ul a { /* Поменял некоторые стили первого уровня при появлении выпадающего элемента. */
/* Уберу форматирование*/
text-decoration : none ;
-webkit-transition : -webkit-transform 0.077s linear ;
}
#nnavv li : hover ul li a : hover { /* Здесь я задаю стили для конкретных выпадающих пунктов, при наведении на них курсора — чтобы они отличались от тех элементов, куда курсор не попадает*/
-moz-transform : scale ( 1.07 ) ;
-webkit-transform : scale ( 1.07 ) ;
/* Задам цвет фона выпадающего элемента*/
background : #334 ;
background : rgba ( 50 , 50 , 50 , 0.74 ) ; /* Сделаю полупрозрачным. */
text-decoration : underline ;
}
Готово! Финальный результат:
БОНУС — суперкрутой выпадающий список на ХТМЛ и ЦСС
Четвертый и последний на сегодня. Я устал, вы устали — думаю четыре выпадающих меню будет достаточно для того, чтобы выбрать наиболее оптимальный вариант для себя.
Тоже делаем список со ссылками, отображающимися при наведении. Никаких анимаций, модных выездов, мигания — только чистый кроссбраузерный код, простой и эффективный. Вместо «display:none;» использую «left: -9999px;». Ну там сами увидите.
CSS-код, который я поместил в :
ul .ddropdownn li { /* Считаем координаты относительно исходного места. */ position : relative ; }
ul .ddropdownn , ul .ddropdownn-inside {
/* Отступы на нуле. */
padding : 0 ;
/* Маркеры уберем. */
list-style-type : none ;
}
ul .ddropdownn-inside {
/* Спрячем дочерние элементы выпадающего списка. */
left : -9999px ;
position : absolute ;
}
ul .ddropdownn li .ddropdownn-top {
/* Небольшой отступ. */
margin : 0 1px 0 0 ;
/* Выравнивание по левой стороне. */
float : left ;
display : inline ;
}
ul .ddropdownn li .ddropdownn-top a {
/* Делаю элементы блочными. */
display : block ;
/* Снова отступы. */
padding : 3px 10px 4px ;
}
ul .ddropdownn a .ddropdownn-top { /* Цвет фона. */ background : #efefef ; }
ul .ddropdownn a .ddropdownn-top : hover { /* Отступы. */ padding : 3px 10px 4px ; }
ul .ddropdownn li .ddropdownn-top : hover .ddropdownn-inside {
left : 0 ;
/* Делаю элементы блочными. */
display : block ;
}
ul .ddropdownn .ddropdownn-inside { /* Цвет фона. */ background : #ffffff ; }
ul .ddropdownn .ddropdownn-inside a : hover { /* Цвет фона изменится при наведении. */ background : #efefef ; }
Результат (без наведения курсора):
Результат (при наведении курсора):
Итоги: скачать готовый html+css код выпадающего списка меню
Как вы могли убедиться на вышеприведенных примерах, выпадающий список без особых проблем делается на обычном HTML.
Надеюсь один из списков украсит меню вашего проекта или хотя бы будет использован в качестве основы.
Я подготовил для вас архив, который вы можете скачать. Там все 4 выпадающих списка — html код и css стили прямо в файле. Там думаю разберетесь.
Превью содержимого файла:
P.S. Ну а если вы вдруг неправильно написали поисковый запрос и зашли не туда (не нашли то чего нужно), не расстраивайтесь — у меня есть пара видео, где при помощи и в HTML страницу вставляются выпадающие списки. Видео 1:
Источник: blogwork.ru
Тег HTML выпадающий список
Тег в HTML используется для создания выпадающего списка в HTML форме.
С помощью атрибута multiple можно создать список с выбором нескольких значений (список с множественным выбором).
Выпадающий список в HTML является одним из элементов форм. Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.
При отправке формы, на сервер будет отправлена переменная, в качестве названия имеющая имя списка select (значение атрибута name ), содержащая значение выбранного пункта списка. Если в выбранном пункте списка есть атрибут value , то значением считается его содержимое, в противном случае значением считается содержимое тега .
Синтаксис
элементы списка
Примеры использования выпадающего списка в HTML коде
Ниже представлены 4 основных варианта выпадающих списков HTML.
Простой HTML выпадающий список
HTML код простого выпадающего списка
Синий
Зеленый
Желтый
Красный
Оранжевый
Черный
Выпадающий список с выбором нескольких значений
Добавить списку возможность множественного выбора (выбора одновременно нескольких значений) можно используя атрибут multiple . Количество одновременно выводимых на экран пунктов списка с множественным выбором регулируется с помощью атрибута size .
Атрибут name такого списка должен заканчиваться символами «[]», например, name=»cars[]» .
HTML код выпадающего списка с выбором нескольких значений
Nissan
Toyota
BMW
Wolksvagen
Skoda
Mercedes-Benz
Раскрывающийся список с группами пунктов
HTML код раскрывающегося списка с группами пунктов
Москва
Санкт-Петербург
Новосибирск
Киев
Харьков
Львов
Минск
Бобруйск
Гомель
HTML список обязательный для заполнения (выбора)
Для того, чтобы создать список select , обязательный для заполнения ( список, где пользователь должен обязательно выбрать значение) нужно использовать атрибут required , а также добавить внутрь списка первым пунктом с пустым значением атрибута value .
HTML код выпадающего списка обязательного для выбора (заполнения)
Выберите значение
Синий
Зеленый
Желтый
Красный
Оранжевый
Черный
Поддержка браузерами
| Тег |  |
 |
 |
 |
 |
| Да | Да | Да | Да | Да |
Атрибуты тега select
Логический атрибут. Если указан, при загрузке документа фокус будет переведен на список.
Логический атрибут. Если указан, делает список неактивным.
Данные списка, отмеченного этим атрибутом, не будут переданы на сервер при отправке формы. Атрибут также отключает возможность изменения состояния списка пользователем (например, изменение выбранного пункта).
Указывает на форму, к которой относится список. Используется, если список находится вне HTML кода формы.
Если список находится внутри тега , то использовать атрибут form не нужно, список по умолчанию привязан к форме, внутри которой находится.
Логический атрибут. Открывает возможность множественного выбора. Если указан, вместо выпадающего списка будет выведен список с возможностью выбрать несколько значений (пунктов) одновременно. Количество элементов, доступных без скроллинга регулируется атрибутом size.
Имя списка. Используется при передаче данных формы на сервер. Значение списка будет передано в переменной, имеющей имя, указанное в этом атрибуте.
Логический атрибут. Если указан, список будет определен как обязательный для заполнения (обязательный для выбора). Форма не будет отправлена на сервер, если в таком списке не будет выбрано ни одно значение.
Заполнение контролируется браузером. При попытке отправить форму с незаполненным обязательным списком браузеры обычно выводят на экран ошибку заполнения.
Количество пунктов списка, одновременно выводимых на экран. Для выпадающего списка используется значение 1. Это значение по умолчанию.
Если значение больше чем 1, вместо выпадающего списка будет выведен список со скроллингом.
Источник: guruweba.com
Как создать выпадающий список в редакторе таблиц «Р7-Офис»
Наличие выпадающего списка значительно сокращает время заполнения таблицы и уменьшает вероятность ошибок при вводе данных, так как список ограничен только заранее определенными вариантами.
Допустим, в таблице с информацией о заказах необходимо указывать тип товара, который покупатель желает приобрести. Если в таблице отсутствует выпадающий список с вариантами выбора товара, то каждый раз новые записи придется вводить вручную, что может быть довольно трудоемким процессом, особенно при работе с большими таблицами.
Если в таблице есть выпадающий список с предустановленными вариантами товаров, то пользователь сможет просто выбрать из списка нужный.
Как сделать выпадающий список в «Р7-Офис»: пошаговая инструкция
Сперва нужно открыть документ, в котором будет создан выпадающий список. Для примера возьмем таблицу с информацией о заказах: код операции и стоимость товара будет заполняться вручную, а товар сделаем в виде выпадающего списка. Для этого:
1. Выделяем диапазон ячеек, где должен быть размещен выпадающий список (c B14 до В18).
2. На верхней панели меню выбираем вкладку «Данные». Из выпадающего списка нажимаем «Проверка данных». В диалоговом окне «Проверка данных» переходим в раздел «Настройки», а затем «Список».
3. В поле «Источник» вводим список значений, разделяя каждое значение запятой. Например, для таблицы с заказами это будет «Одежда, Обувь, Аксессуары».
Совет: если возможных вариантов больше десятка, лучше отдельно вывести пул значений в таблицу, а затем добавить в «Источник» весь диапазон данных.
4. Нажимаем «ОК», чтобы закрыть диалоговое окно «Проверка данных». Выпадающий список готов. Чтобы не выполнять одни и те же действия каждый раз, выделяем ячейку со списком и протягиваем его ниже левой кнопкой мыши. Для изменения значений в выпадающем списке нужно открыть диалоговое окно «Проверка данных» и внести изменения в поле «Источник».
Источник: r7-office.ru