Html ve Css İle Yatay Animasyonlu Menü-13
Css animasyonlu başka bir menü örneği. Fare ile menü elemanlarının üzerine gelinde oval şeklinde bir animasyon ile renk değiştirmektedir. Menünün css ve html kodları aşağıdaki gibidir. İsterseniz kod üzerinde değişiklik yaparak kullanabilirsiniz. Sayfanın altında bulunan linkten ise menünün çalışan dosyasını indirebilirsiniz.
Css Kodları:
<style type="text/css"> #menu { margin: 0; width: auto; background-color: #565656; font-size: 16px; font-family: Tahoma, Geneva, sans-serif; font-weight: bold; text-align: left; padding: 8px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -o-border-radius: 8px; } #menu ul { margin: 0; padding: 8px 0; list-style: none; height: auto; } #menu li { display: inline; padding: 8px; } #menu a { color: #FFF; padding: 10px; text-decoration: none; } #menu a:hover { background-color: #1B191B; color: #FFF; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; } #menu li .active { background-color: #1B191B; color: #FFF; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; } </style>
Html kodları:
<body> <div id="menu"> <ul> <li><a href="#" class="active">Anasayfa</a></li> <li><a href="#">Hakkında</a></li> <li><a href="#">Ürünler</a></li> <li><a href="#">Blog</a></li> <li><a href="#">İletişim</a></li> </ul> </div> </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ü