Kamis, Oktober 10, 2013 Dani Kusuma 0 Comments

Menu Custom Drop Down

*****Tidak Ada Penjelasan***** lihat saja sendiri

Tampilannya disini

Cara pasangnya gampang koq, tinggal masuk menu Rancangan-Elemen Laman-pilih Tambah Gadget yang berada di sidebar kiri atau kanan -HTML/JavaScript- paste kode dibawah ini :

<script
 type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><br
 />
<script type="text/javascript" 
src="http://yourjavascript.com/267022211411/ddaccordion.js">
</script><br />
<script type="text/javascript">
ddaccordion.init({
 headerclass: "submenuheader", 
 contentclass: "submenu", 
 revealtype: "click", 
 mouseoverdelay: 500,  
 collapseprev: true,  
 defaultexpanded: [],  
 onemustopen: false,  
 animatedefault: false,  
 persiststate: true,  
 toggleclass: ["class2",""], 
 togglehtml: ["suffix", "<img 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHW-LEJZThQJFGwg64w2okCyGd6qnFVTwR7S9gAf35hu63703hWvb7FJCvYX3GqZMuBKew7VpvdQFaOsaccPoveGvxVqfwKejKUpAX8wg6ezrb5dX6XKAs5awOqmuVQeOIt8hkWgCZdLxq/s1600/plus.gif'
 class='statusicon' />", "<img 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyXVBsHPWDmQY87n6qYML0B6IwPqaqV9LY6zvPStxeNhnEY5kR5b12QBdU-3NcHxe28oWgKuVeAuBNpLXw-ut2HdKJW3DVbMcVnhkPvsbv_LEpyi6juQrRr023tl3RNFg4QJRU8h_DGupV/s1600/minus.gif'
 class='statusicon' />"], //Additional HTML added to the header when 
it's collapsed and expanded, respectively  ["position", "html1", 
"html2"] (see docs)
 animatespeed: "fast",  
 oninit:function(headers, expandedindices){  
 },
 onopenclose:function(header, index, state, isuseractivated){  
 }
})
</script><br />
<style type="text/css">
.glossymenu{
margin: 5px 0;
padding: 0;
width: 170px; /*lebar menu*/
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}
.glossymenu a.menuitem{
background: black 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKIE8b5EnVfPgunho3u0JrKijA7PJA84o_jP5AuAGtrC3ROahq6b4Kpg0951ziss41bCAEBTjUQEkIAPG_z0frS_2NibTU5IiopvUgjqQxj2H_XAVGx3FbUx_eYl-jhblwrv0dG_WUNScO/s1600/glossyback.gif)
 repeat-x bottom left;
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, 
sans-serif;
color: white;
display: block;
position: relative;  
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;
}
.glossymenu a.menuitem .statusicon{  
position: absolute;
top: 5px;
right: 5px;
border: none;
}
.glossymenu a.menuitem:hover{
background-image: 
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj584hY6SSHXO6fRyaTXQ9jBtuYiaB_3Od_v2tgpSOg78bGz96vMOEOHkZTfoBMriWYn5euVzw7ULBi2VPLEN17lGIfA9qD5H1RTvnjNgiAqhgMyY0i5N7ezpPYJuGm91sO9gb5WYRiSijt/s1600/glossyback2.gif);
}
.glossymenu
 div.submenu{  
background: red; /*warna background submenu*/
}
.glossymenu div.submenu ul{  
list-style-type: none;
margin: 0;
padding: 0;
}
.glossymenu div.submenu ul li{
border-bottom: 1px solid blue;
}
.glossymenu div.submenu ul li a{
display: block;
font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, 
sans-serif;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
}
.glossymenu div.submenu ul li a:hover{
background: #DFDCCB;
colorz: white;
}
</style><br />
</head><br />
<body><br />
<div class="glossymenu">
<a class="menuitem submenuheader" 
href="http://www.masbugie.com/" >Menu 1</a><br />
<div class="submenu">
 <ul>
<li><a 
href="http://blablabla.com">Submenu 1</a></li>
<li><a href="http://blablabla.com">Submenu 
2</a></li>
<li><a href="http://blablabla.com">Submenu 
3</a></li>
<li><a href="http://blablabla.com">Submenu 
4</a></li>
<li><a href="http://blablabla.com">Submenu 
5</a></li>
<li><a href="http://blablabla.com">Submenu 
6</a></li>
<li><a href="http://blablabla.com">Submenu 
7</a></li>
<li><a href="http://blablabla.com">Submenu 
8</a></li>
</ul>
</div>
<a class="menuitem" 
href="http://blablabla.com">Menu 2</a><br />
<a class="menuitem" href="http://blablabla.com">Menu 
3</a><br />
<a class="menuitem" href="http://blablabla.com">Menu 
4</a><br />
<a class="menuitem" href="http://blablabla.com">Menu 
5</a><br />
<a class="menuitem" href="http://blablabla.com">Menu 
6</a><br />
<a class="menuitem" href="http://blablabla.com">Menu 
7</a><br />
</div>

Semoga berhasil, salam.. Description: Menu Custom Drop Down Rating: 3.5 Reviewer: Mas Bugie ItemReviewed: Menu Custom Drop Down

Dani Razgriz Blog

Kamis, Oktober 10, 2013 Dani Kusuma 0 Comments

Menu Custom Drop Down

Zarja Kij

0 komentar:

About Author

Follow Me

Popular Posts

Labels

Latest Post

About Me

Blog Archive

Followers

Follow Me On Instagram

Kamis, Oktober 10, 2013 Dani Kusuma 0 Comments

Menu Custom Drop Down

Zarja Kij

You Might Also Like

0 komentar:

About Author

Follow Me

Popular Posts

Labels

Latest Post

About Me

Blog Archive

Followers

Follow Me On Instagram