Entri Populer

Kamis, 23 Agustus 2012

Membuat Kotak Menu Keren

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://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
Share