Menu vertikal Dropdown ini sangat Praktis karena Menu ini akan bergeser turun dengan sendirinya ketika Cursor Mouse diarahkan ke Menu.
Cara Pemasangannya juga gampang karena hanya menambahkan gadget pada Tata Letak jadi apabila terjadi kesalahan, kita dapat dengan mudah untuk menghapus atau memperbaikinya
Cara Pemasangannya :
- Pada Menu Tata Letak
- Klik Tanbahkan Gadget
- Pilih HTML/Javascript
- Copy Paste kode script dibawah ini kedalamnya :
<!---Start code show hide by;"Dido-Borneo.blogspot.com"---><style type="text/css">
* {
margin: 0px;
padding: 0px;
}
nav {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.5;
margin: 50px auto; /*for display only*/
width: 300px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.menu-item {
background: #fff;
width: 300px;
}
/*Menu Header Styles 1*/
.menu-item h4 {
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #9DB6D7;
}
.menu-item h4 a {
color: white;
display: block;
text-decoration: none;
width: 300px;
}
/*Menu Header Styles 2*/
.menu-item h4 {
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {
background: #cc002c; /* Old browsers */
background: -moz-linear-gradient(top, #cc002c 0%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #cc002c 0%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.alpha p {
font-size: 13px;
padding: 8px 12px;
color: #aaa;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
list-style-type: none;
overflow: hidden;
padding: 0px;
}
.menu-item ul a {
margin-left: 20px;
text-decoration: none;
color: #0A0A0A;
display: block;
width: 250px;
}
/*li Styles*/
.menu-item li {
border-bottom: 1px solid #eee;
}
.menu-item li:hover {
background: #eee;
}
/*ul Styles*/
.menu-item ul {
background: #B2D8E0;
font-size: 13px;
line-height: 30px;
height: 0px; /*Collapses the menu*/
list-style-type: none;
overflow: hidden;
padding: 0px;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item:hover ul {
height: auto;
}
</style>
<nav>
<div class="menu-item">
<h4><a href="#" target="_blank"">Menu I</a></h4>
<ul>
<li><a href="URL Tujuan" target="_blank">Menu I.a</a></li>
<li><a href="URL Tujuan" target="_blank">Menu I.b</a></li>
<li><a href="URL Tujuan" target="_blank">Menu I.c</a></li>
<li><a href="URL Tujuan" target="_blank">Menu I.d</a></li>
<li><a href="URL Tujuan" target="_blank">Menu I.e</a></li>
</ul>
</div>
<div class="menu-item">
<h4><a href="#">Menu II</a></h4>
<ul>
<li><a href="URL Tujuan" target="_blank">Menu II.a</a></li>
<li><a href="URL Tujuan" target="_blank">Menu II.b</a></li>
<li><a href="URL Tujuan" target="_blank">Menu II.c</a></li>
<li><a href="URL Tujuan" target="_blank">Menu II.d</a></li>
<li><a href="URL Tujuan" target="_blank">Menu II.e</a></li>
</ul>
</div>
<div class="menu-item">
<h4><a href="#" target="_blank"">Menu III</a></h4>
<ul>
<li><a href="URL Tujuan" target="_blank">Menu III.a</a></li>
<li><a href="URL Tujuan" target="_blank">Menu III.b</a></li>
<li><a href="URL Tujuan" target="_blank">Menu III.c</a></li>
<li><a href="URL Tujuan" target="_blank">Menu III.d</a></li>
<li><a href="URL Tujuan" target="_blank">Menu III.e</a></li>
</ul>
</div>
</nav>
<!---End code show hide by;"Dido-Borneo.blogspot.com"--->
NB :
- Perhatikan Tulisan yang berwarna dan Tebal Pada Script, Ganti dengan kreasi sobat
- width: 300px = Ukuran Lebar Menu
0 Comments