Menu navigasi dengan icon efek hover di Blogger

Haisob apa kabar lagi? Setelah sebelumnya saya telah membagikan menu navigation multi dropdown dan mega menu navigation with thumbnails, kesempatan ini saya akan membagikan menu navigasi dengan icon efek hover di Blogger.

Mungkin saja diantara kamu ada yang ingin mengubah tampilan menunya karena bosan atau ingin membuat blog terlihat menarik kamu dapat mencoba menu navigasi ini. Bagaimana tampilan navigasi ini? kamu dapat melihat gambarnya atau kedemonya saja untuk lebih jelasnya lagi.

Menu dengan icon efek hover di Blogger


Menu Navigasi Efek Hover dengan Icon di Blog
Icon hover effect navigation bar



CSS

#seocips-btrix-nav {margin: 5px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}
#seocips-btrix-nav li {float: left;}
#seocips-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;}
#seocips-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);}
#seocips-btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}
#seocips-btrix-nav li a:hover {cursor: pointer;}
#seocips-btrix-nav li a:hover img {top: -85px;}
#seocips-btrix-nav li a:hover .aname {top: 85px;}
#seocips-btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}
#seocips-btrix-nav li:nth-child(2) a {background: #9bc704;}
#seocips-btrix-nav li:nth-child(3) a {background: #0dc3ff;}
#seocips-btrix-nav li:nth-child(4) a {background: #51a2ec;}
#seocips-btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;} 

HTML

<div id="seocips-btrix-nav">
<li> <a href="#"><span class="aname">Homes</span> <img src="http://2.bp.blogspot.com/-vcR6lUGsroY/Ug5ATZk8oZI/AAAAAAAAA00/XENkFMaBgv0/s1600/btrix-home.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Download</span> <img src="http://2.bp.blogspot.com/-TcXder58ssQ/Ug5ASx8pT0I/AAAAAAAAA0o/5UdA4_gLnV8/s1600/btrix-download.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> MySql</span> <img src="http://2.bp.blogspot.com/-umlQ7fKXobk/Ug5AT2bLnnI/AAAAAAAAA08/yrQHl6qPMH8/s1600/btrix-mysql.png" /> </a> </li>
<li> <a href="#"> <span class="aname"> Html</span> <img src="http://2.bp.blogspot.com/-2-iy8RJ92V8/Ug5ASDCru-I/AAAAAAAAA0c/GOBCPpZlA04/s1600/Btrix-html.png" /> </a> </li>
<li> <a href="#"> <span class="aname">Contact</span> <img src="http://4.bp.blogspot.com/-vsm9s0yQr9I/Ug5ASjqawnI/AAAAAAAAA0k/rqb01AbGaFw/s1600/btrix-contact.png" /> </a> </li> </div>
Silahkan di edit sesuai keinginan sobat.

Selamat mencoba, salam Blogger.
Join This Site