jadilah yang pertama berimajinasi


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








2 komentar:

  1. Photo and Thumbs completely resizable
    Utilizing CSS Animation together with FallBack for you to jQuery
    Unrestricted Caption Tiers
    Sayings like Online video, Photo and html labels can be simply Made
    Unrestricted Photo slides
    i phone & Android Swipping Touch empowered
    jQuery Clash free wordpress tool
    Personalized 100% via Tool After product sales
    Slider Innovation Responsive WordPress Wordpress plugin
    nulled
    Can be installed right away inside your Internet site
    Specific Eliminating
    Vimeo as well as Youtube Reinforced

    Feel free to visit my website slider revolution plugin

    BalasHapus

Followers

ALL POST

Loading...
Lsc