Html ve Css İle Yatay Animasyonlu Menü-14
Yine değişik css ile yapılmış başka bir menü örneği. Bu menü örneğimizde yatay olarak bir menü tasarlanmıştır. Fare ile menü elemanları üzerine geldiğinde soldan sağa doğru bir çizgi meydana gelmektedir. Menünün kodları css ve html olarak aşağıdaki gibidir. Kodlar üzerinde değişiklik yaparak kullanabilirsiniz. Sayfanın altında menünün çalışan dosyası bulunmaktadır. Buradan dosyayı indirebilirsiniz.
Css Kodları:
<style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Oswald:500'); .back{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background:url(https://pp.userapi.com/c841122/v841122831/327e/nHt-92F6yc4.jpg) no-repeat top center #efeff1; background-size:cover; } .thx{ position: fixed; left:50%; transform:translateX(-50%); bottom: 15px; } nav{ width: 100%; position: fixed; top:50px; text-align:center; } nav a{ font-family: 'Oswald', sans-serif; font-weight:500; text-transform:uppercase; text-decoration:none; color:#16151b; margin:0 15px; font-size:16px; letter-spacing:1px; position:relative; display:inline-block; } nav a:before{ content:''; position: absolute; width: 100%; height: 3px; background:#16151b; top:47%; animation:out 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both; } nav a:hover:before{ animation:in 0.2s cubic-bezier(1, 0, 0.58, 0.97) 1 both; } @keyframes in{ 0%{ width: 0; left:0; right:auto; } 100%{ left:0; right:auto; width: 100%; } } @keyframes out{ 0%{ width:100%; left: auto; right: 0; } 100%{ width: 0; left: auto; right: 0; } } @keyframes show{ 0%{ opacity:0; transform:translateY(-10px); } 100%{ opacity:1; transform:translateY(0); } } @for $i from 1 through 5 { nav a:nth-child(#{$i}){ animation:show .2s #{$i*0.1+1}s ease 1 both; } } </style>
Html Kodları:
<body> <div class="back"></div> <nav> <a href="#">Hakkında</a> <a href="#">Çalışmalar</a> <a href="#">Ortaklar</a> <a href="#">Fiyat</a> <a href="#">İletişim</a> </nav> </body>
Bu Yazıya Tepkin Nedir?
+1
+1
+1
+1
+1
+1
+1
<< Önceki Yazı
Sonraki Yazı >>
css açılır menü örnekleri, css dikey açılır menü örnekleri, css dikey menü örnekleri, css menü örnekleri, css menü tasarımları, Css ücretsiz menü örnekleri, css yatay menü örnekleri, dikey akerdion menü örnekleri, free css menu, html menü örnekleri, icon menü örneği, ücretsiz css menü