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:

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…

Please rate this article: