Как сделать такое меню?

Question

[Natalia ivanova]

Добрый день.
Ребята, хочу сделать меню как здесь https://www.buschvacuum.com/ru/ru/service/semicon-...
Как?
Наверняка, кто-то уже делал подобное. Видел примеры.

Comments

[WapSter]

Смотрю с телефона, но могу преположить, что это .slideToggle() из jQuery

Answer 1

[Сергей Зенькович]

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

<div class="totalMenu">
		<div class="totalMenuInner">
			<ul class="menuList">
				<li class="menuItem">About</li>
				<li class="menuItem">More
					<ul class="subMenu">
						<li class="subMenuItem">About</li>
						<li class="subMenuItem">About</li>
						<li class="subMenuItem">About</li>
						<li class="subMenuItem">About</li>
					</ul>
				</li>
				<li class="menuItem">Сontacts</li>
				<li class="menuItem">Works</li>
			</ul>
			
		</div>
	</div>

.totalMenu{
	width: 100%;
	background-color: #000;
	margin-top: 450px;
}

.totalMenuInner{
	width: 80%;
	margin: 0 auto;
	height: 90px;
}

.menuItem{
	width: 25%;
	font-size: 50px;
	color: #fff;
	float: left;
	background-color: #000;
	text-align: center;
	padding: 15px 0;
	cursor: pointer;
	transition: .3s;
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	letter-spacing: 5px;
	position: relative;
}

.menuItem:hover{
	background-color: #fff;
	color: #000;
}

.menuItem:hover .subMenu{
	display: block;
}

.subMenu{
	display: none;
	position: absolute;
	top: 89px;
	left: 0;
	width: 100%;
	padding: 0;
}

.subMenuItem{
	padding: 15px 0;
	background-color: #000;
	width: 100%;
	color: #fff;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
}

.subMenu{
	border-top: 1px solid #fff;
}

.subMenuItem:hover{
	background-color: #fff;
	color: #000;
}