Membuat menu yang keren pada footer dengan CSS & Jquery

oke langsung aja karena saya main diwarnet.. biar gak kebuang waktu..lansung aja lihat demonya di bawah ini yang telah saya sediakan...CEKIDOT




cara pembuatannya:
Loggin blogger.com
Rancangan>Edit Html
Cari kode ]]></b:skin> dan pastekan kode berikut diatasnya

/*----------------------------------------------------
{--------}  Menu {--------}
----------------------------------------------------*/
ul.ldd_menu{
        z-index:999;
 margin:0px;
 padding:0;
 display:block;
 height:50px;
 background-color:#D04528;
 list-style:none;
 font-family:"Trebuchet MS", sans-serif;
 border-top:1px solid #EF593B;
 border-bottom:1px solid #EF593B;
 border-left:10px solid #D04528;
 -moz-box-shadow:0px 3px 4px #591E12;
 -webkit-box-shadow:0px 3px 4px #591E12;
 -box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
 text-decoration:none;
}
ul.ldd_menu > li{
 float:left;
 position:relative;
}
ul.ldd_menu > li > span{
        z-index:999;
 float:left;
 color:#fff;
 background-color:#D04528;
 height:50px;
 line-height:50px;
 cursor:default;
 padding:0px 20px;
 text-shadow:0px 0px 1px #fff;
 border-right:1px solid #DF7B61;
 border-left:1px solid #C44D37;
}
ul.ldd_menu .ldd_submenu{
        z-index:999;
 position:absolute;
 top:50px;
 width:550px;
 display:none;
 opacity:0.95;
 left:0px;
 font-size:10px;
 background: #C34328;
 border-top:1px solid #EF593B;
 -moz-box-shadow:0px 3px 4px #591E12 inset;
 -webkit-box-shadow:0px 3px 4px #591E12 inset;
 -box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
        z-index:999;
 background-color:#f0f0f0;
 color:#444;
 display:block;
 clear:both;
 padding:15px 20px;
 text-transform:uppercase;
 font-family: Arial, serif;
 font-size:12px;
 text-shadow:0px 0px 1px #fff;
 -moz-box-shadow:0px 0px 2px #777 inset;
 -webkit-box-shadow:0px 0px 2px #777 inset;
 -box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
 list-style:none;
 float:left;
 border-left:1px solid #DF7B61;
 margin:20px 0px 10px 30px;
 padding:10px;
}
li.ldd_heading{
 font-family: Georgia, serif;
 font-size: 13px;
 font-style: italic;
 color:#FFB39F;
 text-shadow:0px 0px 1px #B03E23;
 padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
 font-family: Arial, serif;
 font-size:10px;
 line-height:20px;
 color:#fff;
 padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
 -moz-box-shadow:0px 0px 2px #333;
 -webkit-box-shadow:0px 0px 2px #333;
 box-shadow:0px 0px 2px #333;
 background:#AF412B;
}

lalu cari kode </head> dan pastekan kode berikut diatasnya


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
        <script type='text/javascript'>
            $(function() {
    /**
     * the menu
     */
    var $menu = $(&#39;#ldd_menu&#39;);
 
    /**
     * for each list element,
     * we show the submenu when hovering and
     * expand the span element (title) to 510px
     */
    $menu.children(&#39;li&#39;).each(function(){
     var $this = $(this);
     var $span = $this.children(&#39;span&#39;);
     $span.data(&#39;width&#39;,$span.width());
   
     $this.bind(&#39;mouseenter&#39;,function(){
      $menu.find(&#39;.ldd_submenu&#39;).stop(true,true).hide();
      $span.stop().animate({&#39;width&#39;:&#39;510px&#39;},300,function(){
       $this.find(&#39;.ldd_submenu&#39;).slideDown(300);
      });
     }).bind(&#39;mouseleave&#39;,function(){
      $this.find(&#39;.ldd_submenu&#39;).stop(true,true).hide();
      $span.stop().animate({&#39;width&#39;:$span.data(&#39;width&#39;)+&#39;px&#39;},300);
     });
    });
            });
        </script> 

note: jika template anda sudah ada kode yang berwarna merah anda tidak perlu memasukkan nya lagi

lanjut cari kode  <div id='footer-wrapper'> dan pastekan kode berikut diatasnya..


<ul class='ldd_menu' id='ldd_menu'>
    <li>
     <span>MENU 1</span><!-- Increases to 510px in width-->
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Location</li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>
     </div>
    </li>
    <li>
     <span>MENU 2</span>
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Location</li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>
     </div>
    </li>
    <li>
     <span>MENU 3</span>
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Location</li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>
   </div>
    </li>
    <li>
     <span>MENU 4</span>
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Download</li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>Jasri DM</li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
       <li><a href='#'>Jasri DM</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'>Jasri DM</a>
     </div>
    </li>
   </ul>

ubahlah menu dan submenu nya oke..
saya rasa itu bisa anda letakkan dimana saja tidak mesti di footer(bawah)



Bagikan Artikel Ini ke: Facebook Twitter Google+ Linkedin Technorati Digg
Posted by Yuk Tawa, Published at 08.20 and have 19 komentar

19 komentar:

  1. keren tampilan menunya sob simpel

    BalasHapus
  2. menunya keren sobb
    kecuali di scroll kebawah dulu baru nampak menunya

    BalasHapus
    Balasan
    1. sebenernya gak sih..
      tu karena footer blog demo nya aja

      Hapus
  3. . . lola nich paz liat demox. huhh . .

    BalasHapus
    Balasan
    1. kenapa?
      blog demonya berat?

      Hapus
    2. . . ouwwwwww,, tu yg tulisan menu nya di klik ada tulisan gitu ya?!? keren nich,, tapi kira^ ada yg warna biru gak?!? . .

      Hapus
    3. . . haduch,, aq ne rada bingnk. kasih tau donk . .

      Hapus
  4. luar biasa blognya. keren keren..
    sharingnya juga bagus.

    salam blogger dari blognyakadhenk [RAM.system]

    BalasHapus
  5. mas kok yang punya saya cuma tampil tulisannya doank terus div id = footer - wrappernnya tidak ada mas

    thx

    BalasHapus
  6. kren tampilannya sb,, mau coba cuma dikit dimodifikasi ya.. :D hehe izin dulu.

    BalasHapus
  7. sipp, thx buat tutorialnya sob.. :)

    BalasHapus
  8. mantap cin tutorialnya,,,

    BalasHapus
  9. manteb tampilannya

    http://klik-lowonganpekerjaan.blogspot.com/

    BalasHapus
  10. mantraap ni,tapi bisa ngga kalo di pasang menggantikan menu navigasi di bawah judul blog?, mohon dibantu ,

    BalasHapus