Home » » Cara Membuat Menu Mega JQuery Dan CSS

Cara Membuat Menu Mega JQuery Dan CSS

Apakabar semuanya sahabat blogger. Saya disini tidak akan panjang lebar memaparkan masalah Cara Membuat Menu Mega JQuery Dan CSS. saya akan berikan secara langsung tutorial Membuat Menu Mega JQuery Dan CSS. Silahkan perhatikan tips dibawah ini : 


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 Penting: jika anda sudah memasang kode java script jQuery abaikan saja kode yang di cetak tebal diatas. 

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>
Catatan Akhir : Jangan lupa untuk merubah kode # dengan link menu anda,

Sekian trik kali ini.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Lora Malunk Blog
tutorial blog up to date
Loading...

+ komentar + 1 komentar

13 Juni 2012 18.09

manteb menu yang kaya gini sering banget saya lihat i website terkenal..thanks atas sharing banyak menu yang saya dapet dari sini

Terimakasih Ray Ferdian atas Komentarnya di Cara Membuat Menu Mega JQuery Dan CSS

Posting Komentar

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Lora Malunk Blog

 

Configurasi

Alexa :
Stats :
Page Rank : Free PageRank Checker
DMCA :
Amung :
Bloggers : Bloggers - Meet Millions of Bloggers
Extreme :
eXTReMe Tracker
Support : Lora Malunk Blog | Songong Template | Tutorial Blog
Copyright © 2011. Lora Malunk Blog - All Rights Reserved
Template Modify by Lora Malunk Blog
Proudly powered by Blogger