Setelah sebelumnya seocips pernah membagikan menu navigation multi dropdown dan mega menu navigation, kali ini seocips 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 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.
0 Komentar untuk "Menu navigasi dengan icon efek hover di Blogger"