Menu Navigasi Horisontal Dropdown ala UTta'

Met Pagi Sahabat Info akaUTta' semuanya, Pada kesempatan kali ini utta akan memberikan info yaitu cara memasang 'Menu Navigasi Horisontal Dropdown'. Oia perlu sobat kethui salah satu menu navigasi horisontal dengan css ini adlah cara alternatif yang bisa sobat pasang diblog masing2. karena menu ala utta ini gk jlek2 amat.wkwkkkk,..
dan dibawah ini adlah contohnya:
http://picturestack.com/1/442/2J2akaUTtademf28.jpg
Masih Kurang puas?? silahkan lihat demonya disini..

Mari saya tunjukkan bagaimana cara membuat menu tersebut.

::HTML::
<!-- Menu Navigasi Horisontal Dropdown Start -->
<div id='menuwrapperakautta'>
<div id='menuwrapperakautta'>
<ul id='menubarakautta'>
<li class='homeaka'><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5VH5ZPJwG6CuyCMptUqUqZGlk8hhuSmn16qG-UQ-WrHom_BV5RLMotgRrjQTl5Ngmmsm9gCYUBOiRtd983EHl3XjPT7MJSSHhgNpa-EbKbdq639q6Ttg3uAAma7IhD4EC2pHKgZbpOno/s1600/home.gif' style='padding:0px;'/></a></li>
<li><a href='URLHERE' target='_blank'>Kesehatan</a></li>
<li><a class='trigger'>Berita</a>
<ul>
<li><a href='URLHERE' target='_blank' title='Infontainment'>Infontainment</a></li>
</ul>
</li>
<li><a class='trigger'>Gadget</a>
<ul>
<li><a href='URLHERE' target='_blank'>Blackberry</a></li>
<li class='hr'/>
<li><a href='URLHERE' target='_blank'>Daftar Harga dan Spesifikasi</a></li>
<li class='hr'/>
<li><a href='URLHERE' target='_blank'>Laptop</a></li>
</ul>
</li>
<li><a href='URLHERE' target='_blank' title='Tips-Trik'>Tips-Trik</a></li>
<li><a href='URLHERE' target='_blank' title='Komputer'>Komputer</a></li>
<li><a class='trigger'>Kesehatan</a>
<ul>
<li><a href='URLHERE' target='_blank'>Kesehatan</a></li>
<li class='hr'/>
<li><a href='URLHERE' target='_blank'>Kecantikan</a></li>
<li class='hr'/>
<li><a href='URLHERE' target='_blank'>Diet</a></li>
</ul>
</li>
<li><a class='trigger'>Selebriti</a>
<ul>
<li><a href='URLHERE' target='_blank'>Biodata</a></li>
<li class='hr'/>
<li><a href='URLHERE' target='_blank'>Selebriti</a></li>
</ul>
</li>
<li><a class='trigger'>Apps</a>
<ul>
<li><a href='URLHERE' target='_blank'>Blackberry</a></li>
<li class='hr'/>
<li><a href='URLHERE' target='_blank'>Daftar Harga dan Spesifikasi</a></li>
<li class='hr'/>
<li><a href='URLHERE' target='_blank'>Laptop</a></li>
</ul>
<li><a href='URLHERE' target='_blank'>Link Exc..</a></li>
<li><a href='URLHERE' target='_blank'>Guest Book</a></li>
</li>
</ul>
</div>
</div><!--Menu Navigasi Horisontal Dropdown End-->

::CSS::
/*Menu Navigasi Horisontal Dropdown*/
#menuwrapperpicakautta {width:970px;margin:0 auto;padding:0 auto;}
#menuwrapperakautta {width:970px;margin:0 auto;}
.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}
#menubarakautta {width:970px;background:rgba(2,2,2,.9);height:43px;border-bottom:1px solid #222222;}
#menubarakautta a:hover{background-color:rgba(1,1,1,.8);}
#menubarakautta, #menubarakautta ul {padding: 0;margin: 0;list-style: none;font-family: "Consolas","Courier New",Courier,mono,serif !important;}
#menubarakautta a {display: block;text-decoration: none;padding: 13px 10px 12px 10px;font-size:15px;font-weight:normal;text-transform:none;color:#d1d8e5;border-right:solid 1px #111;border-left:solid 1px #000;}
#menubarakautta a.trigger {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiIeFZqeZmgvZSZ4UgiBrgc7hZjybQNSIBpRRcWZdsOx0BR2mrSwnevNazf4qaSFzp4Q_e4OQWvGdATbOHF366Bb58rWjM2VUB4W5wsYZDA7DW4STa0lMaTWnX9Gzo-0TWMGhic1SGlGQ/s1600/arrow.gif);background-repeat: no-repeat;padding: 13px 24px 12px 10px;background-position: right center;}
#menubarakautta li {float: left;position: relative;}
/* hide from IE mac \*/
#menubarakautta li {position: static; width: auto;}
/* end hiding from IE5 mac */
#menubarakautta li ul, #menubarakautta ul li {width:160px;}
#menubarakautta ul li a  {text-align:left;color:#B7C2D6;padding: 4px 12px;font-size: 12px;font-weight:normal;text-transform:none;font-family:Monaco,Monospace !important;border:none;}
#menubarakautta li ul {z-index:100;position: absolute;display: none;background-color:rgba(2,2,2,.9);padding-bottom:5px;}
#menubarakautta li ul {-moz-border-radius-bottomleft:5px; -moz-border-radius-bottomright:5px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;}
#menubarakautta li ul {box-shadow:0px 1px 0px rgba(0,0,0,1);-moz-box-shadow:0px 1px 0px rgba(0,0,0,1); -webkit-box-shadow:0px 1px 0px rgba(0,0,0,1);}
#menubarakautta li:hover a, #menubarakautta a:active, #menubarakautta a:focus,{background:#0090C9;color:#d1d8e5;text-decoration:none;}
#menubarakautta li:hover ul, #menubarakautta li.hvr ul {display: block;}
#menubarakautta li:hover ul a, #menubarakautta li.hvr ul a {color:#d1d8e5;background-color:transparent;text-decoration:none;}
#menubarakautta li ul li.hr {border-bottom:1px solid #000; border-top:1px solid #111; display:block; font-size: 1px; height: 0px; line-height: 0px; margin:4px 0;}
#menubarakautta ul a:hover {background: -moz-linear-gradient(top, rgba(255,0,0,0) 0%, rgba(255,0,0,0.8) 15%, rgba(255,0,0,1) 19%, rgba(255,0,0,1) 20%, rgba(51,0,0,1) 50%, rgba(255,0,0,1) 80%, rgba(255,0,0,1) 81%, rgba(255,0,0,0.8) 85%, rgba(255,0,0,0) 100%);color: #d1d8e5 !important;text-decoration:none;}
#menubarakautta li.homeaka a, #menubarakautta li.homeaka a:visited {border-left:solid 1px #111;background: -moz-linear-gradient(top, rgba(255,0,0,0) 0%, rgba(255,0,0,0.8) 15%, rgba(255,0,0,1) 19%, rgba(255,0,0,1) 20%, rgba(51,0,0,1) 50%, rgba(255,0,0,1) 81%, rgba(255,0,0,0.8) 85%, rgba(255,0,0,0) 100%);}
#menubarakautta li.homeaka a:hover {background: -moz-linear-gradient(top, rgba(51,0,0,0) 0%, rgba(51,0,0,0.8) 15%, rgba(51,0,0,1) 19%, rgba(51,0,0,1) 20%, rgba(255,0,0,1) 50%, rgba(51,0,0,1) 81%, rgba(51,0,0,0.8) 85%, rgba(51,0,0,0) 100%);}

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

Selamat Mencoba!!
Silahkan anda laporkan jika ada link yang rusak atau beberapa tutorial yang tidak bekerja, karena saya akan segera memperbaikinya, dan berhubung saya baru mengganti themes blog, jadi pasti banyak artikel yang berantakan! Saya harap anda dapat membantu saya untuk memperbaiki semuanya dengan berkomentar di artikel yang bermasalah.. thanks sebelumnya sudah berkunjung keblog utta yang sederhana ini...
Please rate this article:
{[['', '']]}
{["Useless", "Boring", "Need more details", "Perfect"]}

Jika Artikel ini menarik, Silahkan copy paste permalink berikut ini di blog sobat!

thumbnail
About The Author

Hai,.. I am just an ordinary man who just might share the knowledge that I know ahead of you, No one is more perfect. Always keep learning and sharing of knowledge, Just be Yourself and be The Unique that makes them know who you are.!!


2 Comments
Comments

+ komentar + 2 Diskusi pada 'Menu Navigasi Horisontal Dropdown ala UTta''

  1. Anonim2:27 PM

    wah kereennn menunya sobb....

    sob saya mau tanya nih gmana tutorialnya seperti Popular POST di widgednya mAs... ???? ada nggk tutornyaaa..??

    BalasHapus
  2. @Odingk Cz maaf ru sempat bls gan, sblmnya mksh sblmnya da mau mampir disini.hehee,..

    dan untuk populart post sprt punya sy, sy sudah share tuh gan cra membuatnya ala akaUTta :)

    BalasHapus

Tolong memberi komentar yang tidak melanggar norma-norma. Kami berhak menghapus komentar yang kasar, mengejek, bersifat menyerang, dan tidak berhubungan dengan artikel di atas. Oleh sebab itu, kiranya dapat menggunakan bahasa yang jelas!

Pedoman wajib untuk memasukkan komentar:
1. Tidak boleh memakai lebih dari satu kolom komentar.
2. Pertanyaan/masukan harus berhubungan dengan uraian diatas.
3. Sebaiknya satu atau dua pertanyaan dalam satu kolom komentar.
4. Hanya menggunakan bahasa Indonesia yang umum dan dimengerti semua orang.
5. Tidak diperbolehkan menggunakan huruf besar untuk menekankan sesuatu.
6. Tidak diijinkan mencantumkan hyperlink dari situs lain.

Bila Anda punya nama atau blog gunakan komentar sebagai "Name/ URL".

Sebelumnya utta minta maaf yg sebsr2Nya jka komentar anda blm sempat dibls. ^^