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.

20 komentar

keren gan kapan-kapan ane coba...

btw karya sendiri yah sob????

keren ni mas,,izin simpen dulu ya.. :)

lumayan .. cuma redesign z
kodenya dapet dari yg lain ...

monggo -monggo silahkan ...

menu hover memang keren sob, nice post!

kemarin sonar sekarang hover. ^_^

bener sob .. bikin greget he

besok apa ya sob ...

Lagi malas utak-atik script. ^_^

hehe..

nikmatin yg ada z dulu sob ....

menuu... lagi hihihi

Besok kue Lemper aja kang :)

Banyak juga varian menu nya ya kang..
Kalo ke senggol mouse...bereaksi...hehe :)

iya neh sob ..hehe

biar bisa milih mas bud ...
ya itulah resiko ke senggol hehe

siap mas bud .. tinggal mangap aza hihi

Nuju ngedit sugan? asa aneh tadi tampilana :)

muhun kang .. nuju masang tooltip dina related post na .. hehe

Salam Kunjungan Pertamax,. kanggo pun dulur urang Cianjur
Sobat Kang @RULY JN,. Sae..bagus nih sobat artikelna idzin
simak skaligus mencoba di blog saya tentang Menu hovert na

Terima kasih nya Kang RULY,..Salam sukses sobat
pami aya waktos linggih ka rorompok abi di karrysta
http://karristaent.blogspot.com/

Punten nyimpen link hatur nuhun