Разное

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

04.06.2023

Выпадающий список HTML, как сделать раскрывающийся список

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

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

Создание раскрывающегося блока, списка

Чтобы разместить в разделе раскрывающийся блок или список — перейдите в редактирование содержимого раздела, далее, разместите ту информацию (блоки, списки, таблицы, ссылки и т.д.), которая будет раскрываться по специальной ссылке.

Как это работает

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

Вам нужно:

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

Таким образом, у Вас должно получиться, например:

Текст описания…

Таблица размеров

Россий-
ский размер

Между-
народ-
ный размер

Обхват груди (см)

Обхват талии (см)

Обхват бедер (см)

Длина рукава (см)

44

M

88

70

96

60/62

46

M

92

74

100

60/62

48

L

96

78

104

60/62

50

L

100

82

108

61/63

Текст описания. ..

Далее, с помощью определенных действий

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

Текст описания…

Таблица размеров (нажмите для действия)

Россий-
ский размер

Между-
народ-
ный размер

Обхват груди (см)

Обхват талии (см)

Обхват бедер (см)

Длина рукава (см)

44

M

88

70

96

60/62

46

M

92

74

100

60/62

48

L

96

78

104

60/62

50

L

100

82

108

61/63

Текст описания. ..

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

Конструкция в виде HTML для формирования данной функции (развертывание/сертывание списка по клику):

<div>
<div>Заголовок блока</div>
<div>Разворачивающийся блок</div>
</div>

После того, как вы уже разместили необходимую информацию или список, которые будут раскрываться по клику в тексте раздела, необходимо перейти в редактирование HTML-кода страницы. Для этого, в панели инструментов визуального редактора выберите инструмент «Исходный код»

Для справки:

Теги HTML, которыми размечается документ для корректного отображения в браузере.

  • Абзац: <p>…</p>
  • Таблица: <table>…</table>
  • Список: <ul>…</ul>
  • Заголовок: <h2>….</h2> // (h3,h4,h5…)

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

HTML-код

 Описание

<p>Текст описания….. </p>

<p><strong>Таблица размеров</strong></p>

<table>
<tbody>
<tr>
<td>

———-//———-//———-//———-

</td>
</tr>
</tbody>
</table>

<p>Текст описания….. </p>

— текст до блока, который будем раскрывать

— заголовок раскрывающегося блока — ссылка-действие

— начало таблицы


— содержимое таблицы

— конец таблицы

— текст после выпадающего блока, который будем раскрывать

Далее, используя конструкцию для формирования раскрывающегося блока добавляем в код HTML теги, чтобы получилось:

HTML-код Описание

<p>Текст описания. …. </p>

<div>

<div>
    <p><strong>Таблица размеров</strong></p>

</div>

<div>
    <table>
    <tbody>
    <tr>
    <td>

    ———-//———-//———-//———-

    </td>
    </tr>
    </tbody>
    </table>
</div>

</div>

<p>Текст описания….. </p>

— текст до блока, который будем раскрывать

— начало раскрывающегося блока

— указание на заголовок блока — ссылка (начало)

—     заголовок блока — ссылка-действие
— указание на заголовок блока — ссылка (конец)

— начало блока, который раскрывается по ссылке
—     начало таблицы

—     содержимое таблицы

—     конец таблицы
— конец блока, который раскрывается по ссылке

— конец раскрывающегося блока

— текст после выпадающего блока, который будем раскрывать

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

После того, как код вставлен в нужные места, нажмите кнопку «Обновить», затем сохраните страницу.

Примеры раскрывающихся списков

Несколько примеров-вариаций, как можно использовать на сайте раскрывающиеся блоки, списки.

Пример 1. (Разворачивающийся список)

Заголовок выпадающего списка

  • Первый пункт выпадающего списка с длинным описанием
  • Второй пункт выпадающего списка с длинным описанием
  • Третий пункт выпадающего списка, без описания
  • Четвертый выпадающего пункт списка

Пример 2. (Таблица)

Заголовок таблицы

Название
 Значение 1 Значение 2 Значение 3
Название пункта 1 0 1 2
Название пункта 2 3 4 5

Пример 3. (Картинка + текст)

Заголовок блока

Текст описания……………………

Тег — раскрывающийся список

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

Описание

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

Элемент <select> может содержать два и более тегов <option>, определяющих доступные варианты выбора в раскрывающемся списке. Текст первого дочернего элемента <option> будет изначально отображаться в выпадающем списке, то есть будет являться значением по умолчанию для списка. Изменить или задать значение по умолчанию для <select> можно прописав атрибут selected к нужному варианту:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option selected="" value="audi">Audi</option>
</select>

Ширина раскрывающегося списка будет определяться самым длинным текстом, указанным в теге <option>.

Атрибуты

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

<select autofocus>
<select autofocus="autofocus">
<select autofocus="">
Пример »

Примечание: атрибут autofocus не поддерживается в IE9 и более ранних версиях, и в Firefox.

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

<select disabled>
<select disabled="disabled">
<select disabled="">
Пример »
form:
Определяет форму с которой связан элемент. В качестве значения атрибута выступает идентификатор элемента <form>. Этот атрибут позволяет размещать элемент <select> в произвольном месте документа, а не только в качестве потомка элемента <form>.

Примечание: атрибут form не поддерживается в Firefox.

multiple:
Указывает, что за один раз можно выбрать несколько вариантов. Выбор нескольких вариантов различается в зависимости от операционной системы:
  • Windows: удерживайте нажатой клавишу CTRL для выбора нескольких вариантов.
  • Mac: удерживайте нажатой клавишу CMD для выбора нескольких вариантов.
Возможные значения логического атрибута multiple: 

<select multiple>
<select multiple="multiple">
<select multiple="">
Пример »

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

name:
Определяет имя для раскрывающегося списка. Оно может быть использовано для доступа к данным формы после ее отправки или для ссылки на элемент в JavaScript.
size:
Указывает количество видимых вариантов в раскрывающимся списке. Если значение атрибута size больше 1, но меньше общего количества вариантов списка, то браузер автоматически добавит полосу прокрутки, чтобы указать, что есть еще варианты для просмотра. Пример »

Тег <select> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Нет.

Пример


<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Результат данного примера в окне браузера:

Создание раскрывающегося меню CSS

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

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

Раскрывающиеся списки CSS используют как HTML (язык гипертекстовой разметки), так и CSS (каскадные таблицы стилей). Существуют способы создания настраиваемых раскрывающихся меню с использованием JavaScript в дополнение к HTML и CSS, но в этом руководстве не используется JavaScript, поскольку в этом руководстве строго придерживаются CSS и HTML.

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

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

Основы раскрывающегося меню CSS

Создание вложенного HTML-меню

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

 

<голова>
<мета-кодировка="utf-8">
Раскрывающийся список CSS для кинопроизводства
<стиль>


<тело>
   
     <статья>
 
Кинопроизводство
  
<навигация>
     <ул>
 
  • 
     Директор 
<ул>
  
  • ДП
    • 
  
  • Директор
    • 
  
  • Помощник директора
    • 


 
  • 
     Художественный отдел 
<ул>
  
  • Захват
    • 
  
  • Освещение
    • 
  
  • Звук
    • 


 
  • 
     Отдел водоснабжения 
<ул>
  
  • Кинематограф
    • 
  
  • Каскадер-серфер
    • 
  
  • Капитан лодки
    • 


 
  • 
     Актеры 
<ул>
  
  • Джо Боб
    • 
  
  • Сью Зуковски
    • 
  
  • Роб Тандем
    •

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

     

    Добавление основного CSS

    Давайте добавим фон тела для начала.

     корпус {
фон: #333;
поле: 15 пикселей;
}

    Это добавит хороший фон для начала работы. Это может еще не выглядеть красиво, но вы доберетесь до этого.

    Давайте теперь перейдем к заголовку, добавив следующий CSS для определения h2 заголовок тег.

     h2 {
размер шрифта: 45px;
        вес шрифта: 100;
межбуквенный интервал: 15px;
выравнивание текста: по центру;
}

    Теперь вы можете увидеть результат в аспектах шрифта.

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

     артикул {
ширина: 600 пикселей;
поле: 0 авто;
фон: #0458d6;
цвет: #fff;
радиус границы: 3px;
box-shadow: 0 0 10px 2px #666;
}

    Результат такой:

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

     #main_nav ul ul {
положение: абсолютное;
слева: 0;
верх: 100%;
видимость: скрытая;
непрозрачность: 0;
}

    Теперь страница выглядит следующим образом:

    Что произойдет, если вы добавите раздел CSS для области навигации в виде блока?

     #main_nav {
дисплей: блок;
текстовое оформление: нет;
отступ: 5px 15px;
цвет: #000;
}

    Теперь область трансформируется, чтобы выглядеть так.

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

    Эти темы должны быть представлены в отдельном блоке, выделенном белым фоном. Давайте добавим следующий код, чтобы это произошло:

     #main_nav ul {
фон: белый;
плыть налево;
-webkit-переход: .5s;
переход: 0,5с;
}

    В результате область ссылки стала более отчетливой, чем окружающая ее рамка.

    Давайте сделаем шрифт прописным , добавив следующий код:

     #main_nav > ul > li > h2 {
преобразование текста: верхний регистр;
}

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

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

     #main_nav li {
плыть налево;
положение: родственник;
ширина: 150 пикселей;
стиль списка: нет;
-webkit-переход: . 5s;
переход: 0,5с;
}

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

    Давайте исправим выравнивание, удалив поля и отступы. Это должно позволить всем четырем темам оставаться наверху.

     * {
маржа: 0;
заполнение: 0;
}

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

     #main_nav li:hover, #main_nav li:hover li {
фон: #ддд;
}
#main_nav li li: hover, #main_nav li li: hover li {
фон: #bbb;
}
#main_nav li li li: hover {
фон: #999;
}
#main_nav li:hover > ul {
видимость: видимая;
непрозрачность: 1;
}

    И добавить для дальнейшего выравнивания навигации.

     #main_nav ул ул ул {
слева: 100%;
сверху: 0;
}

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

    Заключительное примечание

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

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

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

    Куда дальше?

    Это введение CSS DropDowns должно послужить хорошей отправной точкой для дальнейшего изучения дизайна веб-сайта, макета и практических приложений с HTML и CSS.

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

    HTML — отличный способ начать изучение кода, но профессиональный мир требует все больше и больше. Почему бы не улучшить свои навыки и возможности, продвинувшись еще дальше. Запишитесь на нашу программу «Введение в программирование Nanodegree» уже сегодня!

     

    Начать обучение

    Расходы • Pico.css

    выпадают с < Подробности Роль = "Список" > в виде обертки и <. .

    Для согласованности стиля с элементами формы выпадающие списки по умолчанию имеют стиль