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

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

<head>
	<title>Dropdown property</title>
</head>

<body>
	<nav>
		<ul>
			<li class="Lev-1">
				<a href="">Level-1</a>
				<ul>
					<li><a href="">Link 1</a></li>
					<li><a href="">Link 2</a></li>
					<li><a href="">Link 3</a></li>
					<li><a href="">Link 4</a></li>
				</ul>
			</li>
		</ul>
	</nav>

Вывод:

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

<!DOCTYPE html>
<html>

<head>
	<title>Navigation property</title>
	<style>
		a {
			color: white;
			background-color: #990;
			text-decoration: none;
		}

		nav {
			background: #333;
		}

		nav>ul {
			margin: 0 auto;
			width: 80px;
		}

		nav ul li {
			display: block;
			float: left;
			margin-left: -40px;
			position: relative;
		}

		nav ul a {
			display: block;
			float: left;
			width: 150px;
			padding: 10px 20px;
		}

		nav ul a:hover {
			background: #090;
		}

		nav ul li ul li {
			float: none;
		}

		nav ul li ul {
			display: none;
			position: absolute;
			background: #333;
			top: 42px;
		}

		nav ul li:hover>ul {
			display: block;
		}

		nav ul li a {
			display: block;
		}

		.gfg {
			font-size: 40px;
			font-weight: bold;
			color: #009900;
			Text-align: center;
		}

		p {
			font-size: 20px;
			font-weight: bold;
			text-align: center;
		}
	</style>
</head>

<body>
	<div class="gfg">GeeksforGeeks</div>
	<p>Dropdown Navigation property</p>
	<nav>
		<ul>
			<li class="Lev-1">
				<a href="">Level-1</a>
				<ul>
					<li><a href="">Link 1</a></li>
					<li><a href="">Link 2</a></li>
					<li><a href="">Link 3</a></li>
					<li><a href="">Link 4</a></li>
				</ul>
			</li>
		</ul>
	</nav>
</body>

</html>

Вывод:

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

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

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

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

<!DOCTYPE html>
<html>

<head>
	<title>right-aligned dropdown content property</title>
	<style>
		#drop {
			background-color: teal;
			color: white;
			padding: 10px;
			font-size: 16px;
			width: : 200px;
			height: : 60px;
			border-radius: 5px;
			font-size: 20px;
		}

		#drop-down {
			position: relative;
			display: inline-block;
		}

		#dropdown-menu {
			display: none;
			position: absolute;
			background-color: #666;
			width: 160px;
			margin-left: -45px;
			border-radius: 5px;
			z-index: 1;
		}
	#dropdown-menu a {
			color: black;
			padding: 12px 16px;
			text-decoration: none;
			display: block;
		}

		.gfg {
			font-size: 40px;
			font-weight: bold;
			color: #009900;
			Text-align: center;
		}

		p {
			font-size: 20px;
			font-weight: bold;
			text-align: center;
		}

		#dropdown-menu a:hover {
			background-color: #ddd;
		}

		#drop-down:hover #dropdown-menu {
			display: block;
		}
	</style>
</head>

<body>
	<div class="gfg">GeeksforGeeks</div>
	<p>Right-aligned Dropdown content property</p>
	<div id="drop-down"
		style=" float: right; 
				margin-right: 70px;">
		<button id="drop">DropDown</button>
		<div id="dropdown-menu">
			<a href="">Item 1</a>
			<a href="">Item 2</a>
			<a href="">Item 3</a>
			<a href="">Item 4</a>
		</div>
	</div>
</body>

</html>

Вывод:

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

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

Пример:

<!DOCTYPE html>
<html>

<head>
	<title>Image Dropdown</title>
	<style>
		.dropmenu {
			position: relative;
			display: inline-block;
			margin-left: 150px;
		}

		.sub-dropmenu {
			display: none;
			position: absolute;
		}

		.dropmenu:hover .sub-dropmenu {
			display: block;
		}

		.enlarge {
			padding: 15px;
			text-align: center;
		}

		.gfg {
			margin-left: 40px;
			font-size: 30px;
			font-weight: bold;
		}
	</style>
</head>

<body>
	<div class="gfg">Image Dropdown property</div>
	<div class="dropmenu">
		<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/temp1.png"
			width="150"
			height="50" align="middle">
		<div class="sub-dropmenu">
			<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/temp1.png"
				width="600"
				height="200">
		</div>
	</div>
</body>

</html>

Вывод:

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

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

Пример:

<!DOCTYPE html>
<html>

<head>
	<title>clicked dropdown</title>
	<style type="text/css">
		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;
		}
	</style>
	<script type="text/javascript">
		function open_menu() {
			let clicked = document.getElementById('drop-menu');
			if (clicked.style.display == 'block') {
				clicked.style.display = 'none';
			}
			else {
				clicked.style.display = 'block';
			}
		}
	</script>
</head>

<body>
	<div class="gfg">GeeksforGeeks</div>
	<p>Clicked Dropdown content property</p>
	<div id="dropdown">
		<button onclick="open_menu()">Click Me!</button>
		<div class="open" id="drop-menu">
			<ul>
				<li><a href="">Item-1</a></li>
				<li><a href="">Item-2</a></li>
				<li><a href="">Item-3</a></li>
				<li><a href="">Item-4</a></li>
			</ul>
		</div>
	</div>
</body>

</html>

Вывод:

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

Функция javascript будет разворачивать и сворачивать меню при нажатии кнопки “Click Me”.
Мы используем onclick для вызова функции javascript в теге button.