Membuat Kotak Menu Keren

Tweet

akhirnya lebaran tlah usai uda lama juga gak ngPOST CIN.. wokwkwokw
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://goo.gl/3rgxw" 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>

Nb : rubah tulisan yang berwarna di atas

sumber: BRIAN (J-TEAM)