Add a beautiful CSS-jQuery mega menu on your blog (REQ)

Add a beautiful CSS-jQuery mega menu on your blog (REQ)

Tuesday, November 29, 2011 | Posted by ArtisTutor | Edit Post

This tutorial is about another navigation menu. Using jQuery and CSS you will be able to add to your template a nice mega menu.

The request for this tutorial come from the user Angga Lisdiyanto who posted on the forum about this menu.

The next menu is perfect if you have many links or pages to add to your menu. You can add them into categories for  the visitors to find what they are interested faster and easier.

How to create a nice mega menu to your blog?

1. Log in to your dashboard--> Template- -> Edit HTML

2. Search "Ctrl+F" and find the following code: ]]></b:skin> and before it paste the next one:

/*----------------------------------------------------
{--------}  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;
}

3. Now find the </head> tag and before it paste the code:

<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 have Jquery instaled on your template delete the red line.

4. The next step is to find <div id='footer-wrapper'> or similar (in your template it might be different noted) and before it paste the next code: 

<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 and see the result.


Demo Page

Get Latest Updates For Free!

Subscribe via Email

23 comments

Reply
Martin Freeman
November 29, 2011 at 11:16 AM

Nice. I was wonder how to create a menu like this. Thanks.

Reply
Anonymous
November 29, 2011 at 11:10 PM

Hi, my problem is when i add new content which include a jQuery or script is always failed. Some of them just showed it's text and it's picture is not showed. Now i have the same problem at the "Mega Menu" which posted in your blog. Please fix it, I was sent an email to you how to fix it (if you have time).

Reply
ArtisTutor
November 30, 2011 at 12:28 AM

@Angga LisdiyantoMake sure you have only one jQuery plugin installed on your template. If you have installed, delete the red line from the step 3.

Reply
Anonymous
December 1, 2011 at 9:40 PM

I have do that, but it's still same.

Reply
ArtisTutor
December 1, 2011 at 9:59 PM

@Angga LisdiyantoSend me your template , but without the menu installed.

Reply
Anonymous
December 3, 2011 at 12:19 AM

It's adding my menu to the bottom...any way to get it directly under the header?

Reply
ArtisTutor
December 3, 2011 at 6:44 PM

@AnonymousLook in your template for:

<div class='sheet-cc'/>
<div class='sheet-body'>
<div id='crosscol-wrapper' style='text-align:center'>

or similar code and before it paste the code on step 4

Reply
ΔΙΚΤΥΟΥΡΓΟΣ
December 6, 2011 at 10:17 AM

Super tutorial.
But what I do not understand is what means + new deal, why do you have it, what can we do with it?
Thanks very much for your help.

Reply
ArtisTutor
December 6, 2011 at 10:58 AM

@tigrisYou can do whatever you want. You can put a link to another page, site, blog, you can delete it, it's your choice what to do .

Reply
lychee
January 20, 2012 at 12:51 AM

Hi, I have a question concerning the menu as well, though it doesn't fit this topic. I hope it's ok though.
I made a new blog layout and can't click on the menu since it is quite small now. If it would be bigger it'd work but this is not how I want it.
If I pull the menu into the sidebar everything works perfectly. I hope you can help me with this, thank you!

Reply
ArtisTutor
January 20, 2012 at 10:17 AM

@lycheeCan you provide a link to the blog?

Reply
lychee
January 20, 2012 at 5:22 PM

@ArtisTutor oh...after hours I figured it out. Thank you anyway!! :-)

Reply
Web Design Bournemouth
March 16, 2012 at 12:16 AM

Awesome Menu, Thanks a lot saves me time :P

Reply
Dillah
April 8, 2012 at 1:42 PM

Wow..
Amazing...
Im very interested with Blogger.com

Reply
Bengal Reads
June 6, 2012 at 6:15 AM

How do I make the topics Home, About, Contact etc. stop sliding... it's really hard to click on them because they slide :)

Reply
Gabbar1113
June 25, 2012 at 12:10 PM

Hi

I want to add this menu above content area. My blog do not have

<div class='sheet-cc'/>
<div class='sheet-body'>
<div id='crosscol-wrapper' style='text-align:center'>

So i added ABOVE

<div id='content-wrapper'>

But it is not working properly on
http://test-blogxx.blogspot.in/

What to do.

It is working when Above

<div id='footer-wrapper'>

URL : http://pin-ups1.blogspot.in/

I want to add below header and to bottom.

Help me.

Reply
riltube
July 2, 2012 at 2:46 PM

I don't have div foot wrapper, please help, what else can I find to replace it

Reply
riltube
July 9, 2012 at 6:01 PM

thans a lot, it works very well on my blog http://riltube.blogspot.com/

Reply
MrMan
July 22, 2012 at 7:38 PM

Hi?
Can u write a tutorial on how to create a menu bar like yours with a search bar also

Reply
Hemant Verma
October 30, 2012 at 1:32 PM

nice one i like it

Widget Generators

Reply
New Satelit
December 28, 2012 at 6:30 PM

oh so well how,, I do, thank you
thank you

Reply
web design company new jersey
March 26, 2013 at 8:35 AM

Nice information about css query.

Reply
Anonymous
June 14, 2013 at 9:23 AM

I absolutely love your blog and find many of your post’s to be exactly I’m looking for.Always share useful articles. Thanks for sharing.

Click to Add a New Comment

Leave your comment

- If you're asking a question click the Subscribe By Email link, below the comment form, to be notified of replies.
- Do NOT add links to the body of your comment as they will not be published.
- Only the comments posted in ENGLISH will be approved.
- If you have a problem check first the comments , maybe you will find the solution there.

Read latest articles in your favorite news reader
Sign up for newsletter

Find us on Facebook

Followers

Copyright © 2012 Artisteer Tutorials, Tips & Tricks. Template by FOB