Menu Navigasi Horisontal Dropdown Bag.2 ala UTta'

Kali ini saya kembali lagi untuk memberikan tutorial kepada sobat akaUTta' semua. :D , oia saya segaja membrika judul Bag.2 krna beberpa jam lalu, saya juga memposting menu sprti ini dmna menu sebelumnya dan menu skrg yang akan saya bahas, tetap sama gan, krena efeknya sm murni sy menggunakan trik CSS, (Navigasi Horisontal Dropdown). cuma mungkin dr segi tampilan yang berbeda, dan menu ini sama halnya efek tooltip saat cursor mengarah ke slah satu judul menu.

Baiklah saya tdk akan byk menjelaskan pada tutorial saya kali ini: :D
dan dibawah ini adlah contohnya:

Masih Kurang puas?? silahkan lihat demonya disini..

Mari saya tunjukkan bagaimana cara membuat menu tersebut.

::HTML::

<!-- CSS3 Drop Down Menu Navigasi start -->
<ul id='aUT-menu'>
<li><a href='/'>Home</a></li>
<li>
<a href=''>Tips Blogspot</a>
<ul>
<li><a href='URL-HERE'>Tips-Trick Blogspot</a></li>
<li><a href='URL-HERE'>Tips Adsense</a></li>
<li><a href='URL-HERE'>Tips SEO</a></li>
<li><a href='URL-HERE'>Tips Alexa Rank</a></li>
<li><a href=''>Design</a>
<ul>
<li><a href='URL-HERE'>Efek</a></li>
<li><a href='URL-HERE'>Menu</a></li>
<li><a href='URL-HERE'>Download Template</a></li>
</ul>
</li>
</ul>
</li>
<li><a href=''>Komputer</a>
<ul>
<li><a href='URL-HERE'>Tips-Trick Komputer</a></li>
<li><a href='URL-HERE'>PhotoShop</a></li>
<li><a href='URL-HERE'>CorelDraw</a></li>
</ul>
</li>
<li>
<a href=''>Tips-Trik</a>
<ul>
<li><a href='URL-HERE'>Tips-Trick Blogspot</a></li>
<li><a href='URL-HERE'>Tips Adsense</a></li>
<li><a href='URL-HERE'>Tips SEO</a></li>
<li><a href='URL-HERE'>Tips Alexa Rank</a></li>
<li><a href=''>Design</a>
<ul>
<li><a href='URL-HERE'>Efek</a></li>
<li><a href='URL-HERE'>Menu</a></li>
<li><a href='URL-HERE'>Download Template</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='URL-HERE'>Buku Tamu</a></li>
<li><a href=''>Link Exchange</a>
<ul>
<li><a href='URL-HERE'>Tukar Link/Banner</a></li>
<li><a href='URL-HERE'>Link/Banner Friend</a></li>
</ul>
</li>
<li><a href='URL-HERE'>Contact Me</a></li>
</ul>
<!-- CSS3 Drop Down Menu Navigasi End -->

::CSS::

/*CSS3 Drop Down Menu By
akaUTta (ut2a-4down.blogspot.com)*/
#aUT-menu, #aUT-menu ul {
margin:0;padding:0;list-style:none;}
#aUT-menu {position:relative;width:970px;margin:5px auto;border:1px solid #222;
-moz-box-shadow:0 1px 1px #777;
-webkit-box-shadow:0 1px 1px #777;
box-shadow:0 1px 1px #777;
background:rgb(76,76,76); /* Old browsers */
background:-moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%);}
#aUT-menu:before,
#aUT-menu:after {content: "";display:table;}
#aUT-menu:after {clear:both;}
#aUT-menu {zoom:1;}
#aUT-menu li {float:left;border-right:1px solid #222;-moz-box-shadow:1px 0 0 #444;-webkit-box-shadow:1px 0 0 #444;box-shadow:1px 0 0 #444;position:relative;}
#aUT-menu a {float:left;padding:12px 30px;color:#999;
text-transform:normal;font:bold 14px Monaco,Monospace;text-decoration:none;text-shadow: 0 1px 0 #000;}
#aUT-menu li:hover > a {color:#fafafa;}
*html #aUT-menu li a:hover { /* IE6 only */
color:#fafafa;}
#aUT-menu ul {margin:20px 0 0 0;_margin:0; /*IE6 only*/
opacity:0;visibility:hidden;position:absolute;top:38px;left:0;z-index:9999;
background:rgb(69,72,77); /* Old browsers */
background:-moz-linear-gradient(top, rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%);
-moz-box-shadow:0 -1px rgba(255,255,255,.3);-webkit-box-shadow:0 -1px 0 rgba(255,255,255,.3);box-shadow:0 -1px 0 rgba(255,255,255,.3);-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;
-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out;}
#aUT-menu li:hover > ul {
opacity:1;visibility:visible;margin:0;}
#aUT-menu ul ul {top:0;left:173px;margin:0 0 0 20px;_margin:0; /*IE6 only*/
-moz-box-shadow:-1px 0 0 rgba(255,255,255,.3);-webkit-box-shadow:-1px 0 0 rgba(255,255,255,.3);box-shadow:-1px 0 0 rgba(255,255,255,.3);}
#aUT-menu ul li {float:none;display:block;border:0;_line-height:0; /*IE6 only*/
-moz-box-shadow:0 1px 0 #111, 0 2px 0 #666;-webkit-box-shadow:0 1px 0 #111, 0 2px 0 #666;box-shadow:0 1px 0 #111, 0 2px 0 #666;}
#aUT-menu ul li:last-child {-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;}
#aUT-menu ul a {padding:10px;_height:10px; /*IE6 only*/
display:block;white-space:nowrap;float:none;text-transform:none;}
#aUT-menu ul a:hover {background: -moz-linear-gradient(top, rgba(38,193,188,0) 0%, rgba(38,193,188,0.8) 15%, rgba(38,193,188,1) 19%, rgba(38,193,188,1) 20%, rgba(17,17,17,1) 50%, rgba(38,193,188,1) 80%, rgba(38,193,188,1) 81%, rgba(38,193,188,0.8) 85%, rgba(38,193,188,0) 100%);}
#aUT-menu ul li:first-child > a {-moz-border-radius:3px 3px 0 0;-webkit-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;}
#aUT-menu ul li:first-child > a:after {content: '';position:absolute;left:40px;
top:-6px;border-left:6px solid transparent;border-right:6px solid transparent;
border-bottom:6px solid #444;}
#aUT-menu ul ul li:first-child a:after {left:-6px;top:50%;margin-top:-6px;border-left:0;border-bottom:6px solid transparent;border-top:6px solid transparent;
border-right:6px solid #00D1C3;}
#aUT-menu ul li:first-child a:hover:after {border-bottom-color:#00D1C3;}
#aUT-menu ul ul li:first-child a:hover:after {border-right-color:#00D1C3;border-bottom-color:transparent;}
#aUT-menu ul li:last-child > a {-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;}

- Efek CSS Menu di atas mungkin kurang menarik bagi sobat, tetapi untuk seorang ‘beginner’ seperti saya sudah cukup lumayan….he..he..he…

- Jika Sobat Ingin Melihat 'Menu Navigasi Horisontal Dropdown' saya sebelumnya, silahkan Klik Disini.

Please rate this article: