Menu Navigation Dropdown With CSS3 Ala UTta'

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 :


Gimana?? jika sobat tertarik mencobanya, silahkan ikuti tahap-tahap berikut :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">
<!-- Dropdown Menu -->
<ul>

<li><div><a href="http://ut2a-4down.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://ut2a-4down.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://ut2a-4down.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://ut2a-4down.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://ut2a-4down.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://ut2a-4down.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://ut2a-4down.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://ut2a-4down.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://ut2a-4down.blogspot.com/">H O M E</a></div></li>
</ul>
<!-- End Dropdown Menu -->
</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 ^_^ Please rate this article: