Css выпадающий список: Горизонтальное выпадающее меню

Содержание

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <select> позволяет создать элемент интерфейса в виде раскрывающегося списка, а также список с одним или множественным выбором, как показано далее. Конечный вид зависит от использования атрибута size тега <select>, который устанавливает высоту списка. Ширина списка определяется самым широким текстом, указанным в теге <option>, а также может изменяться с помощью стилей. Каждый пункт создается с помощью тега <option>, который должен быть вложен в контейнер <select>. Если планируется отправлять данные списка на сервер, то требуется поместить элемент <select> внутрь формы. Это также необходимо, когда к данным списка идет обращение через скрипты.

ЧебурашкаКрокодил ГенаШапоклякКрыса ЛарисаВыберите герояЧебурашкаКрокодил ГенаШапоклякКрыса Лариса
Список множественного выбораРаскрывающийся список

Синтаксис

<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

Атрибуты

accesskey
Позволяет перейти к списку с помощью некоторого сочетания клавиш.
autofocus
Устанавливает, что список получает фокус после загрузки страницы.
disabled
Блокирует доступ и изменение элемента.
form
Связывает список с формой.
multiple
Позволяет одновременно выбирать сразу несколько элементов списка.
name
Имя элемента для отправки на сервер или обращения через скрипты.
required
Список обязателен для выбора перед отправкой формы.
size
Количество отображаемых строк списка.
tabindex
Определяет последовательность перехода между элементами при нажатии на клавишу Tab

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег SELECT</title>
 </head>
 <body>  
 
  <form action="select1.php" method="post">
   <p><select size="3" multiple name="hero[]">
    <option disabled>Выберите героя</option>
    <option value="Чебурашка">Чебурашка</option>
    <option selected value="Крокодил Гена">Крокодил Гена</option>
    <option value="Шапокляк">Шапокляк</option>
    <option value="Крыса Лариса">Крыса Лариса</option>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>

 </body>
</html>

Как оформить выпадающий список с помощью CSS?

<!DOCTYPE html>

<html>

    <head>

        <style>

            h2 {

                color:green;

            }

            select {

                -webkit-appearance: none;

                -moz-appearance: none;

                -ms-appearance: none;

                appearance: none;

                outline: 0;

                background: green;

                background-image: none;

                border:1px solid black;

            }

            . select {

                position: relative;

                display: block;

                width: 20em;

                

height: 3em;

                line-height: 3;

                background: #2C3E50;

                overflow: hidden;

                border-radius: .25em;

            }

            select {

                width: 100%;

                height: 100%;

                margin: 0;

                padding: 0 0 0 .5em;

                color: #fff;

                cursor: pointer;

            }

            select::-ms-expand {

                

display: none;

            

            . select::after {

                content: '\25BC';

                position: absolute;

                top: 0;

                right: 0;

                bottom: 0;

                padding: 0 1em;

                background: #34495E;

                pointer-events: none;

            }

            .select:hover::after {

                

color: #F39C12;

            }

              

            

            .select::after {

                -webkit-transition: .25s all ease;

                -o-transition: . 25s all ease;

                transition: .25s all ease;

            }

        </style>

    </head>

    <body>

        <center>

        <h2

>GeeksforGeeks</h2>

        <div class="select">

            <select name="slct" id="slct">

                <option>Computer Science Subjects</option>

                <option value="1">Operating System</option>

                <option value="2">Computer Networks</

option>

                <option value="3">Data Structure</option>

                <option value="4">Algorithm</option>

                <option value="5">C programming</option>

                <option value="6">JAVA</option>

            </select>

        </div>

        </center>

    </body>

</html>                             

Как Создать Выпадающее Меню CSS

Введение

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

Нужен недорогой, но надёжный хостинг для вашего нового проекта? Обратите внимание, что в Hostinger действуют скидки на все тарифы хостинга. Воспользуйтесь предложением и разместите сайт до 90% дешевле!

К предложению

Что вам понадобится

Перед тем, как мы начнем это руководство, вам понадобится следующее:

  • Доступ к контрольной панели вашего хостинга

Шаг 1 — Создание HTML-файла

Во-первых, вам нужно создать пустой HTML-файл. В этом руководстве мы создадим новый файл под названием menu.html. Для этого мы будем использовать Файловый менеджер. Однако тот же результат может быть достигнут с использованием FTP-клиента (создайте файл menu. html на вашем компьютере и загрузите его на ваш хостинг).

Шаг 2 — Добавление кода HTML меню

Наше меню будет сделано из одного родительского элемента под названием Главное меню и пяти подразделов. Изменяя адрес внутри атрибута href, вы можете связать каждый подраздел с разными страницами вашего сайта. Вы наверное заметили, что каждый элемент имеет разный класс — dropdown, mainmenubtn и dropdown-child. Классы необходимы для применения правил CSS.

<div>
  <button>Главное меню</button>
  <div>
    <a href="http://www.вашдомен.ru/page1.html">Подраздел 1</a>
    <a href="http://www.вашдомен.ru/page2.html">Подраздел 2</a>
    <a href="http://www.вашдомен.ru/page3.html">Подраздел 3</a>
    <a href="http://www.вашдомен.ru/page4.html">Подраздел 4</a>
    <a href="http://www.вашдомен.ru/page5.html">Подраздел 5</a>
  </div>
</div>

Вот, как это выглядит без применения каких-либо CSS-правил:

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

Шаг 3 — Как создать выпадающее меню CSS

Мы стилизуем наш HTML код используя следующие CSS правила:

.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}

.mainmenubtn:hover {
    background-color: red;
    }
    
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}

Как вы видите, класс .dropdown-child имеет CSS правило display: none. Однако, как только пользователь проведет курсором (.dropdown:hover) по родительскому элементу, это правило изменит его отображение на display: block. Это и создаст эффект выпадающего меню.

Ниже представлен финальный результат нашего файла menu.html:

<html>
<head>
<style>
.mainmenubtn {
    background-color: red;
    color: white;
    border: none;
    cursor: pointer;
    padding:20px;
    margin-top:20px;
}
.dropdown {
    position: relative;
    display: inline-block;
}
.dropdown-child {
    display: none;
    background-color: black;
    min-width: 200px;
}
.dropdown-child a {
    color: white;
    padding: 20px;
    text-decoration: none;
    display: block;
}
.dropdown:hover .dropdown-child {
    display: block;
}
</style>
</head>
<body>
<div class="dropdown">
  <button class="mainmenubtn">Главное меню</button>
  <div class="dropdown-child">
    <a href="http://www.вашдомен.ru/page1.html">Подраздел 1</a>
    <a href="http://www.вашдомен.ru/page2.html">Подраздел 2</a>
    <a href="http://www. вашдомен.ru/page3.html">Подраздел 3</a>
    <a href="http://www.вашдомен.ru/page4.html">Подраздел 4</a>
    <a href="http://www.вашдомен.ru/page5.html">Подраздел 5</a>
  </div>
</div>
</body>
</html>

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

Как только вы закончите, финальный результат должен быть похож на это:

Не бойтесь экспериментировать c CSS стилем, изменяя цвета и размер. Адаптируйте меню под ваши нужды.

Заключение

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

Как создать в HTML выпадающий список?

Приветствую вас, друзья и коллеги!

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

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

Навигация по статье:

Как сделать раскрывающийся список html

Для создания в html выпадающего списка существует тег <select>, который совместно с тегом <option>, позволяет создавать элементы интерфейса, содержащие перечень параметров в виде выпадающего списка с возможностью единичного или множественного выбора.

Перечень атрибутов для тега <select>:

autofocus – установка фокуса на элементе при загрузки страницы
disabled – отключение элемента
multiple – множественный выбор элементов раскрывающегося списка html
required – делает обязательным для заполнения
size – определяет высоту в закрытом состоянии. Задается числовым значением.
form – подключение к форме обратной связи
name – имя, для получения выбранного значения и передачи его в скрипт для обработки

Для последних трёх значение указывается в кавычках, все остальные просто дописываются к тегу <select>

Атрибуты для тега <option>:

disabled – позволят заблокировать пункт для выбора
label — дает возможность задать метку для элемента
selected – устанавливает пункт выбранным по умолчанию
value – позволяет задать значение для пункта, которое будет передано в форму для отправки или в скрипта для обработки.

Ниже я приведу несколько примеров использования атрибутов для тегов <select> и <option>

Пример самого простого раскрывающегося списка html:

Код:

<select> <option>Опция 1</option> <option>Опция 2</option> </select>

<select>

  <option>Опция 1</option>

  <option>Опция 2</option>

</select>

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

Ширина элемента по умолчанию определяется исходя из ширины самой длинной записи. Так же ее можно изменять CSS-стилями.

HTML выпадающий список с множественным выбором

По умолчанию доступен для выбора только один элемент. Если есть необходимость предоставления множественного выбора, то можно использовать атрибут multiple. Вот пример использования атрибута:

<select multiple> <option>Москва </option> <option>Санкт-Петербург</option> </select>

<select  multiple>

  <option>Москва </option>

  <option>Санкт-Петербург</option>

</select>

Выбор нескольких позиций осуществляется при помощи зажатой клавиши CTRL + клик указателем мышки по нужному элементу.

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

Как задать выбранный пункт по умолчанию

В случае если вам нужно задать в html выпадающем списке опцию, которая будет отображаться по умолчанию, используем атрибут selected. Например:

<select name=»country»> <option disabled>Выберите страну</option> <option selected>Россия</option> <option >Белоруссия</option> </select>

<select name=»country»>

    <option disabled>Выберите страну</option>

    <option selected>Россия</option>

    <option >Белоруссия</option>

</select>

Обратите внимание. Если первый пункт раскрывающегося списка html задать с атрибутом disabled, то его можно использовать как подсказку или placeholder.

Как подключить раскрывающийся список html к форме

После того как вы сделаете html выпадающий список, вам нужно будет как-то использовать полученные значения. Для этого мы можем использовать два атрибута name и form.

Атрибут name позволяет задать имя для <select>. Далее, заданное имя можно использовать в качестве переменной в скриптах.

Например:

<select name=»count» > <option value=» Москва «>Москва</option> <option value=» Казахстан «>Казахстан</option> <option value=» Белоруссия «>Белоруссия</option> </select>

<select name=»count» >

    <option value=» Москва «>Москва</option>

    <option value=» Казахстан «>Казахстан</option>

    <option value=» Белоруссия «>Белоруссия</option>

</select>

Далее, вы можете использовать полученные данные в php-функции. Например, вот так:

function dataSelect(a) { n = a.count.selectedIndex if(n) alert(«Страна: » + f.count.options[n].value) }

function dataSelect(a) {

      n = a.count.selectedIndex

      if(n) alert(«Страна: » + f.count.options[n].value)

    }

Атрибут form дает нам возможность подключить наш раскрывающийся список html к какой-либо форме на нашем сайте, в случае если он находится вне тега <form>. В кавычках нужно указать идентификатор формы, к которой мы хотим подключить наш html выпадающий список.

Например:

<select form=»cont-form «> <option value=»2″>2х2</option> <option value=» 3 «>3х3</option> <option value=» 4 «>4х4</option> </select>

<select form=»cont-form «>

    <option value=»2″>2х2</option>

    <option value=» 3 «>3х3</option>

    <option value=» 4 «>4х4</option>

</select>

Где «cont-form» — это ID формы.


Надеюсь, данная статья поможет вам разобраться, как сделать в html выпадающий список для своего сайта. Если вам понравилась данная статья, не забудьте поделиться ею в социальных сетях и оставить комментарий. Так же вы можете заглянуть на мой YouTube-канал, где найдете много интересного материала по созданию сайтов и интернет магазинов.

Успехов вам в создании выпадающих списков!
До встречи в следующих статьях!

С уважением Юлия Гусарь

Как сделать плавное выпадающее меню на CSS • ЭРА ТЕХНОЛОГИЙ

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

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

Верстаем меню HTML + CSS

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

Что мы имеем? Самый обыкновенные ненумерованный список с идентификатором «top_menu» и со ссылками, обернутыми в элементы этого самого списка. Все банально и просто. При наведении пункты меню меняют цвет… это все вы уже знаете и понимаете, как это сделать (я надеюсь).

Добавляем меню второго уровня

Чтобы сделать многоуровневое меню, нам нужно добавить второй ненумерованный список внутрь первого. Думаю, это вы проходили где-то на начальных уроках. А также то, что его вставить нужно не просто внутри нашего списка, а именно внутри элемента списка, то есть тега «li», сразу после закрывающего тега «a».

Позиционируем вложенные списки абсолютно по отношению к «li», в которые они вложены. А все «li» верхнего уровня позиционируем относительно (relative). Чтобы выпадающее меню находилось СРАЗУ же после нашего меню верхнего уровня, ему (выпадающему – “inner_menu”) нужно задать

position: absolute;
top: 100%;

То есть отступ от верхней границы родителя будет равен высоте родителя. Очень логично, по-моему.

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

Как видите, наше выпадающее меню пока выглядит не выпадающим, а выпавшим и висящим. Но ничего, это мы скоро исправим.

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

Нет ничего проще! Чтобы наш вложенный список сделать выпадающим меню, его нужно просто скрыть! А потом открывать только тогда, когда курсор мыши будет проноситься над пунктом меню верхнего уровня, который содержит в себе выпадающее меню. Звучит, может быть, немного сложно, но на самом деле это решается буквально несколькими строчками кода.

Выпадающему меню добавляем:

display: none;

А чтобы его отобразить, нужно прописать:

#top_menu > li:hover > ul {
   display: block;
}

Что нам говорит это целое скопище селекторов? Читаем с конца. Мы задаем стили (видмости) для списка второго уровня, который лежит внутри элемента списка первого уровня, но стили эти сработают только в том случае, если мы наведем мышкой (ховер) на элемент «li» в который вложен наш список второго уровня.

Надеюсь, я выразился понятно. Если нет, попробуйте прочитать несколько раз. А еще лучше просто понимать это, глядя на код. Смотрим, что у нас получилось:

Да, мы вроде бы добились того, чего хотели – мы сделали выпадающее меню, самое настоящее выпадающее меню, мать его! Но ему чего-то не хватает. А знаете чего? Плавности! Ведь все выглядит так, как будто меню не выпадает, а просто появляется. Причем очень резко, моментально даже, я бы сказал.

Ну что же, давайте еще немного поколдуем над ним.

Плавное выпадающее меню – это просто

Итак, давайте сделаем плавное выпадающее меню на чистом CSS. Зачем это делать? Потому что люди любят, когда все плавненько и мягонько… и это выглядит красиво. Будет плюс к юзабилити вашего сайта. Погнали!

Запомните, вы можете анимировать только точные математические величины, например 50px и 300px, 0 и 100%, 0,5 и 1,0 и так далее. В нашем случае мы не сможем анимировать два состояния нашего выпадающего меню (display:none; и display:block;).

Но мы можем заменить их на прозрачность – opacity:0 и opacity:1. И задать время в течение которого наше меню будет проявляться из прозрачного состояния. Да, это действительно сработает, однако это не совсем тот эффект, который вы возможно ожидали. Поэтому давайте сделаем немного сложнее. Но это того стоит, поверьте.

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

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

Что нам понадобилось для анимации? Два состояния пунктов нашего меню, а также свойство transition, которое проинтерполировало эти состояния, то есть заполнило все промежуточные значения за отведенный промежуток времени. Вот и все!

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

Вывод:

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

Кстати это был мой первый урок по CSS. Опишите, как вам? Понятно все объяснил или нужно еще подробнее разжевывать? И стоит ли вообще продолжать писать статьи на тему лайфхаков в CSS?

Спасибо за внимание и до скорых встреч!

Выпадающий список в HTML — Тег в HTML и теги и .

В прошлый раз мы очень подробно обсудили атрибуты тега <input> и особенно подробно атрибут type и его возможности.

Теперь мы познакомимся с еще тремя HTML-тегами предназначенными для форм. Это теги <select>, <option> и <optgroup>. C помощью этих тегов мы сможем сделать выпадающий список в HTML-форме и сделать его структуру удобной для использования. Естественно кроме изучения самих тегов мы поговорим и об их HTML-атрибутах. С какими-то из них мы уже знакомы, а с какими-то еще нет.

Тег <select> в HTML.

Основной тег, который необходим для создания выпадающего списка это тег <select>. Именно с него мы и начнем.

Это парный тег после добавления, которого в HTML документ появится раскрывающийся список. Но при использовании только тега <select> самих пунктов для выбора не появится. А если нет пунктов, значит и нечего выбрать. Чтобы добавить пункты списка необходимо использовать тег <option>, о котором мы поговорим чуть ниже.

Для начала рассмотрим синтаксис тега <select>. Добавляется он внутрь элемента <form>, это следует учитывать.


Таким образом, может выглядеть самый простой вариант HTML-кода для вывода HTML-тега <select>.

Тег <option> в HTML.

Как я упоминал чуть выше, этот тег существует для добавления пунктов списка в выпадающий список, выводимый с помощью тега <select>. Этот тег чем-то по предназначению напоминает тег <li> для создания элементов HTML-списка.

Синтаксис тега <option> в HTML не представляет ничего особенного и в самом простом варианте его можно использовать так:

Пункт списка

То есть из сказанного выше становится понятно, что мы должны использовать два HTML-тега для создания выпадающего списка это тег <select> и тег <option>.

Тег <optgroup> в HTML.

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

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

Синтаксис также прост, но стоит учитывать, что внутри тега <optgroup> должен присутствовать тег <option>.

Второй пунктТретий пункт


Если же говорить о полном коде выпадающего списка, то он может выглядеть примерно так:

Первый пунктВторой пунктТретий пункт

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

Видео урок: Выпадающий список в HTML — Тег <select> в HTML и теги <option> и <optgroup>.

HTML-справочник и другие материалы можно и нужно скачать здесь!

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

CSS: Выпадающее меню с задержкой

Обычное выпадающие css-меню сделанное с помощью переключения display:none;/display:block; повешенного на hover обладает двумя раздражающими недостатками:

— подменю показывается мгновенно, как только курсор мыши попал в область родительского пункта
— подменю мгновенно пропадает, как только курсор вышел за пределы подменю

Пример такого меню:

<ul>
    <li>
        <a href="#">item</a>
        <ul>
            <li>subitem 1</li>
            <li>subitem 2</li>
        </ul>
   </li>
</ul>

<style>
. menu {
    margin: 0;
    padding: 0;
    list-style: none;
}
.menu .menu-item {
    float: left;
    margin: 0 1px 0 0;
    padding: 0;
    background: #E1E1E1;
}
.menu .menu-item a {
    display: block;
    padding: 5px 10px;
}
.menu .submenu {
    display: none; /* По умолчанию скрываем подменю */
    position: absolute;
    margin: 0;
    padding: 0;
    list-style: none;
    background: #E1E1E1;
}
.menu .menu-item:hover .submenu {
    display: block; /* Показываем подменю при ховере */
}
.menu .submenu-item {
    margin: 0;
    padding: 5px 10px;
}
</style>

Демо

Чтобы создать небольшую задержку перед показом и скрытием подменю раньше приходилось использовать javascript, но теперь наткнулся на css вариант.

Весь фокус в свойстве transition, а точнее его подсвойстве transition-delay, которое позволяет добавить задержку перед показом анимации:

.menu .submenu {
    opacity: 0; /* По умолчанию скрываем подменю */
    visibility: hidden;
    transition-property: opacity, visibility; /* Важно чтобы transition применялось к обоим свойствам */
    transition-duration: 0. 2s; /* Добавляем анимацию 0.3 сек. */
    transition-delay: 0.15s; /* Добавляем задержку в 0.15 сек. */
}
.menu .menu-item:hover .submenu {
    opacity: 1; /* Показываем подменю при ховере */
    visibility: visible;
}

Демо

Поскольку анимацию нельзя вешать на display, то для скрытия подменю приходится использовать связку opacity:0; visibility:hidden;.

Решено с помощью CSS! Выпадающие меню

CSS

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


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

Поиск в Google по запросу «раскрывающееся меню» дает множество примеров.

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

    

Теперь предположим, что нам нужно раскрывающееся подменю для второго элемента навигации.Мы можем сделать то же самое и включить список ссылок в этот элемент списка:

    

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

  li {
 дисплей: блок;
 продолжительность перехода: 0,5 с;
}

li: hover {
  курсор: указатель;
}

ul li ul {
  видимость: скрыта;
  непрозрачность: 0;
  позиция: абсолютная;
  переход: легкость всего 0,5 с;
  верхняя маржа: 1 бэр;
  слева: 0;
  дисплей: нет;
}

ul li: hover> ul,
ul li ul: hover {
  видимость: видимая;
  непрозрачность: 1;
  дисплей: блок;
}

ul li ul li {
  ясно: оба;
  ширина: 100%;
}  

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

Проблема

Это начинает выглядеть так, как мы хотим, но мы еще далеки от завершения. Доступность в Интернете — это основная часть разработки вашего продукта, и прямо сейчас это прекрасная возможность поднять этот вопрос. Добавление role = "navigation" — хорошее начало, но для того, чтобы панель навигации была доступна, нужно иметь возможность переходить по ней (и фокусироваться на нужном элементе в разумном порядке), а также иметь экран читатель точно прочитал вслух то, на чем сосредоточено внимание.

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

Теперь важно отметить, что теоретически вы сосредоточены на этом другом элементе и что программа чтения с экрана сможет его проанализировать, прочитав Sub-One , но пользователи клавиатуры не смогут увидеть, что происходит, и будут сбиться с пути.

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

К счастью, есть новый псевдокласс CSS, который даст нам именно то, что мы хотим в данном случае, и он называется : focus-within .

Решение:

: фокус в пределах

Псевдоселектор : focus-within является частью спецификации CSS Selectors Level 4 Spec и сообщает браузеру применить стиль к родительскому элементу, когда любой из его дочерних элементов находится в фокусе. В нашем случае это означает, что мы можем перейти к Sub-One и применить стиль : focus-within вместе со стилем : hover родительского элемента и точно увидеть, где мы находимся в раскрывающемся меню навигации. В нашем случае это будет ul li: focus-within> ul :

  ul li: hover> ul,
ул ли: фокус внутри> ул,
ul li ul: hover {
  видимость: видимая;
  непрозрачность: 1;
  дисплей: блок;
}  

Sweet! Оно работает!

Быстрый объезд! Если вы поддерживаете только современные браузеры, CSS, который мы видели до сих пор, подойдет.Но вы должны знать, что когда какой-либо браузер не понимает часть селектора, он выбрасывает весь селектор. Так что, если вы хотите поддерживать IE 11, вы не можете смешивать часть : focus-within .

  / * Этот составной селектор по-прежнему будет работать в IE 11, потому что: focus-within не смешивается с * /
ul li: hover> ul,
ул ли ул: наведите указатель мыши,
ul li ul: focus {
  видимость: видимая;
  непрозрачность: 1;
  дисплей: блок;
}

/ * IE 11 не получит этого, но, по крайней мере, меню верхнего уровня будут работать * /
ul li: focus-within> ul {
  видимость: видимая;
  непрозрачность: 1;
  дисплей: блок;
}  

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

В большинстве случаев, например, для прямых ссылок, мы обычно можем просто написать что-то вроде:

  a: парение,
фокус {
  ...
}  

Но в этом случае, поскольку мы применяем стили наведения на основе родительского li , мы снова можем использовать : focus-within , чтобы получить то же ощущение при переходе по табуляции. Это потому, что мы не можем на самом деле сфокусировать на li (если мы не добавим tabindex = "0" ). На самом деле мы фокусируемся на ссылке ( a ) внутри нее.: focus-within позволяет нам по-прежнему применять стили к родительскому li при фокусировке на ссылке (чертовски круто!):

  ли: парение,
li: focus-within {
  ...
}  

На этом этапе, поскольку мы применяем стиль фокусировки, мы можем сделать что-то, что обычно не рекомендуется (удалить стиль этого синего контура кольца фокусировки). Мы можем сделать это по:

  li: focus-within a {
  наброски: нет;
}  

Приведенный выше код указывает, что когда мы фокусируемся на элементах списка через ссылку ( a ), не применяем схему к элементу ссылки ( a ).Это довольно безопасно писать таким образом, потому что мы задаем стили исключительно для состояния наведения, а в браузерах, которые не поддерживают : focus-within , ссылка все равно будет иметь кольцо фокусировки. Теперь наше меню выглядит так:

Окончательное меню с использованием состояний : focus-within , : hover и настройка исчезновения кольца фокусировки

А как насчет ARIA?

Если вы знакомы с доступностью, возможно, вы слышали о ярлыках и состояниях ARIA. Вы можете использовать их в своих интересах, чтобы одновременно создавать такие типы выпадающих списков со встроенной доступностью! Здесь вы можете найти отличный пример Хейдона Пикеринга. При включении разметки ARIA ваш код будет выглядеть примерно так:

    

Вы добавляете aria-haspopup = "true" к родительскому элементу раскрывающегося меню, чтобы указать альтернативное состояние, и включаете aria-label = "submenu" в само раскрывающееся меню (в данном случае наш список с class = "dropdown" .

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

Предупреждение о поддержке браузера

Говоря о предостережениях, давайте поговорим о поддержке браузером. Хотя : focus-within действительно имеет довольно хорошую поддержку браузера , важно отметить, что Internet Explorer и Edge не поддерживаются, поэтому ваши пользователи на этих платформах не смогут видеть навигацию.

Настольный компьютер
Chrome Firefox IE Edge Safari
60 52 Нет 79
10 Мобильный планшет
Android Chrome Android Firefox Android iOS Safari
91 89 91 10.3

Окончательным решением здесь было бы использование как разметки ARIA, так и CSS : focus-within , чтобы обеспечить надежное раскрывающееся меню для ваших пользователей.

Если вы хотите иметь возможность использовать эту функцию в будущем, проголосуйте за нее на Edge User Voice! И проголосуйте за : кольцо фокусировки , пока вы на нем, так что мы сможем стилизовать это кольцо фокусировки и создать красивый интерактивный веб-интерфейс для всех 😀

Подробнее о

: фокусировка в пределах и A11Y

17 Выпадающие меню CSS

Коллекция отобранных вручную бесплатных выпадающих меню HTML и CSS примеров кода.Обновление коллекции за октябрь 2018 г. 3 новинки.

  1. Меню CSS
  2. Выпадающее меню начальной загрузки
Автор
  • Зеландия
О коде

Расплавленное меню

Он сочетает в себе раскрывающееся меню CSS и просачивающиеся эффекты жидкого пламени.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Адаптивный: нет

Зависимости: —

Автор
  • Марко Бесаньи
О коде

Раскрывающееся меню HTML и CSS

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

Автор
  • Халида Астатин
О коде

Градиентное меню

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

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: font-awesome.css

Автор
  • Мохамед Айман
О коде

Главное меню

Горизонтальное меню с выпадающими эффектами в HTML и CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: ionicons.css

О коде

Меню CSS

No JS — обязательно загляните в мобильное меню.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Винсент Дюран
О коде

Выпадающее меню CSS

HTML и CSS раскрывающееся меню с приятным эффектом.

Совместимые браузеры: Chrome, Firefox, Opera, Safari

Зависимости: —

О коде

Горизонтальное раскрывающееся меню

Горизонтальное выпадающее меню на чистом CSS с красивыми переходами и красивой палитрой.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

отзывчивый: да

Зависимости: ionicons.css

О коде

Раскрывающееся меню

Раскрывающееся меню «Классный HTML и CSS».

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: font-awesome.css

Автор
  • Хесус Родригес
О коде

Необычное меню

Необычное выпадающее меню в HTML и CSS. На основе https://dribbble.com/shots/1075480-Ui-Kit-Hotel

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: font-awesome.css

Автор
  • sean_codes
О коде

Рекурсивная навигация при наведении

Только CSS-рекурсивная навигация при наведении.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Руслан Пивоваров
О коде

Классные эффекты выпадающего меню

Cool раскрывающееся меню чистый CSS-эффект.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Сатиш Кумар
О коде

Раскрывающееся меню

Выпадающее меню на чистом CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Роберт Боргези
О коде

Простое раскрывающееся меню на чистом CSS

Меню с выпадающим списком выполнено только в CSS, со строкой, следующей за наведением на строку.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Коннор Брассингтон
О коде

Простое раскрывающееся меню на чистом CSS

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

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

О коде

Выпадающие меню

Анимированные выпадающие меню CSS.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Каталин Рошу
О коде

Выпадающее меню зигзаг

Это просто еще одна концепция раскрывающегося меню .

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Автор
  • Джон Урбанк
О коде

Адаптивное меню

Простое, только CSS, гибкое раскрывающееся меню.

Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari

Зависимости: —

Как оформить раскрывающийся список с помощью CSS?

< html >

< Головка >

<

0 стиль

9 9002 9 9000 9000 900 h2 {

цвет: зеленый;

}

select {

-webkit-appearance: none;

-моз-внешний вид: нет;

-ms-внешний вид: нет;

внешний вид: отсутствует;

контур: 0;

фон: зеленый;

фоновое изображение: нет;

граница: сплошной черный 1 пиксель;

}

.выберите {

положение: относительное;

дисплей: блок;

ширина: 20em;

высота: 3em;

высота строки: 3;

фон: # 2C3E50;

переполнение: скрыто;

радиус границы:.25em;

}

выберите {

ширина: 100%;

высота: 100%;

маржа: 0;

заполнение: 0 0 0 .5em;

цвет: #fff;

курсор: указатель;

}

select :: - ms-expand {

дисплей: нет;

}

.select :: after {

content: '\ 25BC';

положение: абсолютное;

верх: 0;

справа: 0;

снизу: 0;

заполнение: 0 1em;

фон: # 34495E;

указатель-события: нет;

}

.выберите: hover :: после {

цвет: # F39C12;

}

.select :: after {

-webkit-transition: .25s all easy;

-o-переход: .25s all easy;

переход:.25 с легкостью;

}

стиль >

головка >

< корпус > 9000

< центр >

< h2 > GeeksforGeeks h2 >

< div класс = div класс «выберите» >

< выберите имя = «slct» id = «slct» >

< option > Предметы информатики option >

< опция значение = "1" > Операционная система опция >

< опция значение = "2" > Компьютерные сети option >

< option value = "3" > Структура данных опция >

< опция значение = "4" > Алгоритм опция >

< опция значение = "5" > Программирование на C опция > 9 0003

< опция значение = "6" > JAVA опция >

выберите >

div >

центр >

корпус >

html >

Как создать раскрывающееся меню в CSS

Что такое выпадающие списки?

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

Примеры:

    

Затем вы должны настроить классы в CSS следующим образом:

  .dropdown {
  положение: относительное;
  дисплей: встроенный блок;
}

.dropbtn {
  цвет фона: красный;
  отступ: 10 пикселей;
}

.dropdown-content {
  дисплей: нет;
  позиция: абсолютная;
}

.dropdown: hover .dropdown-content {
  дисплей: блок;
}  

Вам нужны отдельные классы div для создания кнопки и еще один div для разделения списка того, что содержит кнопка.

Пример

    
  # myNav1 {
    высота: 0;
    ширина: 50%;
    положение: фиксированное;
    z-индекс: 6;
    верх: 0;
    слева: 0;
    цвет фона: #ffff;
    переполнение: скрыто;
    переход: 0.3 с;
    непрозрачность: 0,85;
}

# myNav2 {
    высота: 0;
    ширина: 50%;
    положение: фиксированное;
    z-индекс: 6;
    внизу: 0;
    справа: 0;
    цвет фона: #ffff;
    переполнение: скрыто;
    переход: 0,3 с;
    непрозрачность: 0,85;
}

.overlay-content {
    положение: относительное;
    ширина: 100%;
    выравнивание текста: центр;
    маржа сверху: 30 пикселей;
}

# myNav1-content {
    верх: 12%;
    осталось: 5%;
    дисплей: нет;
}

# myNav2-content {
    верх: 12%;
    справа: 10%;
    дисплей: нет;
}  

Дополнительная информация о раскрывающихся списках CSS:

Выпадающие списки · Bootstrap

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

Обзор

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

Выпадающие списки созданы на основе сторонней библиотеки Popper.js, которая обеспечивает динамическое позиционирование и обнаружение области просмотра. Не забудьте включить popper.min.js перед загрузкой JavaScript в Bootstrap или используйте загрузочную программу .bundle.min.js / bootstrap.bundle.js , который содержит Popper.js. Popper.js не используется для размещения раскрывающихся списков на панели навигации, хотя динамическое позиционирование не требуется.

Если вы создаете наш JavaScript из исходного кода, для него требуется util.js .

Доступность

Стандарт WAI ARIA определяет фактический виджет role = "menu" , но это характерно для меню, подобного приложениям, которое запускает действия или функции. Меню ARIA могут содержать только пункты меню, пункты меню флажков, пункты меню радиокнопок, группы радиокнопок и подменю.

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

Bootstrap разработаны так, чтобы быть общими и применимыми к различным ситуациям и структурам разметки. Например, можно создавать раскрывающиеся списки, содержащие дополнительные входные данные и элементы управления формами, такие как поля поиска или формы входа в систему. По этой причине Bootstrap не ожидает (и не добавляет автоматически) ни один из атрибутов role и aria- , необходимых для истинных меню ARIA .Авторы должны сами включить эти более конкретные атрибуты.

Однако Bootstrap добавляет встроенную поддержку для большинства стандартных взаимодействий с меню клавиатуры, таких как возможность перемещаться по отдельным элементам .dropdown-item с помощью клавиш курсора и закрывать меню с помощью клавиши ESC .

Примеры

Оберните переключатель раскрывающегося списка (ваша кнопка или ссылка) и раскрывающееся меню в .dropdown или другой элемент, который объявляет position: relative; .Выпадающие списки можно запускать из элементов или

И с элементами :

    

Самое приятное то, что вы можете сделать это и с любым вариантом кнопок:

  
  

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

Аналогичным образом создайте раскрывающиеся списки с разделенными кнопками с практически такой же разметкой, что и раскрывающиеся списки с одной кнопкой, но с добавлением .dropdown-toggle-split для правильного интервала вокруг выпадающего курсора.

Мы используем этот дополнительный класс, чтобы уменьшить горизонтальное заполнение по обе стороны от каретки на 25% и удалить margin-left , добавляемое для обычных раскрывающихся списков кнопок. Эти дополнительные изменения удерживают курсор в центре разделенной кнопки и обеспечивают область нажатия более подходящего размера рядом с основной кнопкой.

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

Калибровка

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

  
...
...
...
...

Выпадающий вариант

Запуск раскрывающихся меню над элементами путем добавления .dropup к родительскому элементу.

Разделить выпадение Переключить раскрывающийся список
  

Вариант противоскольжения

Выпадающее меню триггера справа от элементов путем добавления .dropright родительскому элементу.

Разделить вертикальное положение Переключить Dropdright
  

Вариация капли

Запуск раскрывающихся меню слева от элементов путем добавления .dropleft родительскому элементу.

  

Раньше содержимое выпадающего меню содержало ссылки , но в версии 4 это уже не так.Теперь вы можете дополнительно использовать элементы

По умолчанию раскрывающееся меню автоматически располагается на 100% сверху и слева от своего родителя.Добавьте .dropdown-menu-right к .dropdown-menu , чтобы выровнять раскрывающееся меню по правому краю.

Внимание! Выпадающие списки размещаются благодаря Popper.js (кроме случаев, когда они содержатся в панели навигации).

  

Добавьте заголовок для обозначения разделов действий в любом раскрывающемся меню.

    

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

    

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

  
<форма>
Впервые здесь? Зарегистрироваться Забыли пароль?
  <форма>
  

Добавьте .active к элементам в раскрывающемся списке, чтобы сделать их активными .

    

Добавьте .disabled к элементам в раскрывающемся списке, чтобы пометили их как отключенные .

    

Использование

С помощью атрибутов данных или JavaScript плагин раскрывающегося списка переключает скрытый контент (раскрывающиеся меню) путем переключения .показать класс в родительском элементе списка. Атрибут data-toggle = "dropdown" используется для закрытия раскрывающихся меню на уровне приложения, поэтому рекомендуется всегда использовать его.

На устройствах с сенсорным экраном открытие раскрывающегося списка добавляет пустые ( $ .noop ) обработчики mouseover к непосредственным дочерним элементам элемента . Этот, по общему признанию, уродливый хакер необходим для обхода причуды в делегировании событий iOS, которая в противном случае помешала бы нажатию в любом месте за пределами раскрывающегося списка запускать код, закрывающий раскрывающийся список.После закрытия раскрывающегося списка эти дополнительные пустые обработчики mouseover удаляются.

Через атрибуты данных

Добавьте data-toggle = "dropdown" к ссылке или кнопке, чтобы переключить раскрывающийся список.

  
...

Через JavaScript

Вызов раскрывающихся списков с помощью JavaScript:

  $ ('.dropdown-toggle '). dropdown ()  
data-toggle = "dropdown" все еще требуется

Независимо от того, вызываете ли вы раскрывающийся список через JavaScript или вместо этого используете data-api, data-toggle = "dropdown" всегда должен присутствовать в элементе триггера раскрывающегося списка.

Опции

Параметры могут передаваться через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя параметра к data- , как в data-offset = "" .

Номер
Имя Тип По умолчанию Описание
смещение | строка | функция 0 Смещение раскрывающегося списка относительно цели. Для получения дополнительной информации обратитесь к документации по смещению Popper.js.
флип логический правда Разрешить разворачивание раскрывающегося списка в случае перекрытия ссылочного элемента.Для получения дополнительной информации обратитесь к документации Popper.js.
граница строка | элемент 'scrollParent' Граница ограничения переполнения раскрывающегося меню. Принимает значения 'viewport' , 'window' , 'scrollParent' или ссылку HTMLElement (только JavaScript). Для получения дополнительной информации обратитесь к документации Popper.js preventOverflow.

Обратите внимание, когда для границы установлено любое значение, отличное от 'scrollParent' , к применяется стиль position: static .выпадающий контейнер .

Методы

Метод Описание
$ (). Раскрывающийся список ('переключение') Переключает раскрывающееся меню данной панели навигации или навигации с вкладками.
$ (). Раскрывающийся список («обновление») Обновляет положение раскрывающегося списка элемента.
$ (). Раскрывающийся список ('удалить') Уничтожает раскрывающийся список элемента.

События

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

Показано
Событие Описание
показать.bs.dropdown Это событие запускается немедленно при вызове метода экземпляра шоу.
.бс. выпадающий Это событие вызывается, когда раскрывающийся список становится видимым для пользователя (ожидает завершения переходов CSS).
hide.bs.dropdown Это событие запускается сразу после вызова метода экземпляра hide.
hidden.bs.dropdown Это событие вызывается, когда раскрывающийся список перестает быть скрытым от пользователя (будет ожидать завершения переходов CSS).
  $ ('# myDropdown'). On ('show.bs.dropdown', function () {
  // сделай что-нибудь…
})  

Раскрывающийся список - Материализовать

выравнивание Строка 'левый' Определяет край, по которому выравнивается меню.
автозапуск логический правда Если true, автоматически фокусируется раскрывающийся список для клавиатуры.
constrainWidth логический правда Если истина, ограничить ширину до размера активатора раскрывающегося списка.
контейнер Элемент null Предоставьте элемент, который будет ограничивающим контейнером раскрывающегося списка.
крышка триггера логический правда Если false, раскрывающийся список будет отображаться под триггером.
закрытьOnClick логический правда Если верно, закрывать раскрывающийся список при щелчке по элементу.
парение логический ложь Если true, раскрывающийся список открывается при наведении курсора.
дюймов Продолжительность Число 150 Продолжительность перехода ввода в миллисекундах.
вых Продолжительность Число 250 Продолжительность перехода в миллисекундах.
onOpenStart Функция null Функция вызывается при начале ввода раскрывающегося списка.
onOpenEnd Функция null Функция вызывается при завершении ввода раскрывающегося списка.
onCloseStart Функция null Функция вызывается при выходе из раскрывающегося списка.
onCloseEnd Функция null Функция вызывается при выходе из раскрывающегося списка.

html - раскрывающееся меню, которое открывается вверх / вверх с чистым css

html - раскрывающееся меню, которое открывается вверх / вверх с чистым css - qaru

Присоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.

Спросил

Просмотрено 127k раз

Я создал раскрывающееся меню с чистым CSS и поместил его в место, которое мне нравится, за исключением того, что я хочу, чтобы оно было «раскрывающимся», а не «раскрывающимся», поскольку строка меню находится внизу расположение.Что мне нужно добавить или изменить, чтобы он «выпал»?

  #menu * {
  отступ: 0;
  маржа: 0;
  шрифт: 12px грузия;
  тип-стиль-список: нет;
}
#menu {
  маржа сверху: 100 пикселей;
  плыть налево;
  высота строки: 10 пикселей;
  слева: 200 пикселей;
}
#menu a {
  дисплей: блок;
  текстовое оформление: нет;
  цвет: # 3B5330;
}
#menu a: hover {background: # B0BD97;}
#menu ul li ul li a: hover {
  фон: # ECF1E7;
  отступ слева: 9 пикселей;
  граница слева: сплошной 1px # 000;
}
#menu ul li ul li {
  ширина: 140 пикселей;
  граница: нет;
  цвет: # B0BD97;
  padding-top: 3 пикселя;
  padding-bottom: 3px;
  отступ слева: 3 пикселя;
  отступ справа: 3 пикселя;
  фон: # B0BD97;
}
#menu ul li ul li a {
  шрифт: 11px arial;
  шрифт: нормальный;
  вариант шрифта: капители;
  padding-top: 3 пикселя;
  padding-bottom: 3px;
}
#menu ul li {
  плыть налево;
  ширина: 146 пикселей;
  font-weight: жирный;
  граница-верх: сплошной 1px # 283923;
  нижняя граница: сплошной 1px # 283923;
  фон: # 979E71;
}
#menu ul li a {
  font-weight: жирный;
  отступ: 15 пикселей 10 пикселей;
}
#menu li {
  положение: относительное;
  плыть налево;
}
#menu ul li ul, #menu: hover ul li ul, #menu: hover ul li: hover ul li ul {
  дисплей: нет;
  тип-стиль-список: нет;
  ширина: 140 пикселей;
}
#menu: hover ul, #menu: hover ul li: hover ul, #menu: hover ul li: hover ul li: hover ul {
  дисплей: блок;
}
#menu: hover ul li: hover ul li: hover ul {
  позиция: абсолютная;
  маржа слева: 145 пикселей;
  маржа сверху: -22px;
  шрифт: 10 пикселей;
}
#menu: hover ul li: hover ul {
  позиция: абсолютная;
  маржа сверху: 1px;
  шрифт: 10 пикселей;
}  
  
Мохаммад Усман

31.1k1616 золотых знаков8181 серебряный знак7979 бронзовых знаков

Создан 18 окт.

серый костюм

41311 золотой знак44 серебряных знака77 бронзовых знаков

2

Добавить bottom: 100% к вашему #menu: hover ul li: hover ul rule

Демо 1

  #menu: hover ul li: hover ul {
    позиция: абсолютная;
    маржа сверху: 1px;
    шрифт: 10 пикселей;
    внизу: 100%; / * добавлен этот атрибут * /
}
  

Или еще лучше, чтобы подменю не имели такого же эффекта, просто добавьте это правило

Демо 2

  #menu> ul> li: hover> ul {
    внизу: 100%;
}
  

Демо 3

источник: http: // jsfiddle.net / W5FWW / 4/

И чтобы вернуть границу, вы можете добавить следующий атрибут

  #menu> ul> li: hover> ul {
    внизу: 100%;
    border-bottom: 1px сплошной прозрачный
}
  

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *