20 Jun 2012

MegaMenu JQuery Css



Cara pemasangan:

Letakkan kod dibawah sebelum kod ]]></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; }
Seterusnya,letakkan kod dibawah sebelum kod </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>
Kalau dah ada Jquery dalam template buang baris merah

Langkah seterusnya adalah cari kod yang lebih kurang berupa seperti ini: <div id='footer-wrapper'> (sebab mungkin berbeza bagi template anda)Selepas kod tersebut,pastekan kod dibawah
<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>
Save template dan lihat hasilnya.Ubah link seperti By location dan lain lain kepada link dan nama yang korang suka

0 ulasan:

Catat Ulasan

Follow by Email