25 June 2012

jQquery based Mega Menu Bar for Blogger

Advertisements

Here is easy to install jQquery based Mega Menu Bar for your Blogger blog.  The Mega Menu is very helpful when you want to show lots of links and categories to your visitors.


Following is the three step installation guide to add Mega Menu to your blog.

STEP 1
Go to Design >> Edit HTML and look for ]]></b:skin>
Add following code ABOVE ]]></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;
}

STEP 2
Add following code ABOVE </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>

If you already have
script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
then delete that line in above STEP 2 code.

STEP 3
Finally add following code just ABOVE  <div id='footer-wrapper'>

<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 the template.

Credits: Artistutorial.blogspot.in

Related Posts

2 comments

Anonymous
July 2, 2012 at 4:27 AM

what if I don't have "div id='footer-wrapper'", is there any other thing I can replace it by

July 2, 2012 at 6:41 AM

Look for

/* FOOTER */

or

#footer-wrap{}

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More