Excel выпадающее меню - Учим Эксель

Выпадающий перечень в Экселе: методы сотворения

Наличие выпадающего перечня в документах Excel способно существенно облегчить жизнь, позволяя не держать в голове огромное количество доборной инфы. В данном материале будет поведано о нескольких более всераспространенных методах того, как создать выпадающий перечень в ячейке «Экселя».

Что за перечень?

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

Разглядим самые всераспространенные методы того, как создать перечень в ячейке «Экселя».

Работа с жаркими кнопками

Данный вариант довольно прост и не просит проведения доп опций, потому что не является частью инвентаря функции по созданию таблицы. Жаркие клавиши с самого начала интегрированы в программку и работают повсевременно. Но даже здесь существует несколько разных вариантов того, как можно выполнить нужную операцию.

Контекстное меню

Чтоб сделать выпадающий перечень в «Экселе» таковым образом, нужно выполнить последующий обычной метод:

  • заполните столбец необходимыми данными;
  • дальше кликните правой клавишей компьютерной мыши по пустой ячейке этого же столбика, чтоб вызвать контекстное меню;

Создание списка через контекстное меню

  • опосля возникновения крайнего активируйте строчку с надписью «Избрать из раскрывающегося перечня»;
  • опосля этого раскроется маленькое окошко, в каком будут перечислены все данные, занесенные в текущий столбец.

Разглядим сейчас 2-ой вариант того, как создать перечень в «Экселе» с выбором циклических данных, используя жаркие клавиши.

Сочетание

В этом случае создание перечня будет выполнено за счет сочетания кнопок. Чтоб воплотить его, следуйте приведенной аннотации:

  • заполните столбец нужной информацией;
  • установите курсор на пустую либо заполненную ячейку (зависимо от нужного деяния);
  • нажмите сразу сочетание кнопок Alt и «стрелка вниз».

Внешний вид списка при запуске через сочетание клавиш

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

ВНИМАНИЕ! Чтоб данный метод сработал, нужно соблюдать принципиальное правило: меж перечнем и нужным к наполнению местом не обязано быть пустых ячеек.

Перейдем к последующему способу сотворения выпадающего перечня в «Экселе».

Работа с отдельными данными

В определенном случае необходимо будет выполнить создание отдельных данных, которые будут заходить в перечень. Броско, что они могут размещаться как на том листе, в каком изготовлена таблица, так и на иной страничке документа. Чтоб выполнить эту операцию, следуйте приведенному методу:

  • Заполните столбец информацией, которая обязана находиться в выпадающем перечне в «Экселе».
  • Выделите все приготовленные данные и кликните по ним правой кнопкой мышки.

Присвоение имени

  • В показавшемся контекстном меню активируйте строчку с заглавием «Присвоить имя. «. Раскроется особое окошко.

Окно присвоения имени

  • В строке для введения имени укажите заглавие грядущего перечня (оно будет в предстоящем задействовано в формуле для подстановки). Направьте внимание, что оно обязано начинаться с буковкы и не иметь пробелов.
  • Сейчас выделите одну либо несколько ячеек, в каких будет сотворен выпадающий перечень в «Экселе».
  • В верхней панели окна Excel откройте вкладку с именованием «Данные».
  • Перейдите в пункт «Проверка данных». Выполнится пуск окна проверки вводимых значений.
  • На вкладке «Характеристики», в строке типа данных укажите «Перечень».
  • Дальше идет пункт под именованием «Источник» (строчка значения будет недосягаема для конфигураций). Тут вы должны поставить символ равно, а опосля него, без пробелов, имя перечня, которое вы указывали ранее. В итоге обязано получиться «=перечень». Это дозволит вводить лишь те данные, которые указаны в самом перечне. Чтоб выполнить операцию, будет выполняться проверка обозначенного значения, также будет выполнено предложение доступных вариантов, которые и являются перечнем.
  • В этом случае, если юзер укажет отсутствующие данные, Excel выведет на экран сообщение о ошибке с указанием того, что введенного значения не существует. А если вы кликните по клавише выпадающего перечня, установленного в ячейке, то покажется список с вариациями, который был сотворен ранее.

Задействование ActiveX

Перед тем как воплотить данный метод сотворения выпадающего перечня в «Экселе», нужно активировать вкладку под заглавием «Разраб». Делается это таковым образом:

Создаем выпадающее меню на чистом CSS

В данном уроке мы разберем, как сделать выпадающее меню совершенно без использования JavaScript. Обычное, но функциональное решение на базе общедоступных параметров CSS можно применять где угодно.

Интересно почитать:  Excel промежуточные итоги в сводной таблице

demosourse

Теория

Выпадающее меню служит в качестве обзора иерархии разделов, которые содержатся в пт меню, объединяющем их. Обычно в меню перечисляются все подразделы определенной секции, если навести указатель мыши на нее.

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

Разметка

Большая часть выпадающих меню основано на использовании массивной разметки и Javascript. Наш вариант будет применять ординарную структуру HTML кода и 19 строк CSS, с маленьким вкраплением CSS3 для придания наружного лоска.

Разметка довольно ординарна и представляет собой серию вложенных списков <ul> . Нет никаких ID, классов и частей. Обычный ясный код.

Элемент #nav <ul> содержит серию частей <li> . Все пункты, которые нуждаются в выпадающих подпунктах, содержат иной элемент <ul> . Направьте внимание, что элемент <ul> выпадающих подпунктов не имеет класса. Мы используем каскадные стили, сохраняя разметку как можно наиболее незапятанной.

Тут происходит мистика перевоплощения — мы используем CSS для трансформирования серии вложенных списков <ul> в хорошее, обычное в использовании и самодостаточное выпадающее меню.

1-ый раздел кода очень обычной — мы устанавливаем обыденное горизонтальное меню. Но, направьте внимание, что селекторы #nav li и #nav li a выделяют все элементы перечня и ссылки в выпадающих пт тоже. Внедрение каскадов.

Необходимо подчеркнуть внедрение position:relative; для частей перечня. Таковым образом, мы сможем применять position:absolute; для вложенных частей <ul> .

Вложенные списки

В данном коде инсталлируются стили для вложенных <ul> в пункт верхнего уровня. Разумеется, что необходимо удалить метки пт перечня при помощи list-style:none; , и установить position:absolute; для позиционирования выпадающих подпунктов под пт перечня, который их содержит.

Последующая строчка еще наиболее увлекательна. Обычно употребляется свойство display:none; для того, чтоб скрыть выпадающий пункт, когда он не употребляется. Но потому что большая часть программ для чтения с экрана игнорируют все, что имеет свойство display:none;, то внедрение такового способа весьма не нужно. Заместо этого мы используем абсолютное размещение <ul> для помещения его в позицию -9999px за пределами экрана, когда он не употребляется.

Потом следует свойство opacity:0; , для скрытия <ul> , и декларация для браузеров Webkit, для плавного вывода элемента <ul> при наведении курсора мыши.

Тут мы устанавливаем стили по дефлоту для пт перечня и ссылок. Направьте внимание на свойство padding-top:1px; для элемента <li> . Потому что все цвета инсталлируются для частей <a> , то установка отступа в 1px для элемента <li> сдвигает элемент <a>, и, как следует, цветную область от границы пт перечня. Таковым образом, создается иллюзия, что пункты перечня разбиты. Любопытно, что IE не распознает шаблон <li> при наведении курсора мыши и закрывает выпадающий перечень. Для решения данной маленькой задачи добавляется прозрачное изображение gif 1 х 1 px.

Для элемента #nav ul a мы устанавливаем свойство white-space:nowrap; для предотвращения переноса строк на другую строчку.

Крайняя часть кода выводит выпадающие подпункты, когда курсор мыши оказывается над подходящим пт меню. Потому что псевдо класс :hover не работает в IE6, выпадающее меню не работает в данном браузере. Делему можно обойти обилием методов.

#nav li:hover a описывает, что произойдет со ссылкой верхнего уровня, когда наследник будет иметь состояние hover:

  • Выпадающий перечень <ul> размещен снутри элемента <li> .
  • Если навести курсор мыши на ссылку ( <a> ) в выпадающем перечне ( <ul> ), то сразу пункт перечня верхнего уровня ( <li> ) тоже будет иметь состояние hover, потому что выделен контент снутри него.
  • Потому что на техническом уровне употребляется состояние hover для элемента перечня верхнего уровня, то #nav li:hover a действует, задавая стиля для ссылки.

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

Также добавляется правило для браузеров Webkit -webkit-transition:-webkit-transform 0.075s linear; , которое анимирует -webkit-transform при помощи затухания/возникновения в течение 0.075 секунды.

В крайней части определяются стили для выделения определенного пт в выпадающем перечне при наведении курсора мыши.

Сначала мы определяем два характеристики background:; . Определение background:rgba(51,51,51,0.75); устанавливает равномерно сероватый фон для пт с прозрачностью 0.75. Те браузеры, которые не распознают такое определение цвета (к примеру, IE) будут применять определение цвета в древнем стиле в предшествующей строке.

Интересно почитать:  Как в excel сделать выпадающий список с автозаполнением

Готово!

Обычная структура HTML разметки и несколько строк CSS делают замечательное выпадающее меню без использования всевластного JavaScript. Наверное найдется много проектов, в каких такое решение отыщет свое пространство.

Данный урок подготовлен вам командой веб-сайта ruseller.com
Источник урока: csswizardry.com/2011/02/creating-a-pure-css-dropdown-menu/
Перевел: Сергей Фастунов
Урок сотворен: 23 Февраля 2011
Просмотров: 469946
Правила перепечатки

5 крайних уроков рубрики «CSS»

Смешные эффекты для букв

Маленькой эффект с интерактивной анимацией букв.

Реализация смешных подсказок

Маленькой концепт смешных подсказок, которые реализованы на SVG и anime.js. Кроме особенного стиля в примере реализована анимация и трансформация графических объектов.

Анимационные буковкы

Опыт: анимационные SVG буковкы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный опыт интернет странички отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Выпадающий перечень HTML

Привет! В данной статье вас ждут примеры выпадающих списков и меню на CSS и, кто бы мог помыслить, HTML. Насчет использования JavaScript не уверен — попробуем обойтись без него.

Выпадающее меню со перечнем частей на HTML

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

Естественно, схожую делему можно решить почти всеми методами, но я бы рекомендовал обходиться без доп JS-кода (и jQuery).

Я считаю так — если задачку на теоретическом уровне можно решить средствами HTML и CSS без внедрения джейквери, необходимо созодать это на практике. Если вы не понимаете, что писать и куда жать — это отдельная неувязка и она не обязана вас останавливать. Необходимо гуглить, обучаться, расти, увеличивать свою квалификацию как верстальщика и фронтенд-разработчика — никогда не знаешь, где эти способности понадобятся.

Давайте покажу на примере. Помните, не так давно была статья о маркированных и нумерованных перечнях? На данный момент эти познания понадобятся, поэтому что конкретно так мы будем созодать меню. Пример кода:

1-ый шаг к нашему выпадающему списку в меню изготовлен и вот что вышло. Итог:

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

Мда. Пока не весьма, да? Обыденный перечень некий (похож на этот), ведь классы menu и submenu я употреблял, а стили не написал.

Добавлю мало CSS-магии. Пропишу прямо в html-файле — в <head><style></style></head>. CSS-код:

выпадающий список готов

Ого! В жизни не лицезрел ничего прекраснее этого минималистичного выпадающего перечня. Без JavaScript и воззвания к фрилансерам!

Выпадающий при наведении перечень меню на HTML

И опять мы изобретаем меню на чистом CSS, без использования JS.

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

Беря во внимание то, что вы лицезрели в предшествующей части статьи, думаю смотрится многообещающе. А все по этому? Поэтому что мы умеем присваивать необходимым элементам стиль «display:none» и прописывать в CSS чтоб при наведении на него приоритетным было что-то типа «inline-block» взамен «none».

Давайте мало подробнее остановимся на вышеприведенном коде. В нем я присвоил «id=»menu»» основному списку, другими словами всему выпадающему меню. Я сделал это для того чтоб обозначить сходу родительские элементы выпадающего перечня и создать их видимыми.

Далее. В любой из разделов я вложил доп списки <ul>, которые содержат внутри себя выпадающие ссылки (см. также как вставить ссылку в HTML). Они будут появляться при наведении.

Перейдем к CSS. Код:

<style >
/* Обнуляю отступы и убираю маркеры у списков. */
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 ;
}
</style >

Интересно почитать:  Как в эксель проверить орфографию

минималистичный выпадающий список

Что желаю отметить добавочно.

«#menu > li» значит, что стили будут использованы лишь к дочерним элементам по отношению к тегу «ul#menu», а не ко всем как могли помыслить некие. Внимательнее!

«Position: relative;» — отсчитывает координаты от угла 1-го из разделов в основном перечне, откуда выпадают дочерние элементы.

Крайнее: выпадающий перечень по примеру выше на HTML (см. также индивидуальности HTML) и CSS в оформлении меню веб-сайта это комфортная вещь. Для ПК (Персональный компьютер — компьютер, предназначенный для эксплуатации одним пользователем) и десктопов. На мобильных устройствах и планшетах нет мышки и курсоров, потому таковой вариант не подойдет.

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

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

Третье готовое, обычное и функциональное решение для сотворения прекрасного горизонтального меню с выпадающим перечнем различных частей.

Теория, как и до этого, до глубины души обычная. Мы делаем горизонтальную иерархию разделов, используя ненумерованный перечень без маркеров, и потом оборачиваем в прекрасные стили.

Стили помогают нам скрыть элементы и создать их выпадающими при наведении курсора.

Желал мало его откомментировать, да передумал снова взглянув на код — он незапятнанный, ясный, прекрасный. Вроде все обязано быть понятно.

Сейчас давайте вооружимся мистикой стилей — с помощью CSS я трансформирую все серии вложенных списков <ul> в крутое и комфортное в использовании выпадающее меню с несколькими элементами.

Перейдем к CSS-коду. Что-то мне сделалось скучновато туда-сюда бегать, потому я хорошо его откомментировал прямо в стилях. Ну и для вас удобнее будет, если будете воспользоваться сиим решением.

CSS-код, помещенный в <head> странички:

Готово! Финишный итог:

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

БОНУС — суперкрутой выпадающий перечень на ХТМЛ и ЦСС

4-ый и крайний на сей день. Я утомился, вы утомились — думаю четыре выпадающих меню будет довольно для того, чтоб избрать более лучший вариант себе.

Тоже делаем перечень со ссылками, отображающимися при наведении. Никаких анимаций, престижных выездов, мерцания — лишь незапятнанный кроссбраузерный код, обычной и действенный. Заместо «display:none;» использую «left: -9999px;». Ну там сами увидите.

< ul class = "ddropdownn" >
< li class = "ddropdownn-top" >
< a class = "ddropdownn-top" href = "/" > Красноярский край < / a >
< ul class = "ddropdownn-inside" >
< li >< a href = "/" > Минусинск < / a >< / li >
< li >< a href = "/" > Ачинск < / a >< / li >
< li >< a href = "/" > Красноярск < / a >< / li >
< li >< a href = "/" > Железногорск < / a >< / li >
< li >< a href = "/" > Канск < / a >< / li >
< li >< a href = "/" > Норильск < / a >< / li >
< / ul >
< / li >

< li class = "ddropdownn-top" >
< a class = "ddropdownn-top" href = "/" > Свердловская область < / a >
< ul class = "ddropdownn-inside" >
< li >< a href = "/" > Екатеринбург < / a >< / li >
< li >< a href = "/" > Верхняя Пышма < / a >< / li >
< li >< a href = "/" > Нижний Тагил < / a >< / li >
< li >< a href = "/" > Первоуральск < / a >< / li >
< li >< a href = "/" > Асбест < / a >< / li >
< li >< a href = "/" > Каменск-Уральский < / a >< / li >
< / ul >
< / li >
< / ul >

blogwork-vipadaushiy-spisok-menu-5

CSS-код, который я расположил в <head>:

Итог (без наведения курсора):

свернутый выпадающий список

Итог (при наведении курсора):

список выпадает при наведении курсора

Итоги: скачать готовый html+css код выпадающего перечня меню

Как вы могли убедиться на вышеприведенных примерах, выпадающий перечень без особенных заморочек делается на обыкновенном HTML.

Надеюсь один из списков украсит меню вашего проекта либо хотя бы будет применен в качестве базы.

Я подготовил вам архив, который вы сможете скачать. Там все 4 выпадающих перечня — html код и css стили прямо в файле. Там думаю разберетесь.

Ссылка на основную публикацию
Adblock
detector