Html ve Css İle Yatay Animasyonlu Menü-15

Çok güzel dikey bir css menü örneği. Bu örneğimizde fare ile menü elemanlarının üzerine gelindiğinde oval bir animasyon ile menü elemanının üzeri siyah bir renk ile kaplanmakta ve hoş bir görüntü oluşturmaktadır. Menünün css ve html kodları aşağıda yazılmıştır. Kodları aynı kullanabileceğiniz gibi html kodları üzerinde değişiklik yaparak kendinize göre düzenleme yapabilirsiniz. İsterseniz sayfanın altında bulunan linkten menünün çalışan dosyasını indirebilirsiniz.

Css Kodları:

  <style type="text/css">
body {
	margin: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(to right bottom, gold, chocolate);
}

nav ul {
	list-style-type: none;
	padding: 0;
}

nav ul li {
	font-size: 40px;
	font-family: sans-serif;
	background-color: white;
	border: 2px solid black;
	letter-spacing: 0.1em;
	width: 5em;
	height: 1.5em;
	line-height: 1.5em;
	position: relative;
	overflow: hidden;
	margin: 0.5em;
	cursor: pointer;
}

nav ul li span {
	color: white;
	mix-blend-mode: difference;
}

nav ul li::before {
	content: '';
	position: absolute;
	width: 1.5em;
	height: inherit;
	background-color: black;
	border-radius: 50%;
	top: 0;
	left: -0.75em;
	transition: 0.5s ease-out;
}

nav ul li:hover::before {
	transform: scale(7);
}

</style>

Html Kodları:

<body>
<nav>
  <ul>
    <li><span>Anasayfa</span></li>
    <li><span>Ürünler</span></li>
    <li><span>Servisler</span></li>
    <li><span>İletişim</span></li>
  </ul>
</nav>
</body>

Buradan İndirebilirsiniz.

Bu Yazıya Tepkin Nedir?