Html ve Css İle Yatay Animasyonlu Menü-10 - Bilişim Konuları

Html ve Css İle Yatay Animasyonlu Menü-10

Bu menü örneğimizde Css ve Html ile yapılmış güzel animasyonlu yatay bir menü tasarımı yapılmaktadır. Örneğimizde menü elemanları animasyonlu bir şekilde isim değiştirmekte ve daha sonra o menü elemanı ile ilgili resim yine animasyonlu bir şekilde menü elemanının üzerinde belirmektedir. Menü css ve html kodları aşağıdaki gibidir. İstenildiği takdirde kodlar üzerinde değişiklik yapılarak değiştirilebilir. Yada sayfa altında bulunan linkten menünün çalışan dosyasını indirebilirsiniz.

Css Kodları:

<style type="text/css">
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*:focus {
  outline: 0;
}

html {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
	align-items: center;
	background-color: #111111;
	display: flex;
	font-family: 'Poppins', sans-serif;
	justify-content: center;
	min-height: 100vh;
}

ul {
	display: flex;
	margin: 0 10px;
}

ul li:before {
	background-color: #000000;
	background-size: cover;
	content: '';
	height: 200px;
	left: -65px;
	opacity: 0;
	position: absolute;
	top: -90px;
	transform: translateY(100px);
	transition: opacity 0.5s ease,
							transform 0.5s ease;
	width: 200px;
	z-index: -1;
}

ul li:nth-child(1):before {
	background-image: url('https://images.unsplash.com/photo-1564031314476-678354c0b6e7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1228&q=80');
}

ul li:nth-child(2):before {
	background-image: url('https://images.unsplash.com/photo-1563964040780-8605906e3eb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
}

ul li:nth-child(3):before {
	background-image: url('https://images.unsplash.com/photo-1563906385047-ab0e0c479bc3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1349&q=80');
}

ul li:nth-child(4):before {
	background-image: url('https://images.unsplash.com/photo-1563906399005-2f376fcef08b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1349&q=80');
}

ul li:nth-child(5):before {
	background-image: url('https://images.unsplash.com/photo-1563900409641-e9d427a611bd?ixlib=rb-1.2.1&auto=format&fit=crop&w=700&q=80');
}

ul li:nth-child(6):before {
	background-image: url('https://images.unsplash.com/photo-1563858391804-19ec0c1c50e3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');
}

ul li:hover:before {
	opacity: 0.5;
	transform: translateY(0);
	transition-delay: 0.5s;
}

ul li {
	list-style: none;
	margin: 0 10px;
	position: relative;
}

ul li a {
	display: block;
	font-weight: 600;
	height: 20px;
	overflow: hidden;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
}

ul li a span {
	color: #ffffff;
	display: block;
	height: 100%;
	transition: transform 0.5s ease;
	width: 100%;
}

ul li a span:nth-child(1) {
	color: #444444;
}

ul li:hover a span:nth-child(1) {
	transform: translateY(-100%);
}

ul li a span:nth-child(2) {
	color: #ffffff;
}

ul li:hover a span:nth-child(2) {
	transform: translateY(-100%);
}
</style>

Html kodları:

<body>
<ul>
	<li>
		<a href="javascript:void(0);">
			<span>
				Anasayfa
			</span>
			
			<span>
				Anasayfa
			</span>
		</a>
	</li>
	
	<li>
		<a href="javascript:void(0);">
			<span>
				Hakkında
			</span>
			
			<span>
				Hakkında
			</span>
		</a>
	</li>
	
	<li>
		<a href="javascript:void(0);">
			<span>
				Servisler
			</span>
			
			<span>
				Servisler
			</span>
		</a>
	</li>
	
	<li>
		<a href="javascript:void(0);">
			<span>
				Özgeçmiş
			</span>
			
			<span>
				Özgeçmiş
			</span>
		</a>
	</li>
	
	<li>
		<a href="javascript:void(0);">
			<span>
				Takım
			</span>
			
			<span>
				Takım
			</span>
		</a>
	</li>
	
	<li>
		<a href="javascript:void(0);">
			<span>
				İletişim
			</span>
			
			<span>
				İletişim
			</span>
		</a>
	</li>
</ul>
</body>

Buradan İndirebilirsiniz.

Bu Yazıya Tepkin Nedir?
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Yorum Yap