1

Mega Menu jQuery CSS

April 06, 2012

Bismillah
Pada kesepatan kali ini saya akan membuat tutorial tentang Cara Membuat Mega Menu jQuery CSS, dalam menu kali ini bukan seperti menu biasa melainkan lebih dari biasa, karena dalam mega menu navigasi ini dilengkapi dengan horizontal menu serta drop down menu, dan fek jQuery yang sangat bagus
CARA MEMBUAT MEGA MENU jQuery + CSS
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cheklist "Expand Template Widget"
Langkah 4
Letakkan kode CSS dibawah ini diatas kode  ]]></b:skin>

/*----------------------------------------------------
{--------}  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;
}
Langkah 5
Letakkan kode berikut ini sebelum kode </head>
<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> 
Catatan: jika sobat sudah memasang script jQuery abaikan saja kode yang di blok
Langkah 6
Setelah itu cari kode  <div id='footer-wrapper'> dan pastekan kode dibawah ini diatasnya,  jika dalam blog sobat tidak ada kode tersebut bisa juga menggunakan Add Gadget dan pastekan kode dibawah ini

<ul class='ldd_menu' id='ldd_menu'>
    <li>
     <span>Vacations</span><!-- Increases to 510px in width-->
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Location</li>
       <li><a href='#'>South America</a></li>
       <li><a href='#'>Antartica</a></li>
       <li><a href='#'>Africa</a></li>
       <li><a href='#'>Asia and Australia</a></li>
       <li><a href='#'>Europe</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Sun &amp; Beach</a></li>
       <li><a href='#'>Adventure</a></li>
       <li><a href='#'>Science &amp; Education</a></li>
       <li><a href='#'>Extreme Sports</a></li>
       <li><a href='#'>Relaxing</a></li>
       <li><a href='#'>Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Paradise Islands</a></li>
       <li><a href='#'>Cruises &amp; Boat Trips</a></li>
       <li><a href='#'>Wild Animals &amp; Safaris</a></li>
       <li><a href='#'>Nature Pure</a></li>
       <li><a href='#'>Helping others &amp; For Hope</a></li>
       <li><a href='#'>Diving</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>
     </div>
    </li>
    <li>
     <span>Equipment</span>
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Location</li>
       <li><a href='#'>South America</a></li>
       <li><a href='#'>Antartica</a></li>
       <li><a href='#'>Africa</a></li>
       <li><a href='#'>Asia and Australia</a></li>
       <li><a href='#'>Europe</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Sun &amp; Beach</a></li>
       <li><a href='#'>Adventure</a></li>
       <li><a href='#'>Science &amp; Education</a></li>
       <li><a href='#'>Extreme Sports</a></li>
       <li><a href='#'>Relaxing</a></li>
       <li><a href='#'>Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Paradise Islands</a></li>
       <li><a href='#'>Cruises &amp; Boat Trips</a></li>
       <li><a href='#'>Wild Animals &amp; Safaris</a></li>
       <li><a href='#'>Nature Pure</a></li>
       <li><a href='#'>Helping others &amp; For Hope</a></li>
       <li><a href='#'>Diving</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>
     </div>
    </li>
    <li>
     <span>Locations</span>
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Location</li>
       <li><a href='#'>South America</a></li>
       <li><a href='#'>Antartica</a></li>
       <li><a href='#'>Africa</a></li>
       <li><a href='#'>Asia and Australia</a></li>
       <li><a href='#'>Europe</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Sun &amp; Beach</a></li>
       <li><a href='#'>Adventure</a></li>
       <li><a href='#'>Science &amp; Education</a></li>
       <li><a href='#'>Extreme Sports</a></li>
       <li><a href='#'>Relaxing</a></li>
       <li><a href='#'>Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Paradise Islands</a></li>
       <li><a href='#'>Cruises &amp; Boat Trips</a></li>
       <li><a href='#'>Wild Animals &amp; Safaris</a></li>
       <li><a href='#'>Nature Pure</a></li>
       <li><a href='#'>Helping others &amp; For Hope</a></li>
       <li><a href='#'>Diving</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>

   </div>
    </li>
    <li>
     <span>Tourists</span>
     <div class='ldd_submenu'>
      <ul>
       <li class='ldd_heading'>By Download</li>
       <li><a href='#'>South America</a></li>
       <li><a href='#'>Antartica</a></li>
       <li><a href='#'>Africa</a></li>
       <li><a href='#'>Asia and Australia</a></li>
       <li><a href='#'>Europe</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Category</li>
       <li><a href='#'>Sun &amp; Beach</a></li>
       <li><a href='#'>Adventure</a></li>
       <li><a href='#'>Science &amp; Education</a></li>
       <li><a href='#'>Extreme Sports</a></li>
       <li><a href='#'>Relaxing</a></li>
       <li><a href='#'>Spa and Wellness</a></li>
      </ul>
      <ul>
       <li class='ldd_heading'>By Theme</li>
       <li><a href='#'>Paradise Islands</a></li>
       <li><a href='#'>Cruises &amp; Boat Trips</a></li>
       <li><a href='#'>Wild Animals &amp; Safaris</a></li>
       <li><a href='#'>Nature Pure</a></li>
       <li><a href='#'>Helping others &amp; For Hope</a></li>
       <li><a href='#'>Diving</a></li>
      </ul>
      <a class='ldd_subfoot' href='#'> + New Deals</a>
     </div>
    </li>
   </ul>
Sobat edit dulu kodenya, ganti # dengan link sobat, juga judulnya ganti dengan kepentingan sobat
Langkah Terakhir
Simpan Template
    Semoga bermanfaat, Selamat mencoba... Heppy Blogging :)

    Labels: , ,

    1 Komentar:

    Blogger SDN KARANG REJO said on May 22, 2012 at 2:05 AM 

    Trims Gan, maaf ya ikutn ngopy. Slmt moga sukses dan tambh bnyak tipsnya. Ku tunggu...

    Post a Comment

    © 2012 - Koderator | Desain Oleh kimzigr| Classic Themplate Html5 & Css3 | Mesin Blogger