Cara Membuat Mega Menu jQuery CSS

Kali ini saya akan berbagi tutorial kepada para blogger mengenai cara membuat Mega Menu jQuery CSS. Liat tulisannya aja udah "MEGA" pastinya bukan seperti menu biasa lagi dong melainkan luar binasa! eh salah, luar biasa maksudnya hehe :D. Dalam mega menu navigasi ini telah dilengkapi dengan horizontal menu serta drop down menu, dan dilengkapi dengan efek jQuery yang sangat bagus. Kurang lebih tampilannya seperti ini.

Langsung saja ini dia tutorial cara membuatnya:

1. Log-in ke blog sobat
2. Klik Tata Letak (Rancangan) untuk blog antarmuka lawas, Klik Template untuk blog antarmuka yang baru.
3. Klik Edit HTML --> beri tanda centang pada expand template widget.
4. Cari code ]]></b:skin> lalu letakkan kode di bawah ini di atasnya.

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

5. Kemudian selanjutnya cari code </head> lalu letakkan kode di bawah ini di atasnya.

<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, maka abaikan saja kode yang di blok hitam!

6. Lalu cari kode <div id='footer-wrapper'> kemudian letakkan kode di bawah ini di atasnya.

<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>

Catatan:

• Jika di dalam HTML blog sobat tidak terdapat kode <div id='footer-wrapper'> , maka sobat bisa menaruhnya dengan cara Add Gadget HTML/JavaScript.
• Setelah meletakkan kode di atas, silahkan sobat edit dulu. Ganti tanda # dengan link yang akan dituju pada saat mengklik menu tersebut.

SELESAI dan selamat menikmati..! Eh salah lagi, selamat mencoba maksud saya hehe :D

Share on Google Plus

About Blogger Pemula

Seorang yang hobi menjelajahi dunia internet menggali segala informasi penting, menulis artikel, blogging, menyukai desain grafis dan juga desain web. Semua pengalaman didapat dari belajar Otodidak. Memiliki mimpi untuk menjadi seorang web developer.