Як зробити список, що випадає в html

Горизонтальне меню, що випадає

Горизонтальне меню, що випадає використовується для впорядкування структури навігації по сайту. Оптимальна кількість рівнів вкладення — один-два. Чим менше рівнів вкладень, тим легше відвідувачеві сайту знайти потрібну інформацію. Як створити звичайне горизонтальне меню, докладно викладено в цьому уроці.

Як зробити горизонтальне меню, що випадає

  • зміст:
  • 1. HTML-розмітка і базові стилі для меню, що випадає з одним рівнем вкладення
  • 2. 3D меню, що випадає
  • 3. Розгортається меню, що випадає з логотипом
  • 4. Збільшується меню, що випадає
  • 5. Під’їжджаємо меню, що випадає

1. HTML-розмітка і базові стилі для меню, що випадає з одним рівнем вкладення

HTML-розмітка горизонтального меню, що випадає відрізняється від звичайного меню тим, що до потрібного елементу списку
додається вкладений список

    або .

Для позиціонування вкладеного меню щодо основного меню оголошуються наступні стилі:
— для елемента списку, в який вкладено випадає: li ;
— для меню, що випадає ul , а також значення left і top .

Для наочності і зручності форматування додамо основному меню клас topmenu, що випадає — submenu .

Приховати меню, що випадає можна декількома способами:
1) display: none;
2) visibility: hidden;
3) opacity: 0;
4) transform: scaleY (0);
5) за допомогою бібліотеки jQuery.

See the Pen MaObbz by Elena Nazarova (@nazarelen) on CodePen.

спосіб 1.

Меню, що випадає ховається за допомогою .submenu , при наведенні показується за допомогою .topmenu li: hover .submenu .

спосіб 2.

Меню ховається за допомогою .submenu , показується — .topmenu li: hover .submenu .

спосіб 3.

Меню ховається за допомогою .submenu , показується — .topmenu li: hover .submenu . Щоб меню не з’являлося при наведенні на область, де воно розташоване, додаємо visibility: hidden; , А при наведенні міняємо на visibility: visible; .

спосіб 4.

Меню ховається за допомогою .submenu , показується — .topmenu li: hover .submenu . Оскільки трансформація елемента за замовчуванням відбувається з центру, потрібно додати для .submenu , т.е. з верхнього лівого кута.

спосіб 5. За допомогою jQuery

2. 3D меню, що випадає

Цікаві ефекти можна створювати за допомогою CSS3-трансформацій, наприклад, змусити меню з’являтися з глибини екрану.

See the Pen OyjVJZ by Elena Nazarova (@nazarelen) on CodePen.

3. Розгортається меню, що випадає з логотипом

У цьому прикладі в верхньому розділі сторінки розташовані логотип і навігація по сайту. В якості логотипу може бути картинка або текст. Меню, що випадає поступово розгортається з-під елемента верхнього списку за допомогою функції CSS3-трансформації.

4. Збільшується меню, що випадає

Ще один приклад для меню, що випадає. Ефект збільшення при появі меню реалізується за рахунок зменшення початкового розміру .submenu , при наведенні розмір збільшується до .topmenu> li: hover .submenu .

See the Pen aNbGKv by Elena Nazarova (@nazarelen) on CodePen.

5. Під’їжджаємо меню, що випадає

Горизонтальне меню з міні-анімацією: при наведенні на посилання верхнього меню з’являється маленький гурток, який також супроводжує поява меню, що випадає.

See the Pen MpqypG by Elena Nazarova (@nazarelen) on CodePen.

Список, що випадає HTML: вчимося створювати і задавати стилі за допомогою CSS

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

Текст, видимий користувачеві, може відрізнятися від тексту, зазначеного в атрибуті value . Ось, як створити список, що випадає:

  • Список, що випадає створюється за допомогою тега

Використання атрибута value

Як згадувалося раніше, значення атрибута value може відрізнятися від тексту, що виводиться на сторінці. Наприклад, можна вивести для користувачів назви країн або квітів, а в атрибуті value використовувати шорткоди.

У наступному прикладі ми створимо список, що випадає з атрибутом value:

Приклад отримання доступу до обраного варіанту в JavaScript

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

Для option value HTML використовується наступний код:

Наступний рядок коду використовується в JavaScript, щоб отримати доступ до значення атрибуту value варіанти

Ось як забезпечується доступ до цього значення в HTML select option selected JavaScript:

Також можна отримати доступ до значення за допомогою JQuery-методу $.val ():

Замініть цей рядок у наведеному вище прикладі, і код буде відображати шорткод / ​​значення кольору в атрибуті value, а не видимий текст.

Приклад отримання значення в скрипті PHP

У цьому прикладі отримання значення обраного зі списку варіанти форма створюється за допомогою тега в розділі розмітки. Після вибору кольору зі списку натисніть на кнопку "Submit". Дані форми будуть передаватися в той же PHP-файл, після чого відобразиться вибраний колір:

Метод форми, який використовується в прикладі — POST, тому можна отримати значення форми за допомогою масиву PHP $ _POST [ ""] . Це код форми, який використовується в прикладі:

А ось як PHP-скрипт використовується, щоб отримати значення HTML select option:

Якщо в формі вказано метод GET, тоді використовуйте PHP-масив $ _GET [ ""] .

Визначення стилів списку за допомогою CSS

Тепер розглянемо, як визначити стилі списку, використовуючи можливості CSS . У наступній демо-версії я використав кілька простих властивостей CSS і властивості градієнта CSS3:

Разом з linear-gradient тут використано властивість box-shadow . Повний код CSS виглядає наступним чином:

Закруглені кути за допомогою властивості border-radius

Для HTML select option ми поставимо властивість CSS3 border-radius, щоб зробити закруглені кути. Колірна гамма також змінюється. Ви можете експериментувати з рамками, шириною, полями і іншими властивостями, як захочете:

Використання декількох атрибутів і стилів CSS

Щоб дати користувачам можливість вибирати зі списку кілька варіантів, потрібно використовувати атрибут multiple . У наведеному вище прикладі може бути обраний тільки один варіант. При використанні multiple можна вибрати кілька варіантів, натиснувши клавішу CTRL:

Використання фреймворка Bootstrap і плагінів для створення красивих випадаючих списків

Якщо ви використовуєте фреймворк Bootstrap, то у вас є можливість застосовувати плагіни для створення крутих option HTML .

Один з таких плагінів — Bootstrap-Select . Він додає для списку корисні функції. Наприклад, можна виконати пошук значення, вводячи текст в поле. Це особливо корисно, якщо в списку, що випадає багато варіантів.

Крім цього всі вибрані варіанти позначаються галочками, і можна встановити ліміт на кількість обраних варіантів, використовуючи атрибут multiple .

У наведеній демо-версії користувач може вибрати два варіанти зі списку:

Демо-версія списку з опцією пошуку

Використовуючи той же плагін, можна надати користувачам можливість шукати потрібні варіанти в списку HTML select option:

Як створити в HTML, що випадає?

Список, що розкривається html

Вітаю вас, друзі і колеги!

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

У цій статті я розповім вам, як можна зробити на HTML, що випадає і які атрибути можна використовувати при його створенні.

Навігація по статті:

  • Як зробити список, що розкривається html
  • HTML, що випадає з множинним вибором
  • Як задати обраний пункт за замовчуванням
  • Як підключити розкривається html до форми

Як зробити список, що розкривається html

Для створення в html списку існує тег

html випадає

Розмір випадає елемента, тобто, кількість відображуваних елементів залежить від заданого параметра size. У разі, якщо він не заданий, то в списку html відображається за замовчуванням 1 елемент.

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

HTML, що випадає з множинним вибором

За замовчуванням доступний для вибору тільки один елемент. Якщо є необхідність надання множинного вибору, то можна використовувати атрибут multiple. Ось приклад використання атрибута:

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