CSS"Menu"Icon Hovert Efect

CSS "Menu" Icon Hovert Efect - Melanjutkan postingan sebelumnya tentang membuat menu Blogger CSS3 Sonar Menu untuk blog dan kali ini kesempatan saya untuk melanjutkan tutorial dengan share sebuah menu yang apabila tersentuh mouse memberikan efect slide up simbol/icon didalamnya. Biar brada tidak penasaran silahkan lihat demonya dibawah ini. 

Kustomisasi

  • Masuk pada Edit HTML
  • Cari Kode ]]></b:skin>
  • Masukan kode dibawah tepat diatas kode ]]></b:skin>
/* The CSS Code here*/
#btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#btrix-nav li {float: left;}
#btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}
#btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}
#btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#btrix-nav li a:hover {cursor: pointer;}
#btrix-nav li a:hover img {top: -85px;}
#btrix-nav li a:hover .aname {top: 85px;}
#btrix-nav li:nth-child(1) a {background: #0088cc;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#btrix-nav li:nth-child(2) a {background: #cc6600;}
#btrix-nav li:nth-child(3) a {background: #00cccc;}
#btrix-nav li:nth-child(4) a {background: #00cc66;}
#btrix-nav li:nth-child(5) a {background: #00cc66;}
border-radius: 0 5px 5px 0;border-right: 1px solid #555;}
Simpan , dan sekarang masukan kode HTML dibawah ini , caranya !
  • Add Gadget/HTML Javascript 
  • Masukan kode dibawah ini  
  • Save 
<div id="btrix-nav">
<li> <a href="#"><span class="aname">Homes</span> <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/64/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="aname">About</span> <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/64/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Author</span> <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/64/Arrows-Up-circular-icon.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="http://icons.iconarchive.com/icons/visualpharm/icons8-metro-style/64/Arrows-Up-circular-icon.png" /> </a> </li> </div>
Catatan :
"#" Ganti dengan link brada

Redesaign : Actionblog//Reshare:Btrix.

Artikel Menarik Lainnya :