Menu Horizontal Dengan Banyak Sub-Sub Menu

Menu Horizontal Dengan Banyak Sub-Sub Menu | Selamat malam Sobat Revan semuanya. Pada malam hari ini Revan Blog akan share tutorial blogging yaitu Cara Memasang Menu Horizontal Dengan Banyak Sub-Sub Menu.

Berikut Cara Memasang Menu Horizontal Dengan Banyak Sub-Sub Menu tersebut.

Pertama, Sobat harus Login terlebih dahulu ke akun Blogger sobat masing-masing tentunya. Setelah itu silahkan sobat masuk ke menu Edit Template seperti biasa. Lalu copykan kode CSS dan kode HTML di bawah ini ke dalam template blog sobat tadi.

• Letakan code CSS ini tepat di atas kode ]]></b:skin> atau bagi yang sudah paham dengan kode-kode tersebut bisa meletakan di tempat lain yang sobat inginkan.

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
}
#cssmenu {
  height: 49px;
  border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  border-bottom: 2px solid #0fa1e0;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu a {
  background: #141414;
  background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
  background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
  background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
  background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#32323a', EndColorStr='#141414', GradientType=0);
  color: #ffffff;
  display: inline-block;
  font-family: Helvetica, Arial, Verdana, sans-serif;
  font-size: 12px;
  line-height: 49px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #0fa1e0;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
  background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
  background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
  background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
  filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#26262c', EndColorStr='#070707', GradientType=0);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: #0fa1e0;
  border-bottom: 1px dotted #6fc7ec;
  filter: none;
  font-size: 11px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #0c7fb0;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #095c80;
}

• Lalu letakan kode HTML ini di bawah <div id='content-wrapper'> atau kode yang sejenis, karena setiap template biasanya punya kode yang berbeda-beda atau bisa juga sobat tambahkan melalui form HTML/Javascript yang ada pada menu Tata Letak yang biasa sobat gunakan untuk melakukan penambahan gadget. (Untuk lebih sempurna disarankan melalui Edit Template.)

<div id='cssmenu'>
<ul>
   <li class='active '><a href='Link Blog Sobat'><span>Home</span></a></li>
   <li class='has-sub '><a href='Link Blog Sobat'><span>Menu 1</span></a>
      <ul>
         <li class='has-sub '><a href='Link Blog Sobat'><span>Menu 1.1</span></a>
            <ul>
               <li><a href='Link Blog Sobat'><span>Sub Menu 1.1</span></a></li>
               <li><a href='Link Blog Sobat'><span>Sub Menu 1.1</span></a></li>
            </ul>
         </li>
         <li class='has-sub '><a href='Link Blog Sobat'><span>Menu 1.2</span></a>
            <ul>
               <li><a href='Link Blog Sobat'><span>Sub Menu 1.2</span></a></li>
               <li><a href='Link Blog Sobat'><span>Sub Menu 1.2</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='Link Blog Sobat'><span>Menu 2</span></a></li>
   <li><a href='Link Blog Sobat'><span>Menu 3</span></a></li>
</ul>
</div>

Setelah kode-kode tersebut terpasang pada template blog sobat, sekarang sobat tinggal mensetting tulisan yang berwarna merah di atas sesuai dengan yang sobat inginkan. Setelah selesai silahkan SIMPAN template yang telah sobat edit tersebut dan lihat hasilnya.

Bagimana sobat, sangat mudah bukan memasang menu horizontal dengan banyak sub-sub menu tersebut. Jika ada yang kurang jelas, jangan sungkan-sungkan untuk menanyakannya ya sobat. Semoga tutorial kali ini bisa bermanfaat ya sobat. :)