Menu Navigation Dropdown With CSS3 Ala UTta

Diposting oleh Unknown di 10.00 . Kamis, 14 November 2013

Label: ala, css3, dropdown, menu, navigation, utta, with

http://picturestack.com/679/561/qUJdemoE5c.jpg

Pada Postingan saya sebelumnya saya pernah membahas Menu Dropdown Sederhana With CSS,Sebenarnya gak jauh beda sama postingan saya yang lalu, cuma tampilan ajj yang membedakan. Baiklah, Untuk Contohnya sobat bisa lihat sendiri :

http://picturestack.com/686/437/jIlLivedemor5n.png

Gimana?? jika sobat tertarik mencobanya, silahkan ikuti tahap-tahap berikut :

1. Login Ke Akun Blog Sobat

2. Pilih Rancangan/Tata Letak
3. Cari Kode ]]></b:skin> , Lalu Masukan Kode CSS Berikut tepat diatasnya.

/* UTNavHor */
.UTnavi{position:absolute;top:0px;left:2px;width:100%;z-index:98;margin:0 !important;height:45px;padding:2px 1px 1px;background:#222;border-bottom-left-radius:8px;border-bottom-right-radius:8px;-moz-border-radius-bottomleft:8px;-moz-border-radius-bottomright:8px;-webkit-border-bottom-left-radius:8px;-webkit-border-bottom-right-radius:8px;}
.UTnavi:hover{z-index:999;}
.UTnavi a{color:#fff;text-decoration:none;font-family:tahoma;font-size:0.9em;font-weight:bold;-o-transition:all 0.8s linear;-moz-transition:all 0.8s linear;-webkit-transition:all 0.8s linear;}
.UTnavi ul{padding:0 !important;margin:0 !important;list-style:none !important;}
.UTnavi li, .UTnavi ul li.home{margin-right:1px !important;float:left;position:relative;width:110px;padding:11px 0 11px 0 !important;text-align:center;background-image:url(http://picturestack.com/677/912/obzbguttaeKi.gif);background-repeat:no-repeat;background-position:top right;-o-transition:all 0.8s ease-out;-moz-transition:all 0.8s ease-out;-webkit-transition:all 0.8s ease-out;}
.UTnavi ul li.home{background: url(http://picturestack.com/677/912/RarbghomeuttakSf.png) bottom left no-repeat;}
.UTnavi ul li.home:hover{background: url(http://picturestack.com/677/912/obzbguttaeKi.gif) top center no-repeat; color:red;}
.UTnavi ul li.home:hover a{color:red !important;}
.UTnavi li li:hover{background-image:none;}
.UTnavi li ul{display:none;position:absolute;top:35px !important;left:0px !important;padding:0 0 2px 0 !important;
background-color:#333 !important;}
.UTnavi li:hover{background:#999 url(http://picturestack.com/677/912/q2PRedFireHovLBf.gif) top center no-repeat;background-position:50% 5px;border-bottom:1px solid #444;border-top:1px solid #444;}
.UTnavi li:hover ul{display:block;margin-top:11px !important;}
.UTnavi li ul li,.UTnavi li ul li:hover{width:180px;padding:0 !important;background-image:url(https://sites.google.com/site/gubhugreyot/horizontal/bgNavHovV2H160.gif);background-repeat:repeat-x;background-position:bottom left;margin:0px !important;text-align:left;}
.UTnavi li ul li div a{display:block;padding:5px 12px 5px 12px !important;font-weight:normal;font-family:century gothic;font-size:13px;}
.UTnavi li ul li div a:hover{background-color:#151515;color: #3399FF !important;}

4. Selanjutnya letakkan kode berikut, di bawah kode Head-nav(sesuaikan template) Masing-masing :

<div class="UTnavi">

<ul>

<li><div><a href="http://.blogspot.com/">MENU-1</a></div>
   <ul>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   </ul>
</li>

<li><div><a href="http://.blogspot.com/">MENU-2</a></div>
   <ul>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   </ul>
</li>

<li><div><a href="http://.blogspot.com/">MENU-3</a></div>
   <ul>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   </ul>
</li>

<li><div><a href="http://.blogspot.com/">MENU-4</a></div>
   <ul>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   </ul>
</li>

<li><div><a href="http://.blogspot.com/">MENU-5</a></div>
   <ul>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   </ul>
</li>

<li><div><a href="http://.blogspot.com/">MENU-6</a></div>
   <ul>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   </ul>
</li>

<li><div><a href="http://.blogspot.com/">MENU-7</a></div>
   <ul>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   </ul>
</li>

<li><div><a href="http://.blogspot.com/">MENU-8</a></div>
   <ul>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   <li><div><a href="URL-LINK">Menu</a></div></li>
   </ul>
</li>

<li class="home"><div><a href="http://.blogspot.com/">H O M E</a></div></li>
</ul>

</div>

5. Simpan template..........

Selamat mencoba, dan kembangkan sesuai keinginan masing-masing... :)

Jika ada pertanyaan jangan sungkan untuk meninggalkan jejak di kotak komentar trim atas kunjungannya ^_^

Terbaru