Выпадающие списки CSS

На чтение 8 мин Просмотров 141 Опубликовано Обновлено

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

    , как это широко известно в мире HTML. Теги вложенного списка (
  • ) под тегом
      используются для создания выпадающей структуры. Для создания эффектов используйте CSS для компонентов, присутствующих в структуре. CSS — это очень простое свойство, используемое для создания выпадающего меню.

      Level-1
    " style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button">
    



	Dropdown property

Вывод:

Пример: Добавление свойства CSS в структуру HTML для создания интерактивной выпадающей структуры.

GeeksforGeeks

Dropdown Navigation property

" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button">




	Navigation property
	



	
class="gfg">GeeksforGeeks

	
Dropdown Navigation property

Вывод:

Приведенный выше код выдает правильный вывод на основе структуры выпадающего списка. Важные части HTML-кода обсуждаются ниже:

  • nav — это самый внешний контейнер
  • для nav ul li ul li – float установлено значение none, чтобы оно оставалось неизменным при наведении на него курсора мыши.
  • Используйте относительное положение, чтобы li перемещался или изменял свое положение относительно своего компонента.
  • Используйте ‘>’ после наведения курсора мыши, чтобы увидеть эффект наведения курсора мыши на ближайший следующий ul элемента li.

Выпадающий список, выровненный по правому краю:

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

GeeksforGeeks

Right-aligned Dropdown content property

" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button">




	right-aligned dropdown content property
	



	
class="gfg">GeeksforGeeks

	
Right-aligned Dropdown content property

	
"drop-down"
		style=" float: right; 
				margin-right: 70px;">

Вывод:

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

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

Пример:

Image Dropdown property
" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button">




	Image Dropdown
	



	
class="gfg">Image Dropdown property

	
class="dropmenu">
		
"https://media.geeksforgeeks.org/wp-content/uploads/temp1.png"
			width="150"
			height="50" align="middle">
		
class="sub-dropmenu">
			
"https://media.geeksforgeeks.org/wp-content/uploads/temp1.png"
				width="600"
				height="200">

Вывод:

Выпадающие списки по нажатию:

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

Пример:

button { background: #009900; width: 200px; height: 60px; color: white; border: 1px solid #fff; font-size: 20px; border-radius: 5px; } ul li { list-style: none; } ul li a { display: block; background: #c99; width: 200px; height: 50px; text-decoration: none; text-align: center; padding: 10px; border-radius: 5px; text-align: center; color: white; font-size: 25px; } ul li a { text-decoration: none; } ul li a:hover { background: #009900; } .open { display: none; } .gfg { font-size: 40px; font-weight: bold; color: #009900; Text-align: center; } p { font-size: 20px; font-weight: bold; text-align: center; }
GeeksforGeeks

Clicked Dropdown content property

" style="color:#D4D4D4;display:none" aria-label="Copy" class="code-block-pro-copy-button">




	clicked dropdown
	
	



	
class="gfg">GeeksforGeeks

	
Clicked Dropdown content property

	
"dropdown">
		
		
class="open" id="drop-menu">

Вывод:

Примечание: Некоторые важные моменты кода:

css
Оцените статью
Добавить комментарий