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>

Buradan İndirebilirsiniz.

Bu Yazıya Tepkin Nedir?