Navigation Dropdown menu

بِسْــــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم 

Zoom for Preview

Tutorial ini tentang navigation yang saat dihover akan keluar submenu-submenu-nya. Keuntungannya sih bisa menghemat tempat karena submenu yang banyak bisa dikumpulin menjadi satu menu.

Misalnya, menu 'CONTACT'  kita bisa menambahkan submenu twitter, tumblr, facebook, flavors, dan lain-lain. Tapi, yang kelihatan pertama cuma menu 'Contact'. Setelah dihover, baru keluar sub menu-nya.

Saya sudah coba di Template Designer dan di Classic template.

[ Live Preview ]

Okay, ini stepsnya.

• Copy code di bawah ini :

/* Menu Horizontal Dropdown ----------------------------------------------- */
 #menuwrapper{
width:960px;
height:20px;
margin:0 auto}
.clearit{
clear:both;
height:0;
line-height:0.0;
font-size:0}
 #menubar{
width:100%}
 #menubar,#menubar ul{
list-style:none;
font-family:Arial, serif;
margin:0;
padding:0}
 #menubar a{  display:block;
text-decoration:none;
font:12px calibri;  color:#ccc; background:#eee;
margin-left:20px;
border-right:1px solid #fff;
padding-left:18px;
padding-right:18px;
text-align:center;}
#menubar a.trigger{
text-align:center;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvUIb_SvolWb52lZXQCj-dyRirJTlqPRJI28p0J9z64GNKxWkc3linqNhrkyvXl_m1vezlWah_6NrLj12s9flxgEl69yRA_OxQqaf4aWD-T-Hi-L3zuZgMRU-7w7IXiTtLtBnxTVbnILk/s1600/arrow_white.gif);
background-repeat:no-repeat;
background-position:left;
padding-left:18px;
padding-right:18px;}
#menubar li{
float:left;
position:static;
width:auto}
#menubar li ul,#menubar ul li{
width:170px}
#menubar ul li a{
text-align:left;
color:#666;
font-size:11px;
font-weight:400;
font-family:Arial;
border:none;
padding:5px 10px}
#menubar li ul{
z-index:100;
position:absolute;
display:none;
background:#eee;
padding-bottom:5px;
border:1px dashed #fff;}
 #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{
background:#A69990;
color:#666}
 #menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{
color:#3c3c3c;
background-color:transparent;
text-decoration:none}
#menubar li ul li.hr{
border-bottom:1px solid #fff;
border-top:1px solid #fff;
display:block;
font-size:1px;
height:0;
line-height:0;
margin:4px 0}
#menubar ul a:hover{
background-color:#ccc!important;
color:#666!important;
text-decoration:none}

• Paste code itu di :
• Template Designer : paste di atas code ]]></b:skin> 
• Classic Template : paste di atas code </style>

Sekarang steps untuk meletakkan menu navigasi-nya.

• Copy code di bawah ini :

<div id='menuwrapper'>
<ul id='menubar'>
<li><a class='trigger'>Admin</a>
<ul>
<li><a href='http://ramadhana-liya.blogspot.com' target='new'>Profile</a></li>
  <li><a href='http://flavors.me/ramadhanliya' target='new'>Flavors</a></li>
</ul>
</li>
<li><a href='http://kaimjaebum.blogspot.com' target='new'>Bias</a></li>
<li><a class='trigger'>Exchange</a>
<ul>
<li><a href='http://ramadhanliyabuddies.blogspot.com' target='new'>Link (open)</a></li>
  <li><a href='http://ramadhanliyasbanner.blogspot.com' target='new'>Banner (closed)</a></li>
  </ul>
</li>
<li><a class='trigger'>Tutobies</a>
<ul>
<li><a href='http://rayastuff.blogspot.com/2013/07/tutorial.html'>Tutorial</a></li>
<li><a href='http://rayastuff.blogspot.com/2013/07/freebies.html'>Freebies</a></li>

</ul>
</li>
<li><a class='trigger'>Random</a>
<ul>
  <li><a href='http://ramadhan-liya.blogspot.com/search/label/curcol'>Curcol</a></li>
</ul>
</li>
<li><a class='trigger'>Karya</a>
<ul>
  <li><a href='http://joinmeyah.blogspot.com'>List Novel</a></li>
  <li><a href='http://karyaliya.blogspot.com'>Read Novel</a></li>
  </ul>
  </li>
<li><a class='trigger'>Contact</a>
<ul>
<li><a href='http://twitter.com/ramadhan_liya' target='new'>Twitter</a></li>
  <li><a href='http://ramadhanliya.tumblr.com/' target='new'>Tumblr</a></li>
  </ul>
  </li>
  <li><a href='http://blogskins.com/me/ramadhan_liya' target='new'>Blogskin</a></li>
<li><a href='http://www.blogger.com/follow-blog.g?blogID=5277088314139247048' target='new'>Follow</a></li>
  </ul>
  </div></div>

• Paste code ini di :
• Untuk meletakkan di atas body, di bawah header (like min) : paste di atas code <div id='content-wrapper'>
• Atau di bawah code  </header>
• Untuk Classic Template, paste di bawah code header.
• Preview
• Save

Note

Hijau : ganti dengan url dan menu beserta submenu kehendakmu

Biru   : sesuaikan lebar dan tingginya. Usahakan sesuai juga dengan header dan body blogmu.  

Ask me if u not understand~

cr : duniashida

Read More