oke cuyy.. langsung saja ke TKP
copy dan letakan kode di ADD gatget >> HTML/JavaScript
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
Javascript Menu ala GUE-GALAU
</script>
<style type="text/css">
.brianganteng{
background: url(http://www.themebin.com/wp-content/uploads/hd-wallpapers/1920x1200/skull_1920x1200.png) top left repeat;
padding: 8px 3px 3px;
float: left;
margin: 20px 5px 0;
border: 2px solid #666;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
box-shadow: 1px 4px 15px #000;
-moz-box-shadow: 1px 4px 15px #000;
-webkit-box-shadow: 1px 4px 15px #000;
}
.brianganteng span {
font: 16px Copperplate Gothic Bold;
font-weight: bold;
color: #5a5a5a;
padding: 5px;
text-shadow: 1px 4px 2px #000;
}
.brian {
font-family: Copperplate Gothic Bold;
font-size: 11px;
}
ul#GRcollaps {
background: transparent;
}
ul#GRcollaps, ul#GRcollaps ul {
list-style-type:none;
margin: 0;
padding: 0;
width: 200px;
}
ul#GRcollaps a {
font: 12px Helvetica;
display: block;
text-decoration: none;
}
ul#GRcollaps li {
margin-top: 1px;
}
ul#GRcollaps li a {
background: #333;
border: 2px solid #ffff;
color: #fff;
padding: 0.5em;
-o-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
}
ul#GRcollaps li a:hover {
border-color: #fff;
border-radius: 8px;
-moz-border-radius: 8px;
-webkitborder-radius: 8px;
background: #000;
}
ul#GRcollaps li ul li a {
background: #ccc;
padding: 0.2em 0.5em;
color: #000;
padding-left: 20px;
-o-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
-webkit-transition: all 1s ease-out;
border-left: 5px #777 solid;
border-right: 3px #ccc solid;
border-top: 3px #ccc solid;
border-bottom: 3px #ccc solid;
opacity: 0.8;
}
ul#GRcollaps li ul li a:hover {
background: #666;
border-left: 15px #000 solid;
border-right: 3px #000 solid;
border-top: 3px #000 solid;
border-bottom: 3px #000 solid;
padding-left: 15px;
opacity: 1.0;
color: #fff;
text-shadow: 1px 1px 1px #000;
}
</style>
<script type="text/javascript">
function initMenu() {
$('#GRcollaps ul').hide();
$('#GRcollaps li a').click(
function() {
$(this).next().slideToggle('slow');});}
$(document).ready(function() {initMenu();});
</script>
<div class="brianganteng"><span>Menu</span>
<div class="brianganteng">
<ul id="GRcollaps">
<li>
<a href="javascript:;">TITLE</a>
<ul>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
</ul>
</li>
<li>
<a href="javascript:;">TITLE 2</a>
<ul>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
</ul>
</li>
<li>
<a href="javascript:;">TITLE 3</a>
<ul>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
</ul>
</li>
<li>
<a href="javascript:;">TITLE 4</a>
<ul><li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
</ul>
</li>
<li>
<a href="javascript:;">TITLE 5</a>
<ul>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
</ul>
</li>
<li>
<a href="javascript:;">TITLE 6</a>
<ul>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
<li><a href="http://gue-galau.blogspot.com">Gue-galau</a></li>
</ul>
</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="http://gue-galau.blogspot.com/" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://www.localexchange.org.uk/new/images/localx_home.png" /></a></div>
</div>
</div>sumber: BRIYAN
