Меню для интернет-магазина на html и css

Добро пожаловать! Здесь вы можете узнать о последних обновлениях и решить вопросы касательно использования функционала данного сайта! Перед посещением обязательно ознакомьтесь с правилами форума. Некоторые функции форума доступны только зарегистрированным пользователям.
1 ответ(ов) в теме
Romych
не в сети 1 день
На сайте с 13.03.2021
Модератор
Титул: Элита
100%
Тем 5
Сообщения 26
Подарок автору
1
18:25

HTML

Спойлер
<div>
	<ul id="menuha">
		<li><a href="#">Платные товары</a>
			<ul>
				<li><a href="#">Шаблоны сайтов</a></li>
				<li><a href="#">Вебдизайн и графика</a></li>
				<li><a href="#">Инвестиционные игры</a></li>
				<li><a href="#">Интернет магазины</a></li>
				<li><a href="#">Мониторинги игр</a></li>
				<li><a href="#">Буксы (САР)</a></li>
				<li><a href="#">Лото и бонусники</a></li>
				<li><a href="#">Хайпы и удвоители</a></li>
				<li><a href="#">Лото и бонусники</a></li>
				<li><a href="#">Крипто и майнинг</a></li>
			</ul>
		</li>
		<li><a href="#">Бесплатные товары</a>
			<ul>
				<li><a href="#">Шаблоны сайтов</a></li>
				<li><a href="#">Вебдизайн и графика</a></li>
				<li><a href="#">Инвестиционные игры</a></li>
				<li><a href="#">Интернет магазины</a></li>
				<li><a href="#">Мониторинги игр</a></li>
				<li><a href="#">Буксы (САР)</a></li>
				<li><a href="#">Лото и бонусники</a></li>
				<li><a href="#">Хайпы и удвоители</a></li>
				<li><a href="#">Лото и бонусники</a></li>
				<li><a href="#">Крипто и майнинг</a></li>
			</ul>
		</li>
		<li><a href="#">VIP товары</a>
			<ul>
				<li><a href="#">Шаблоны сайтов</a></li>
				<li><a href="#">Вебдизайн и графика</a></li>
				<li><a href="#">Инвестиционные игры</a></li>
				<li><a href="#">Интернет магазины</a></li>
				<li><a href="#">Мониторинги игр</a></li>
				<li><a href="#">Буксы (САР)</a></li>
				<li><a href="#">Лото и бонусники</a></li>
				<li><a href="#">Хайпы и удвоители</a></li>
				<li><a href="#">Лото и бонусники</a></li>
				<li><a href="#">Крипто и майнинг</a></li>
			</ul>
		</li>
	</ul>
</div>

CSS

Спойлер
#menuha {
 margin-bottom: 6px;
 position: relative;
 float: left;
 width: 100%;
 border-radius: 3px;
 box-shadow: inset 0 1px 12px 3px rgb(255 255 255 / 50%), inset 0 -1px 0 rgb(0 0 0 / 15%), 0 1px 3px rgb(0 0 0 / 15%);
 background: #ccc;
}

#menuha, #menuha ul {
 list-style: none;
}

#menuha > li {
 float: left;
 position: relative;
 border-right: 1px solid rgba(0,0,0,.1);
 box-shadow: 1px 0 0 rgba(255,255,255,.25);
 perspective: 1000px;
}

#menuha > li:first-child {
 border-left: 1px solid rgba(255,255,255,.25);
 box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
}

#menuha a {
 text-align: left;
 display: block;
 position: relative;
 z-index: 10;
 padding: 13px 20px;
 text-decoration: none;
 color: rgba(75,75,75,1);
 line-height: 1;
 font-weight: 600;
 letter-spacing: -.05em;
 background: transparent;
 text-shadow: 0 1px 1px rgba(255,255,255,.9);
 transition: all .25s ease-in-out;
}

#menuha > li:hover > a {
 background: #4b4c52;
 color: #ffa7a7;
 text-shadow: none;
}
 
#menuha li {
 z-index: 10;
}

#menuha li ul {
 position: absolute;
 left: 0;
 z-index: 10;
 width: 200px;
 padding: 0;
 opacity: 0;
 visibility: hidden;
 border-bottom-left-radius: 4px;
 border-bottom-right-radius: 4px;
 background: transparent;
 overflow: hidden;
 transform-origin: 50% 0%;
}

#menuha li:hover ul {
 padding: 15px 0;
 background: #4b4c52;
 opacity: 1;
 visibility: visible;
 box-shadow: 1px 1px 7px rgba(0,0,0,.5);
 animation-name: swingdown;
 animation-duration: 1s;
 animation-timing-function: ease;
}

@keyframes swingdown {
 0% {
 opacity: .99999;
 transform: rotateX(90deg);
 }
 30% {
 transform: rotateX(-20deg) rotateY(5deg);
 animation-timing-function: ease-in-out;
 }
 65% {
 transform: rotateX(20deg) rotateY(-3deg);
 animation-timing-function: ease-in-out;
 }
 100% {
 transform: rotateX(0);
 animation-timing-function: ease-in-out;
 }
}

#menuha li li a {
 padding: 3px 15px;
 font-weight: 400;
 color: #ddd;
 text-shadow: none;
 border-top: dotted 1px transparent;
 border-bottom: dotted 1px transparent;
 transition: all .15s linear;
}

#menuha li li a:hover {
 color: #82d0ff;
 border-top: dotted 1px rgba(255,255,255,.15);
 border-bottom: dotted 1px rgba(255,255,255,.15);
 background: rgba(0,223,252,.02);
}

Меню может быть для чего угодно - интернет магазин просто для примера)) Что-бы посмотреть пример данного меню в живую, можно выполнить код в редакторе CodePen

Лучшая благодарность - Like на сообщение!
0
Вы не имеете права на публикацию сообщений в этой теме