Как в html сделать выпадающий список
Как сделать выпадающий список в HTML (ТОП 16)
За последние два года, разработка веб-приложений (сайтов) продвинулась далеко вперед и то, что мы использовали для создания сайта ранее — уже устарело или появились более свежие методы.
Ранее, чтобы создать выпадающий список в html (на англ. — dropdown), мы просто использовали и . Факт в том, что мы и сейчас может его использовать, но зачастую нам нужно менять стили и адаптировать цветовую гамму выпадающего списка под стиль дизайна. К сожалению, не всегда получается стилизовать так как хочется, потому что select и option имеют свои ограничения и плохую поддержку кроссбраузерности.
Специально для этой статьи, я нашел 16 разных примеров, которые могут пригодиться во время разработки сайта. И так приступим.
1. Настраиваемый список
Html шаблон, который позволяет настроить собственные цвета на выпадающего списка.
Посмотреть в песочнице — http://codepen.io/silverdrop/pen/msrcE
2. Сделанный на CSS3/JavaScript
Написан на CSS3 и JavaScript. Обычный выпадающий список.
Посмотреть в песочнице — http://codepen.io/pedronauck/pen/fcaDw
3. Стиль: станции метро
Прозрачный выпадающий список со стилистикой станций метро.
Посмотреть в песочнице — http://codepen.io/carlcalderon/pen/KhwDH
4. Dropy. Написанное на SCSS & jQuery
Посмотреть в песочнице — http://codepen.io/Tombek/pen/JAvHC
5. Для длинных выдающих списков
Отличное решение для длинных выпадающих меню.
Посмотреть в песочнице — http://codepen.io/larrygeams/pen/feoDc
6. Темное и светлое выпадающее меню
Выпадающее меню, которое написано на чисто CSS без использования каких-либо скриптов.
Посмотреть в песочнице — http://codepen.io/Thibaut/pen/Jasci
7. Навигация, эффект раскрытия
Отлично подойдет для боковых меню на сайте, чтобы визуально показать категории на сайте.
Посмотреть в песочнице — http://cssdeck.com/labs/navigation-dropdown-with-flip-effect
8. Стильное меню настроек пользователя
Посмотреть в песочнице — http://codepen.io/jakestuts/pen/nEFyw
9. CSS3 выпадающий список
Посмотреть в песочнице — http://codepen.io/daniesy/pen/pfxFi
10. UI выпадающее меню
Сделано в стиле UI, подойдет под UI стилистику сайта.
Посмотреть в песочнице — http://codepen.io/Jeplaa/pen/IzAvx
11. Простой dropdown
Посмотреть в песочнице — http://codepen.io/Dianatomic/pen/HqICG
12. Выбор флага
Dropdown в стиле выбора страны.
Посмотреть в песочнице — http://codepen.io/abhishek/pen/bkfLi
13. Обычный HTML, CSS dropdown
Посмотреть в песочнице — http://codepen.io/Metty/pen/dglwH
14. Пользовательские действия
Посмотреть в песочнице — http://codepen.io/DKunin/pen/EIobp
15. Анимационное выпадающее меню
Посмотреть в песочнице — http://codepen.io/MrBambule/pen/jIseg
16. 3D dropdown
Довольно интересный и простой дизайн.
Посмотреть в песочнице — http://codepen.io/mingger/pen/hdtiD
Надеюсь вам понравилось моя подборка. Оставляйте комментарии, делитесь мнением и присылайте собственные работы!
Как сделать выпадающий список в html (подборка ТОП 16) от bologer
Как сделать выпадающий список в HTML
Простейший выпадающий список в HTML легко создать, используя тег select. Это тег-контейнер, в него вкладываются теги option – именно они задают элементы списка.
Есть несколько вариантов списков, которые можно сделать с помощью тега select: раскрывающийся список (варианты выпадают после клика на основном поле или наведения на него курсора) и список множественного выбора – в нем пользователь может выбрать несколько пунктов. Первые более распространены, они являются значимым элементом навигации современных сайтов. Выпадающий список множественного выбора можно применить, например, в каталогах, где нужно выбрать несколько характеристик товара.
Изменять внешний вид и свойства списков можно с помощью универсальных и специальных атрибутов.
Атрибуты тега select
1. Multiple – задает множественный выбор.
2. Size – задает количество видимых строк в списке, то есть высоту. И тут все зависит от того, присутствует атрибут multiple или нет. Если да, и вы не указываете size, то при наличии multiple пользователь увидит все возможные варианты выбора, если же multiple отсутствует, то показана будет всего одна строчка, а остальные посетитель сможет прочитать, когда нажмет на значок лифта с правой стороны. Если же высота size задана и она меньше количества вариантов, то справа появится полоса прокрутки.
3. Name – имя. Выпадающий список может обойтись и без него, но оно может быть необходимым для взаимодействия с программой-обработчиком на сервере. Как правило, имя все-таки указывают.
Тег select не имеет обязательных атрибутов в отличие от тега option.
Атрибуты вложенного тега option
- Selected – предназначен для выделения пункта списка. Пользователь сможет выделять более одного пункта, если задан атрибут multiple (см. выше).
- Value – значение. Этот атрибут обязателен. Веб-сервер должен понимать, какие именно пункты списка выбрал пользователь.
- Label. С помощью этого атрибута можно сокращать слишком длинные элементы списков. Например, на экран будет выводиться «Милан», вместо указанного в теге option «Милан — административный центр Ломбардии. Северная Италия». Этот атрибут также используется для группировки пунктов в списке.
Что касается ширины списка, то она устанавливается по умолчанию по длине самого широкого текста в списке. Разумеется, ширину можно менять при помощи стилей HTML.
Его можно сделать при помощи CSS, например, список будет появляться при наведении курсора на элемент страницы. Отличные возможности для создания списков предоставляет JavaScript , работу которого упрощает библиотека Jquery. Выпадающий список, подключенный с помощью этой библиотеки, может быть очень сложным, например, каскадным. То есть при выборе элемента в одном списке появляется следующий список, например, существует пункт меню «Женская одежда» (при наведении выпадают виды одежды), затем при выборе одного из видов, например, «Верхняя одежда», выпадает список с элементами: куртки, парки, пальто, полупальто, шубы и т. п.
Мы поверхностно перечислили основные способы, при помощи которых можно создать выпадающий список. Разумеется, есть масса нюансов в HTML, в CSS и в JavaScript, которые позволяют менять функциональность и внешний вид списков.
Элемент Select. Как сделать выпадающий список на HTML.
Посмотрите на следующий выпадающий список.
Пункт 1Пункт 2Пункт 3
Этот список становится возможным создать с помощью языка HTML. Давайте рассмотрим код, который за это отвечает.
Пункт 1 Пункт 2 Пункт 3Итак за создание самого списка отвечает элемент select, а за пункты, которые будут выпадать элемент option.
Вполне возможно, что вам может понадобиться сделать так, чтобы по умолчанию у вас был выбран не «Пункт 1», который идет первый по списку, а скажем «Пункт 3». Для этой цели можно воспользоваться атрибутом selected.
Вот как будет выглядеть код:
Пункт 1 Пункт 2 Пункт 3
Как создать редактируемый выпадающий список в HTML?
Я не уверен, что есть способ сделать это автоматически без javascript.
Что вам нужно — это что-то, что работает на стороне браузера, чтобы отправить форму на сервер, когда пользователь делает выбор — следовательно, javascript.
Кроме того, убедитесь, что у вас есть альтернативное средство (то есть кнопка отправки) для тех, у кого отключен javascript.
Хороший пример: Combo-Box Viewer
вчера у меня был даже более сложные комбо-бокс, с этим dhtmlxCombo, используя Ajax, чтобы получить соответствующие значения среди большого количества данных.
Тег select — выпадающий список
Тег select создает выпадающий список для использования в HTML формах.
Отдельный пункт списка должен храниться в теге option.
Атрибуты
| Атрибут | Описание |
|---|---|
| multiple | Наличие данного атрибута создает мультиселект Необязательный атрибут. Пользоваться так: <select multiple> или так <select multiple=»multiple»>. |
| name | Имя выпадающего списка. Нужно для того, чтобы достать данные поля ввода в PHP. Для корректной работы формы имена полей ввода не должны совпадать друг с другом (в одной форме). Если они совпадают — в PHP придут данные того поля ввода, которое ниже в HTML коде. |
Пример
Давайте посмотрим, как работает выпадающий список:
:
Пример
Давайте ширину выпадающего списка сделаем равной ширине самого большого элемента (если она не будет явно указана с помощью CSS свойства width):
<select>
<option>Москва - столица России</option>
<option>Минск</option>
<option>Киев</option>
<option>Лондон</option>
</select>
:
Пример . Выбор по умолчанию
А теперь давайте попробуем выбрать по умолчанию город Минск. Сделаем это с помощью атрибута
<select>
<option>Москва - столица России</option>
<option selected>Минск</option>
<option>Киев</option>
<option>Лондон</option>
</select>
:
Пример . Мультиселект
Давайте теперь превратим обычный select в мультиселект с помощью атрибута multiple. Для этого зажмем клавишу контрол (ctrl) и, не отпуская ее, можем выбрать несколько пунктов выпадающего списка. Или же просто выделим мышкой несколько пунктов (зажмием левую кнопку и выделяем).
<select multiple name="city[]">
<option>Москва - столица России</option>
<option>Минск</option>
<option>Киев</option>
<option>Лондон</option>
</select>
:
Пример . Несколько значений по умолчанию в мультиселекте
А теперь, в мультиселекте по умолчанию, попробуем выбрать более, чем одно значение:
<select multiple name="city[]">
<option>Москва - столица России</option>
<option selected>Минск</option>
<option>Киев</option>
<option selected>Лондон</option>
</select>
:
Смотрите также
- атрибут selected,
который задает выбранный по умолчанию пункт списка - тег optgroup,
который группирует пункты списка - тег datalist,
который создает выпадающий список
Выпадающие списки в HTML-формах. Самоучитель HTML
Выпадающие списки в HTML-формах имеют интересную конструкцию, которорая состоит из тега-оболочки select и тегов-элементов option. Атрибут name присваивается тегу select, а атрибут value тегу option.
<select name="name_spiska" >
<option value="0"> Ваш возраст </option>
<option value="1"> до 18 </option>
<option value="2"> 18-35 </option>
<option value="3"> 35-50 </option>
<option value="4"> больше 50 </option>
</select>Результат: Ваш возраст до 18 18-35 35-50 больше 50
При использовании в одной HTML-форме двух или более списков помещать их в таблицу нет необходимости. За исключением случаев если этого требует ваш дизайн(шаблон) сайта.
В выпадающем списке всегда(по умолчанию) первым отображается верхний элемент. Но умолчания для того и придумали чтобы их можно было менять на нужное вам значение. Делается это при помощи атрибута
<select name="name_spiska" >
<option value="1"> до 18 </option>
<option value="2" selected> 18-35 </option>
<option value="3"> 35-50 </option>
<option value="4"> больше 50 </option>
</select>Выбрать возраст: до 18 18-35 35-50 больше 50
Из выпадающего списка можно сделать прокручивающийся список при помощи атрибута size тега select.
<select name="name_spiska" size="3">
<option value="1"> до 18 </option>
<option value="2"> 18-25 </option>
<option value="3"> 25-35 </option>
<option value="4"> 35-50 </option>
<option value="5"> 50-60 </option>
<option value="6"> больше 60 </option>
</select>до 18 18-25 25-35 35-50 50-60 больше 60
Как заметили, значение атрибута size является цифра, которая указывает сколько элементом должно отображаться, в моем примере три.
Раскрывающийся список | Yocton
Содержание:
Элемент <select> создает раскрывающееся меню, из которого пользователь может выбрать пункт.
ОдинДваТриЧетыре<select name=""> <option value="1">Один</option> <option value="2">Два</option> <option value="3">Три</option> <option value="4">Четыре</option> </select>
Вы можете изменить количество отображаемых пунктов меню с помощью атрибута size. Значение этого атрибута равное 0 или 1 отображает стандартное раскрывающийся список. Если же атрибутsize превышает 1, то список отображается как поле, отображающее несколько строк, с одним значением на строку и полосой прокрутки для выбора доступных пунктов.
<select name="" size="3"></select>По умолчанию пользователи могут выбирать только одно значение. Добавление атрибута multiple позволяет пользователям одновременно выбирать несколько элементов списка и отправлять все выбранные значения в форме. Использование атрибута multiple автоматически преобразует раскрывающийся список в поле, как если бы он имел определенный размер. Размер по умолчанию этого поля определяется конкретным браузером, который вы используете, и его невозможно вернуть в в вид обычного раскрывающегося списка.
<select name="" multiple></select>При использовании атрибута multiple существует разница между использованием значений 0 и 1 для атрибута size. Использование 0 приведет к тому, что браузер будет вести себя по умолчанию, как будто атрибута size вообще нет. Использование значения равного 1 будет явно задавать размер получаемого поля только в одну строку.
Элементы option внутри элемента select — это те пункты списка, из которых пользователь будет выбирать. Стандартный синтаксис для элемента option выглядит следующим образом:
<option>Выбери меня</option>Однако важно отметить, что текст внутри самого элемента <option> не всегда используется, и по существу становится значением по умолчанию для атрибутов, которые не указаны.
На самом деле внешним видом и передоваемым значением на сервер являются соответственно атрибуты label и value. Атрибут label представляет собой текст, который будет отображаться в раскрывающемся меню (видимый пункт, который вы выбираете из списка). Атрибут value — это текст, который будет отправлен вместе с отправкой формы. Если одно из этих значений опущено, то вместо него использует текст внутри элемента как значение. Таким образом, приведенный выше пример может быть «расширен»:
<option label="Пункт 1" value="1">Выбери меня</option>
<option label="Пункт 2" value="2">Обратите внимание на отсутствие внутреннего текста и конечного тега, которые не требуются для фактического создания пункта списка. Если они будут включены, то внутренний текст будет проигнорирован, потому что оба атрибута указаны и текст не нужен. Тем не менее большинство пишут иным образом:
<option value="1">Пункт 1</option>
<option value="2">Пункт 1</option>Вы также можете указать определенный пункт, которая будет выбран в списке по умолчанию, добавив ему атрибут selected. По умолчанию, если в списке ни помечен ни один пункт атрибутом selected, то при отображении будет отображаться первый пункт. Если несколько пунктов имеют атрибут selected, то последний пункт с атрибутом selected будет выбран по умолчанию.
<option value="2" selected>Два</option>Если вы используете атрибут selected в многовариантном списке, то по умолчанию будут выбраны все пункты с этим атрибутом, и ни пункт не будет выбран, если все пункты не имеют этого атрибута.
<option value="1">Один</option>
<option selected value="2">Два</option>
<option value="3">Три</option>
<option selected value="4">Четыре</option>Вы можете группировать свои пункты в раскрывающимся списке, чтобы обеспечить более структурированный макет в длинном списке параметров, с помощью элемента <optgroup>.
Синтаксис очень простой, просто используя элемент с атрибутом label для идентификации заголовка для группы и содержащий ноль или более пунктов, которые должны быть внутри этой группы.
<select name="">
<option value="milk">Молоко</option>
<optgroup label="Фрукты">
<option value="banana">Бананы</option>
<option value="strawberry">Клубника</option>
</optgroup>
<optgroup label="Овощи" disabled>
<option value="carrot">Морковь</option>
<option value="zucchini">Цукини</option>
</optgroup>
</select>При использовании группировки пунктов не обязательно все их группировать. Кроме того, при отключении группы будут отключены все пункты внутри этой группы, и невозможно вручную включить один пункт в отключенной группе.
Элемент <datalist> указывает список пунктов для элемента . Он позволяет создать функцию автозаполнения для элементов . Пользователи будут видеть раскрывающийся список параметров по мере их записи.
Список, создаваемый элементом <datalist>, связывается с текстовым полем посредством атрибута id. Его значение должно совпадать со значением атрибута list элемента <input>.
<input list="Languages">
<datalist>
<option value="PHP">
<option value="Perl">
<option value="Python">
<option value="Ruby">
<option value="C+">
</datalist>Но не все браузеры поддерживают данный элемент, например Safari.
Как сделать выпадающий список в Excel
Выпадающий список – невероятно полезный инструмент, способный помочь сделать работу с информацией более комфортным. Он дает возможность вместить в ячейке сразу несколько значений, с которыми можно работать, как и с любыми другими. Чтобы выбрать нужное, достаточно нажать на значок стрелочки, после чего появляется перечень значений. После выбора определенного, ячейка автоматически заполняется им, и формулы пересчитываются, исходя из него.
Excel предусматривает множество различных методов генерации выпадающего меню, и кроме того, дает возможность гибко настраивать их. Давайте проанализируем эти методы более подробно.
Процесс создания списка
Чтобы сгенерировать всплывающее меню, следует кликнуть на пункты меню по пути «Данные» – «Проверка данных». Откроется диалоговое окошко, где надо найти вкладку «Параметры» и нажать по ней, если она до этого еще не была открыта. В нем есть множество настроек, но нам важен пункт «Тип данных». Из всех значений «Список» – это то, что надо.
1Количество методов, которыми осуществляется ввод информации во всплывающий перечень, достаточно большое.
- Самостоятельное указание элементов списка через точку с запятой в поле «Источник», расположенного на той же вкладке того же диалогового окна.
2
- Предварительное указание значений. В поле «Источник» содержится диапазон, где имеется необходимая информация.
3
- Указание именованного диапазона. Метод, повторяющий прошлый, но только необходимо предварительно назвать диапазон.
4
Любой из этих методов выдаст требуемый результат. Давайте разберем методы генерации раскрывающихся перечней в реальных ситуациях.
На основе данных из перечня
Допустим, у нас есть таблица, описывающая виды разных фруктов.
5Для создания перечня в раскрывающемся меню, основываясь на этом наборе информации, нужно совершить такие действия:
- Выбрать ячейку, отведенную под будущий перечень.
- На ленте найти вкладку «Данные». Там осуществляем нажатие по «Проверка данных».
6
- Найти пункт «Тип данных» и переключить значение на «Список».
7
- В поле, обозначающем опцию «Источник», ввести нужный диапазон. Обратите внимание, что нужно указывать абсолютные ссылки, чтобы при копировании списка информация не смещалась.
8
Кроме этого, предусмотрена функция генерации списков сразу больше, чем в одной ячейке. Чтобы этого добиться, следует выбрать их все, и совершить аналогичные описанным раньше действия. Снова необходимо удостовериться, что записаны абсолютные ссылки. Если в адресе нет значка доллара возле названия колонки и ряда, то нужно их добавить путем нажатия клавиши F4 до тех пор, пока возле названия столбца и ряда не будет стоять знак $.
С ручной записью данных
В приведенной раньше ситуации перечень записывался путем выделения необходимого диапазона. Это удобный метод, но иногда необходимо вручную записывать данные. Это даст возможность избежать дублирования информации в рабочей книге.
Допустим, перед нами стоит задача создать список, содержащий два возможных варианта выбора: да и нет. Чтобы реализовать поставленную задачу, необходимо:
- Нажать по ячейке, отведенной под перечень.
- Открыть «Данные» и там отыскать знакомый нам раздел «Проверка данных».
9
- Снова выбираем тип «Список».
10
- Здесь в качестве источника необходимо ввести “Да;Нет”. Видим, что информация при ручном вводе вводится с использованием точки с запятой для перечисления.
После нажатия «ОК» у нас появился следующий результат.
11Далее программой будет автоматически создано раскрывающееся меню в подходящей ячейке. Вся информация, которую пользователь указал качестве пунктов всплывающего перечня. Правила создания перечня в нескольких ячейках аналогичные предыдущим за тем лишь исключением, что следует указывать информацию вручную с использованием точки с запятой.
Создание раскрывающегося списка при помощи функции СМЕЩ
Кроме классического метода возможно применение функции СМЕЩ, чтобы генерировать выпадающие меню.
Откроем лист.
12Чтобы применять функцию для выпадающего списка надо выполнить такое:
- Выбрать интересующую ячейку, где надо разместить будущий список.
- Открыть последовательно вкладку «Данные» и окно «Проверка данных».
13
- Задаем «Список». Делается это аналогично предыдущим примерам. Наконец, используется такая формула: =СМЕЩ(A$2$;0;0;5). Мы ее вводим там, где задаются ячейки, которые будут использоваться в качестве аргумента.
Потом программой создастся меню с перечнем фруктов.
Синтаксис этой такой:
=СМЕЩ(ссылка;смещ_по_строкам;смещ_по_столбцам;[высота];[ширина])
Видим, что сия функция предусматривает 5 аргументов. Сначала дается первый адрес ячейки для смещения. Следующие два аргумента указывают, сколько рядов и колонок, на какое происходит смещение. Если говорить о нас, в качестве аргумента «Высота» приводится значение 5, поскольку оно отображает высоту перечня.
Выпадающий список в Excel с подстановкой данных (+ с использованием функции СМЕЩ)
В приведенном случае СМЕЩ позволила создать всплывающее меню, расположенное в фиксированном диапазоне. Недостаток этого метода – после добавления пункта придется самостоятельно редактировать формулу.
Чтобы создать динамический перечень с поддержкой ввода новой информации, необходимо:
- Осуществить выделение интересующей ячейки.
- Раскрыть вкладку «Данные» и нажать по «Проверка данных».
- В открывшемся окошке снова осуществляем выбор пункта «Список» и источником данных указываем такую формулу: =СМЕЩ(A$2$;0;0;СЧЕТЕСЛИ($A$2:$A$100;”<>”))
- Нажимаем «ОК».
Здесь содержится функция СЧЕТЕСЛИ, чтобы сразу определять, сколько ячеек заполнено (хотя у нее есть значительно большее количество применений, просто мы записываем ее здесь для конкретной цели).
Чтобы формула функционировала нормально, надо проследить есть ли на пути формулы пустые ячейки. Их быть не должно.
Выпадающий список с данными другого листа или файла Excel
Классический метод не функционирует, если требуется получить информацию из другого документа или даже содержащегося в этом же файле листа. Для этого используется функция ДВССЫЛ, позволяющая ввести в верном формате ссылку на ячейку, находящуюся в другом листе или вообще – файле. Необходимо выполнить такие действия:
- Активировать ячейку, где размещаем перечень.
- Открываем уже знакомое нам окно. В том же месте, где мы ранее указывали источники на другие диапазоны, указывается формула в формате =ДВССЫЛ(“[Список1.xlsx]Лист1!$A$1:$A$9”). Естественно, вместо Список1 и Лист1 можно вставлять свои имена книги и листа соответственно.
Внимание! Имя файла указывается в квадратных скобках. При этом Excel не сможет применять в качестве источника информации файл, закрытый в данный момент.
Также следует отметить, что название файла сам по себе есть смысл указывать только если требуемый документ располагается в той же папке, что и та, где будет вставляться перечень. Если нет, то необходимо полностью указывать адрес этого документа.
Создание зависимых выпадающих списков
Зависимый список – это тот, на содержимое которого влияет выбор пользователя в другом перечне. Допустим, перед нами открыта таблица, содержащая три диапазона, каждому из которых присвоено имя.
24Нужно действовать по таким шагам для генерации перечней, на результат которых влияет опция, выбранная в другом списке.
- Создать 1-й перечень с именами диапазонов.
25
- В месте ввода источника один за одним выделяются требуемые показатели.
26
- Создать 2-й перечень, зависящий от типа растений, который предпочел человек. Как вариант, если в первом указать деревья, то информацией во втором списке станет «дуб, граб, каштан» и дальше. Необходимо записать в месте ввода источника данных формулу =ДВССЫЛ(E3). E3 – ячейка содержащая название диапазона 1.=ДВССЫЛ(E3). E3 – ячейка с наименованием списка 1.
Теперь все готово.
27Как выбрать несколько значений из выпадающего списка?
Иногда нет возможности отдать предпочтение только одному значению, поэтому надо выбрать больше одного. Тогда надо добавить в код страницы макрос. С использованием комбинации клавиш Alt + F11 открывается редактор Visual Basic. И туда вставляется код.
Private Sub Worksheet_Change(ByVal Target As Range)
On Error Resume Next
If Not Intersect(Target, Range(“Е2:Е9”)) Is Nothing And Target.Cells.Count = 1 Then
Application.EnableEvents = False
If Len(Target.Offset(0, 1)) = 0 Then
Target.Offset(0, 1) = Target
Else
Target.End(xlToRight).Offset(0, 1) = Target
End If
Target.ClearContents
Application.EnableEvents = True
End If
End Sub
Чтобы содержимое ячеек показывались внизу, вставляем в редактор такой код.
Private Sub Worksheet_Change(ByVal Target As Range)
On Error Resume Next
If Not Intersect(Target, Range(“Н2:К2”)) Is Nothing And Target.Cells.Count = 1 Then
Application.EnableEvents = False
If Len(Target.Offset(1, 0)) = 0 Then
Target.Offset(1, 0) = Target
Else
Target.End(xlDown).Offset(1, 0) = Target
End If
Target.ClearContents
Application.EnableEvents = True
End If
End Sub
Ну и наконец, для записи в одной ячейке используется этот код.
Private Sub Worksheet_Change(ByVal Target As Range)
On Error Resume Next
If Not Intersect(Target, Range(“C2:C5”)) Is Nothing And Target.Cells.Count = 1 Then
Application.EnableEvents = False
newVal = Target
Application.Undo
oldval = Target
If Len(oldval) <> 0 And oldval <> newVal Then
Target = Target & “,” & newVal
Else
Target = newVal
End If
If Len(newVal) = 0 Then Target.ClearContents
Application.EnableEvents = True
End If
End Sub
Диапазоны редактируемы.
Как сделать выпадающий список с поиском?
В этом случае надо изначально использовать другой тип перечня. Открывается вкладка «Разработчик», после чего надо кликнуть или тапнуть (если экран сенсорный) на элемент «Вставить» – «ActiveX». Там есть «Поле со списком». Будет предложено нарисовать этот список, после чего он добавится в документ.
28Далее он настраивается через свойства, где в опции ListFillRange прописывается диапазон. Ячейка, где отобразиться определенное пользователем значение, настраивается с помощью опции LinkedCell. Далее нужно просто записывать первые символы, как программа автоматически подскажет возможные значения.
Выпадающий список с автоматической подстановкой данных
Также предусмотрена функция, что данные подставляются автоматически после их добавления к диапазону. Сделать это проще простого:
- Создать набор ячеек для будущего перечня. В случае с нами это набор цветов. Выделяем его.
14
- Далее его необходимо отформатировать, как таблицу. Нужно нажать одноименную кнопку и осуществить выбор стиля таблицы.
15
16
Далее нужно подтвердить этот диапазон путем нажатия клавиши «ОК».
17Выделяем получившуюся таблицу и даем ей имя через поле ввода, находящееся сверху столбца А.
18Все, таблица есть, и она может использоваться в качестве основы для выпадающего списка, для чего надо:
- Выбрать ячейку, где перечень располагается.
- Открыть диалог «Проверка данных».
19
- Тип данных выставляем «Список», а как значения даем имя таблицы через знак =.
20
21
Все, ячейка готова, и в ней показываются названия цветов, как нам изначально и было нужно. Теперь добавлять новые позиции можно просто записывая их в ячейку, располагающуюся немного ниже непосредственно за последней.
22В этом и заключается преимущество таблицы, что диапазон автоматически увеличивается при добавлении новых данных. Соответственно, это самый удобный способ добавления списка.
23Как скопировать выпадающий список?
Для копирования достаточно использовать комбинацию клавиш Ctrl + C и Ctrl + V. Так выпадающий список будет скопирован вместе с форматированием. Чтобы убрать форматирование, нужно воспользоваться специальной вставкой (в контекстном меню такая опция появляется после копирования списка), где выставляется опция «условия на значения».
Выделение всех ячеек, содержащих выпадающий список
Чтобы выполнить эту задачу, необходимо воспользоваться функцией «Выделить группу ячеек» в группе «Найти и выделить».
29После этого откроется диалоговое окно, где следует в меню «Проверка данных» выбрать пункты «Всех» и «Этих же». Первый пункт выделяет все списки, а второй – только похожие на определенные.
Оцените качество статьи. Нам важно ваше мнение:
Переход при выборе пункта из выпадающего списка
Давайте научимся создавать выпадающие списки с возможность включать в них активные ссылки. Таким образом, выбрав необходимый пункт, посетитель вашего сайта сможет перейти по ссылке, ассоциированной с этим пунктом.
Нижеприведенный способ отлично подходит для создания элемента навигации по сайту или же как способ выбора альтернативной языковой/географической версии сайта.
В начале вставим в код страницы скрипт, написанный на языке JavaScript, который будет отвечать за переход.
<script language="JavaScript" type="text/javascript">
<!--
function linklist(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="new")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}
-->
</script>В третьей сточке у нас указывается имя функции («linklist» в данном случае), которое можно задать произвольно, главное чтобы не странице не существовало ещё одной функции с таким же именем.
Далее вставляем сам код выпадающего списка.
<form name="menu">
<select name="sel" onChange="linklist(document.menu.sel)">
<option value="#">Выберите раздел для перехода</option>
<option title="Переход на главную страницу (откроется в новом окне)"
value="http://www.redsimple.ru/" target="new">Главная страница</option>
<option title="Переход к портфолио по сайтам" value="http://www.redsimple.ru/sites/">Сайты</option>
<option title="Переход к странице с изображениями" value="http://www.redsimple.ru/foto/">Фото</option>
<option title="Переход к архиву ссылок" value="http://www.redsimple.ru/links/">Линки</option>
</select>
</form>Имя формы (<form name=»имя_формы»>) и имя списка (<form name=»имя_списка» … >) указываются произвольными, главное чтобы были уникальными. Самое важное — не напутать их в параметрах вызова нашей функции перехода. Прописывается вызов в атрибутах списка (вторая строчка):
onChange=»имя_функции(document.имя_формы.имя_списка)»
В нашем случае onChange=»linklist(document.menu.sel)»
Если прописать тэгу элемента (<option>)списка атрибут target=»new», то ссылка будет открываться в новом окне (пятая строчка).
В атрибуте title=»…» указываем всплывающую подсказку для ссылки (точно так же, как для тэга <a>).
Так же можно сделать, чтобы переход по ссылке осуществлялся не сразу, а после нажатия кнопки. Скрипт остается тем же самым:
<script language="JavaScript" type="text/javascript">
<!--
function linklist(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="new")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}
-->
</script>А в коде списка меняем событие OnChange на OnClick
<form name="menu">
<select name="sel">
<option value="#">Выберите раздел для перехода</option>
<option title="Переход на главную страницу (откроется в новом окне)"
value="http://www.redsimple.ru/" target="new">Главная страница</option>
<option title="Переход к портфолио по сайтам" value="http://www.redsimple.ru/sites/">Сайты</option>
<option title="Переход к странице с изображениями" value="http://www.redsimple.ru/foto/">Фото</option>
<option title="Переход к архиву ссылок" value="http://www.redsimple.ru/links/">Линки</option>
<input type="button" value="Переход">
</select>
</form>Ну и конечно же смотрим, чтобы на одной странице не было функций, форм и списков с одинаковыми именами.
И ещё, визуальные редакторы Joomla режут JavaSrcipt, по этому необходимо сохранять материал с этим списком в режиме «Без редактора».
Как сделать выпадающий список в HTML
- Автомобили
- Бизнес
- Дом и семья
- Домашний уют
- Духовное развитие
- Еда и напитки
- Закон
- Здоровье
- Интернет
- Искусство и развлечения
- Карьера
- Компьютеры
- Красота
- Маркетинг
- Мода
- Новости и общество
- Образование
- Отношения
- Публикации и написание статей
- Путешествия
- Реклама
- Самосовершенствование
- Спорт и Фитнес
- Технологии
- Финансы
- Хобби
Рубрики
- О проекте
- Реклама на сайте
- Условия
- Конфиденциальность
- Вопросы и ответы
FB
Войти Ему трона не видать: эксперты думают, что принц Чарльз королем не станет Уинстон Черчилль остроумно подметил одну черту характера, свойственную русским Как на самом деле теряются друзья? Отнюдь не ссорах (мнение Бепримеров и передовых методов — Smashing Magazine
Об авторе
Мэтт Кронин — заядлый графический дизайнер, веб-дизайнер / разработчик, программист какао, фотограф, цифровой художник и т.п. Еще ему нравится писать, и он … Больше о Мэтт ↬
Как правило, большинство веб-разработчиков, особенно энтузиасты юзабилити, говорят, что использование раскрывающихся меню — плохая практика, поскольку они сбивают с толку, раздражают и часто не работают. Однако с точки зрения дизайна раскрывающиеся меню — отличная функция, поскольку они помогают очистить загруженный макет.При правильной структуре раскрывающиеся меню могут быть отличным инструментом навигации, но при этом оставаться удобной и привлекательной особенностью дизайна.
Да, верно: раскрывающихся меню навигации могут быть удобными для пользователя . Буквально вчера Джейкоб Нильсен представил результаты своего недавнего исследования раскрывающихся меню, в ходе которого он обнаружил, что большие двумерные раскрывающиеся панели, которые группируют параметры навигации, помогают пользователям избежать прокрутки и могут точно объяснить выбор пользователя с эффективным использованием типографика, значки и всплывающие подсказки.
Эти панели появляются временно и исчезают сами по себе, когда пользователи перемещают указатель на другой параметр верхнего уровня или на «обычную» часть экрана.
Огромная вертикальная выпадающая панель от Foodnetwork; обратите внимание на кнопку закрытия («x» в правом верхнем углу).
В этой статье мы более подробно рассмотрим природу раскрывающихся меню навигации, проанализируем ситуации, в которых их следует или не следует использовать, обсудим различные реализации и, наконец, продемонстрируем пару плохих и хороших примеров таких меню.В статье также есть различные советы и предложения, которые помогут вам работать с раскрывающимися меню.
Вы часто увидите много трендов, в которых используются раскрывающиеся меню. Вот несколько наиболее распространенных.
Организация страниц в разделе
Чаще всего раскрывающиеся меню используются для объединения всех страниц определенной категории в один организованный элемент. По сути, это суб-навигация. Взгляните на дизайн ниже. Выпадающий элемент содержит все различные категории для определенного раздела веб-сайта.
Организация категорий в блоге
Вы увидите, что многие блоги используют раскрывающееся меню для организации категорий и тегов. Почему? Блоги управляются большим объемом информации, поэтому макет должен быть как можно более чистым, чтобы вместить этот контент. Выпадающее меню в конечном итоге помогает объединить ссылки, такие как категории, из элементов макета, таких как боковая панель.
Показать продукты на веб-сайте электронной коммерции
Вы увидите, что многие веб-сайты электронной коммерции используют раскрывающиеся меню для отображения продуктов или категорий продуктов.Выпадающее меню — это удобная функция, в которой все потребители могут легко понять, поэтому это идеальный способ упорядочить продукты. Веб-сайт Best Buy, показанный ниже, делает именно это.
Дисплейные модули
Раскрывающееся меню может быть отличным способом убрать мешающее меню, которое пользователь может щелкнуть, чтобы открыть. Возьмем, к примеру, пример ниже. Элемент входа является частью навигации, а затем отображается в виде раскрывающегося списка. Это отличный способ убрать этот большой элемент из макета без ущерба для удобства использования.
Best Practices
Выпадающие меню на самом деле организуют контент в небольшие, не загроможденные элементы, но если все сделано неправильно, они могут быть столь же плохими, как и беспорядочный макет. Вот несколько способов сделать этот противоречивый элемент более удобным.
Избегайте раскрывающегося списка с более чем двумя уровнями
В целом, это едва ли не худшая ошибка, которую можно сделать с раскрывающимися меню с точки зрения удобства использования. Если это сделано со структурой меню при наведении курсора, пользователь теряет фокус меню всякий раз, когда указатель мыши удаляется от него.Если это сделать с помощью интерактивной структуры, у нее будет слишком много кнопок, и она не будет работать должным образом.
Веб-сайт, показанный ниже, совершает эту ошибку. Меню очень сложно использовать, потому что если вы даже немного потеряете фокус меню с помощью указателя мыши, вам придется начинать сверху. Обратите внимание на всплывающую подсказку, которая также мешает навигации.
В принципе, есть два способа доступа к раскрывающемуся меню: с помощью наведения или щелчка, чтобы активировать меню. С точки зрения дизайна и удобства, всплывающее меню лучше.
С другой стороны, многие будут утверждать, что интерактивное меню лучше, потому что оно намного удобнее. Причина? Из-за способа построения всплывающего меню пользователь должен постоянно держать указатель над меню. Если пользователь теряет фокус всплывающего меню, оно закрывается. Поэтому лучше использовать раскрывающееся меню, которое активируется нажатием кнопки, а затем деактивируется нажатием кнопки еще раз.
CSS-Tricks содержит руководство, показывающее, как создать макет, похожий на макет Digg.Это идеальное раскрывающееся меню с функцией активации / деактивации щелчком, так что вам, безусловно, стоит взглянуть на него.
Кроме того, в Google есть раскрывающееся меню, в котором используется трюк включения / выключения.
Задержка деактивации наведения
Избегание наведения структуры и многих уровней в раскрывающемся списке может быть слишком большим ограничением для навигации, которую вы пытаетесь создать. Однако есть решение, которое может повысить удобство использования всплывающего и многоуровневого меню.В большинстве меню раскрывающийся список исчезает сразу после того, как пользователь отводит указатель мыши от меню. Решение — отсрочить его исчезновение. Или используйте функцию щелчка, которая требует, чтобы пользователи щелкали за пределами области меню, чтобы закрыть раскрывающийся список, аналогично тому, как работает лайтбокс.
Возьмем, к примеру, Dell. Он использует многоуровневое раскрывающееся меню, но его все же можно использовать. Это единственное исключение из использования многоуровневых раскрывающихся меню.
Кроме того, меню на сайте Porsche имеет несколько уровней.Однако в меню очень широкий диапазон фокусировки. Это означает, что вам нужно переместить указатель на определенное расстояние от меню, чтобы закрыть его.
Сама навигация влияет на удобство использования раскрывающегося меню. Один из способов улучшить работу меню с раскрывающимся списком — добавить к параметрам меню эффект наведения. Это точно показывает, с какой кнопки в навигации открывается меню, что, безусловно, поможет пользователям.
Пример ниже, домашняя страница MediaTemple, демонстрирует сильный эффект наведения курсора на параметры навигации, который помогает поддерживать раскрывающееся меню.
Бесшовные переходы
Раскрывающееся меню должно отображаться плавно и без прерываний. Меню должно загрузиться немедленно. Многие веб-сайты делают ошибку, делая меню настолько «тяжелым», что его загрузка занимает больше времени при наведении курсора.
Эффекты перехода — еще одна деталь, которая может выглядеть действительно круто. Вместо того, чтобы просто появиться меню, попробуйте добавить или постепенно исчезнуть. Просто убедитесь, что переход был быстрым и не мешающим.
Вы заметите, что Microsoft не очень хорошо справляется с созданием бесшовного меню. Внимательно посмотрите на изображение ниже. Вы заметите, что контуры соседних меню все еще видны, когда главное меню загружается. Когда вы переходите от кнопки к кнопке в навигации, выпадающие меню имеют небольшую задержку, что выглядит плохо. Конечно, это происходит не во всех браузерах, но и не должно происходить ни в одном.
Удалить всплывающие подсказки
Конечно, при разработке раскрывающихся меню всегда есть небольшие детали, которые влияют на удобство использования.Одна важная практика, которую вы можете упустить, — это наличие всплывающих подсказок или их отсутствие. Вы всегда должны удалять всплывающие подсказки с кнопок с раскрывающимися меню. Причина? Всплывающие подсказки просто мешают, а иногда даже блокируют первый элемент списка в раскрывающемся меню.
Да, мы еще раз выберем Microsoft. Microsoft допускает эту ошибку на своей корпоративной странице. Обратите внимание, как всплывающая подсказка блокирует многие элементы списка, что значительно усложняет навигацию.
Приемы стилизации
Фон из контента тоже может быть проблемой.Фон должен быть тонким, иначе он испортит контент. Вот несколько способов оживить фон контента, не переусердствуя.
Используйте чистый список
Важен не только стиль элемента, но и стиль содержимого. Чистая типографика и читаемый список важны. Используйте разумный интервал между элементами в списке и добавьте границу над и под элементами списка.
Пример ниже от Audi показывает очень хорошо организованный и читаемый список.Элементы списка разделены, и есть даже значки элементов списка.
С другой стороны, на сайте The Washington Post список в раскрывающемся меню очень скудный. Между элементами списка недостаточно интервалов, поэтому меню очень загромождено и его сложно использовать.
Эффекты наведения на элементы списка
Все кнопки нуждаются в каком-либо эффекте наведения, чтобы их можно было использовать. В раскрывающихся списках меню примените легкие эффекты наведения, например, просто изменение цвета текста или фона. Веб-сайт Белого дома использует только изменение фона для элементов списка, но это все равно помогает пользователю.
Полупрозрачный фон
Это не сработает для всех дизайнов, но вам следует подумать о полупрозрачном фоне для меню. Веб-сайт, показанный ниже, имеет прозрачность, поэтому пользователь все еще может видеть фон изображения. Ключ к полупрозрачным элементам — поддерживать сильный и читаемый контраст.
Повсюду вы услышите, что последовательность в стиле является обязательной, и это, безусловно, так. Чтобы навигация и раскрывающееся меню работали вместе как одно целое, стиль должен быть похожим.Используйте те же шрифты и аналогичный фон.
В приведенном ниже примере раскрывающееся меню выглядит так, как должно.
Ниже приведены некоторые примеры раскрывающихся меню, которые где-то не соответствуют стилю и удобству использования.
Это меню плохо оформлено и не работает.
Panasonic
Хотя это меню хорошо оформлено, его трудно использовать из-за плохого эффекта наведения.
Toshiba
Меню Toshiba слишком маленькое и не соответствует правилам оформления.
LG
Как и в меню Microsoft выше, у этого есть небольшая задержка, что затрудняет использование.
Chrysler
На странице Chrysler используется раскрывающееся меню с очень мелким текстом, что затрудняет чтение.
Sun
Эти выпадающие меню довольно неудобны и трудны в использовании. Всплывающая подсказка тоже мешает, и прямо над основной навигацией есть еще одно раскрывающееся меню. Из-за всего этого очень сложно ориентироваться.
Creative Labs
Меню ниже загромождено и не имеет отложенного скрытия или аналогичной техники, поэтому его не очень удобно использовать.
HP
Еще одно всплывающее меню, в котором отсутствуют полезные функции.
Alienware
Черное меню на черном фоне затрудняет использование этого раскрывающегося списка.
Здесь много раскрывающихся меню с удобными функциями и функциями стилизации.
Sony
Хорошо продуманное всплывающее меню с хорошим списком.
ActionEnvelope
Чистая вертикальная раскрывающаяся панель с большим количеством отступов; обратите внимание, как панель выглядит выше других элементов дизайна.Простое и красивое решение.
Helmy Bern
Красиво оформленное меню с плавным переходом.
RedBrick
Это меню аккуратно оформлено и легко читается.
REI
Это раскрывающееся меню очень широкое, поэтому мышь легко удерживать в фокусе.
Philips
Philips имеет большой и удобный раскрывающийся модуль.
Walmart
На сайте Walmart пользователь щелкает область за пределами меню, чтобы закрыть его.
Samsung
Меню Samsung удобно использовать из-за большого размера и стиля.
Epson
Epson показывает другое раскрывающееся меню, которое можно использовать.
Mini Cooper
На этом веб-сайте используется раскрывающееся меню с отложенным закрытием.
Шлюз
Вот еще один полезный раскрывающийся элемент.
Asus Global
Хорошо оформленное меню с отложенным скрытием.
Intel
Очень чистое выпадающее меню.
Target
Хорошо организованное меню с отложенным закрытием.
Garmin
Это раскрывающееся меню простое, но функциональное.
Logitech
Раскрывающийся список с очень красивым стилем, который соответствует меню.
Incase
Это меню очень простое, но служит своей цели.
evelMerch
Небольшое, но функциональное раскрывающееся меню с графикой, показывающей пользователям, что кнопка открывает меню.
IBM
Здесь используется многоуровневый раскрывающийся список, но небольшая задержка упрощает его использование.
EA
Очень чистый и хорошо организованный выпадающий элемент.
Дополнительная литература по SmashingMag:
(al, il)Выпадающие списки Excel — проверка данных
Создайте раскрывающийся список элементов в ячейке с помощью функции проверки данных Excel.Это упростит ввод данных и уменьшит количество ошибок ввода и опечаток. Видеоуроки и пошаговые инструкции ниже
Что такое проверка данных?
В Excel функция проверки данных помогает контролировать, что может быть введенным в ваш рабочий лист. Например, вы можете:
- создать раскрывающийся список элементов в ячейке
- ограничить записи, например дату диапазон или только целые числа
- создать заказ правила того, что можно ввести
В этом руководстве вы узнаете, как создать раскрывающийся список вариантов. в ячейке, как в списке имен сотрудников, показанном ниже.
Создать раскрывающийся список в ячейке
Чтобы создать раскрывающийся список в Excel, вы можете назвать список элементы на основе именованной таблицы Excel. Затем используйте этот список в качестве источника для раскрывающегося списка Проверка данных. Если ты не хочешь создавать именованной таблицы, вы можете следовать инструкциям в именованном диапазоне раздел ниже.
Посмотрите шаги в этом коротком видео и письменные инструкции находятся под видео
Как создать раскрывающийся список
С помощью проверки данных вы можете создать раскрывающийся список параметров в клетка.Есть 3 простых шага:
1. Создайте таблицу элементов ИЛИ создайте список
2. Назовите список
3. Создайте раскрывающийся список
Примечание : Проверка данных не является надежной. Это можно обойти вставив данные в ячейку или выбрав «Очистить»> «Очистить все», на вкладке «Главная» ленты.
1. Создайте таблицу товаров
Самый простой способ создать и поддерживать список опций — это введите их на листе.Вы можете сделать это на листе, который будет содержать в раскрывающихся списках или на другом листе. В этом примере Список будет сохранен на листе с именем Списки .
ПРИМЕЧАНИЕ. В списке проверки данных может отображаться до 32 767 элементов из список на листе.
- Введите заголовок для списка — Сотрудники в этом примере
- Сразу под ячейкой заголовка в одном столбце введите записи, которые вы хотите видеть в раскрывающемся списке.Не оставляйте пустым ячейки между записями.
- Выберите ячейку в списке и на вкладке «Вставка» ленты щелкните Стол
- Поставьте галочку в «Моя таблица с заголовками» и нажмите Ok
Теперь таблица является именованной таблицей Excel.
2. Назовите список
Затем вы создадите именованный диапазон, не включающий заголовок ячейка в таблице.Этот именованный диапазон будет динамическим — он будет регулировать автоматически, если элементы добавляются в список или удаляются из него.
Вы можете использовать Диспетчер имен, как показано на видео, или использовать поле имени. Оба метода описаны ниже. Метод Name Box быстрее, но вы не можете добавить комментарий.
Используйте диспетчер имен
Это метод, показанный на видео. Вы можете установить имя, объем и комментарии.
- Выберите одну из ячеек в списке имен сотрудников.
- На ленте щелкните вкладку Формулы и в группе Определенные имена щелкните Определить имя
- В диалоговом окне «Новое имя» введите имя из одного слова для выбранного диапазона, например EmpNames
- Оставьте объем работ как книгу
- Щелкните поле «Ссылается на» (на листе ячейка, которая в настоящее время указана в поле «Ссылается на», будет выделена)
- Чтобы выбрать все имена в списке, наведите указатель мыши на верхнюю часть ячейки заголовка (B1) и, когда появится черная стрелка, щелкните, чтобы выбрать все имена без ячейки заголовка.(Обязательно нажимайте, когда стрелка находится в ячейке B1, а не в кнопке заголовка столбца B)
- Имя таблицы и имя столбца появятся в поле «Ссылается на»: = Таблица1 [Сотрудники]
- Щелкните OK, чтобы ввести имя.
Используйте поле имени
Это быстрый способ присвоить имя диапазону ячеек.
- Щелкните вверху ячейки заголовка, чтобы выбрать все ячейки в списке (заголовок выделяться не будет).
- Щелкните поле Имя слева от строки формул
- Введите имя из одного слова для выбранного диапазона, например EmpNames, а затем нажмите клавишу Enter , чтобы ввести имя.
- ПРИМЕЧАНИЕ: После того, как вы нажмите Enter, имя исчезнет, а имя таблицы появится в поле имени.
3.Создать раскрывающийся список
Теперь, когда вы создали именованный диапазон, вы можете использовать его для создания выпадающий список в одной или нескольких ячейках
- Выберите ячейки, в которых требуется раскрывающийся список
- На вкладке «Данные» ленты щелкните «Проверка данных».
- В раскрывающемся списке Разрешить выберите Список
- Щелкните поле «Источник», введите знак равенства и список
имя, например:
= EmpNames
ИЛИ нажмите клавишу F3, чтобы просмотреть список имен, щелкните имя и нажмите ОК - Нажмите ОК, чтобы закрыть диалоговое окно Проверка данных.
- Щелкните одну из ячеек и щелкните стрелку раскрывающегося списка.
- Щелкните элемент в раскрывающемся списке, чтобы ввести его в ячейку.
Включить Другой лист
Если вы предпочитаете не создавать именованную таблицу Excel, вы можете создать именованный диапазон и используйте его в качестве источника для раскрывающегося списка. В раскрывающиеся списки могут находиться на том же листе, что и исходный список, или на другой лист.
Посмотрите это видео, чтобы увидеть шаги, и ознакомьтесь с письменными инструкциями здесь: Список из другой книги
Использовать список с разделителями
Вместо того, чтобы обращаться к списку элементов на листе, вы можете введите список в поле «Источник» через запятую. Например:
Да, Нет, Возможно
Примечания :
- Этот метод проверки данных чувствителен к регистру — если пользователь вводит ДА, будет отображаться предупреждение об ошибке.
- Пробелы можно вводить до или после допустимых элементов, и сообщение об ошибке не отображается, например » Да » будет разрешено. (Спасибо Питеру за этот совет.)
Разрешить записи, которых нет в раскрывающемся списке
Чтобы пользователи могли также вводить элементы, которых нет в списке, снимите флажок, чтобы отключить Предупреждение об ошибке.
Скачать образец файла
Вы можете скачать образец файла раскрывающихся списков здесь: Drop Книга вниз по списку.Заархивированный файл имеет формат xlsx и не содержит макросов.
Видео для проверки данных
В этом плейлисте основных видео с проверкой данных . Щелкните, чтобы запустить список воспроизведения. Или в левом верхнем углу видео, щелкните значок «Плейлист» и щелкните миниатюру видео, чтобы начать это видео.
В этом плейлисте видео с расширенной проверкой данных . Щелкните, чтобы запустить список воспроизведения. Или в верхнем левом углу видео, щелкните значок «Плейлист» и щелкните миниатюру видео, чтобы начать это видео
Не пропустите наши советы по Excel
Не пропустите мои последние советы и видео по Excel! Нажмите OK, чтобы получать мой еженедельный информационный бюллетень с советами по Excel и ссылками на другие новости и ресурсы Excel.
Дополнительные уроки
Создание зависимых раскрывающихся списков
Индекс проверки данных Страница
Изменить название продукта на код
Dependent Drop Down Lists Видео
Скрыть использованные предметы в раскрывающемся списке
Список из другой книги
Примеры критериев проверки данных
Правила даты проверки данных
Советы по проверке данных
Проверка данных с помощью комбинированного списка
Создание раскрывающегося списка Excel 2003
Создание раскрывающегося меню навигации с помощью HTML5 и CSS3
Есть несколько отличных решений для раскрывающихся меню навигации, например, плагин jquery superfish.Многие из них используют много файлов и ресурсов для создания раскрывающихся списков, но иногда они вам не нужны. Я хочу показать вам, как создать собственное простое, но стильное раскрывающееся меню, используя новые теги HTML5 и великолепные стили CSS3.
Nav Menu (7783 загрузки)Раскрывающийся список, который мы собираемся создать, скрывается и открывается при наведении курсора, используя только CSS. Используя новые функции переходов CSS3, мы будем анимировать состояния наведения и раскрывающиеся списки. Эти эффекты действуют точно так же, как эффекты javascript, которые вы использовали.Структура файлов проста. Вам понадобятся файлы index.html и style.css для хранения стилей css.
Вот предварительный просмотр того, что мы построим сегодня:
Начнем со структуры HTML. Это головная часть:
Раскрывающееся меню навигации HTML5 / CSS3
В основной части мы добавим html-код для навигационного меню. Каждый список ul внутри li представляет собой раскрывающееся меню. Я добавил «» к каждому родительскому li, чтобы показать иерархию. Код создает двойные кавычки под прямым углом к элементу.