» » Membuat menu yang keren pada footer dengan CSS & Jquery

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 Unknown, Published at 08.20 and have 19 komentar

19 komentar:

  1. Unknown16 Maret 2012 pukul 09.33

    keren tampilan menunya sob simpel

    BalasHapus
  2. abang ichal16 Maret 2012 pukul 23.36

    menunya keren sobb
    kecuali di scroll kebawah dulu baru nampak menunya

    BalasHapus
    Balasan
    1. Unknown17 Maret 2012 pukul 01.18

      sebenernya gak sih..
      tu karena footer blog demo nya aja

      Hapus
  3. Vpie ◥TwekzLibz◤ MahaDhifa17 Maret 2012 pukul 05.16

    . . lola nich paz liat demox. huhh . .

    BalasHapus
    Balasan
    1. Unknown18 Maret 2012 pukul 00.23

      kenapa?
      blog demonya berat?

      Hapus
    2. Vpie ◥TwekzLibz◤ MahaDhifa19 Maret 2012 pukul 08.12

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

      Hapus
    3. Unknown20 Maret 2012 pukul 02.30

      utak atik aja css nya

      Hapus
    4. Vpie ◥TwekzLibz◤ MahaDhifa20 Maret 2012 pukul 02.35

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

      Hapus
  4. Admin20 Maret 2012 pukul 02.52

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

    salam blogger dari blognyakadhenk [RAM.system]

    BalasHapus
  5. Dode Van Persie7 April 2012 pukul 16.05

    mantap ! :D

    BalasHapus
  6. dodi4 Juli 2012 pukul 03.26

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

    thx

    BalasHapus
  7. Unknown21 September 2012 pukul 10.02

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

    BalasHapus
  8. Achmad3 Oktober 2012 pukul 06.02

    sipp, thx buat tutorialnya sob.. :)

    BalasHapus
  9. Unknown7 Oktober 2012 pukul 02.09

    mantap cin tutorialnya,,,

    BalasHapus
  10. Adi27 Desember 2012 pukul 05.38

    manteb tampilannya

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

    BalasHapus
  11. Unknown6 Juni 2013 pukul 09.09

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

    BalasHapus