Fancy, Simple jQuery Mega Menu Script (no plugins required)

Why is this so hard?!  Lol – after what seemed like an hour of searching all I had found was 10 articles on Jquery mega menu plugins, extremely heavy jquery / javascript and css implementation.  So, here are the barebones required pieces; what’s needed to create a fancy, simple jquery mega menu:

1. Create a link that opens the mega menu:

 <a href="#" class="megamenulink_satellite">Satellite Phones</a>

2. Create the mega menu (Or pull it from wordpress if desired (see below))

<ul class="megamenu megamenu_satellite"><li><a href="/iridium-phones">Iridium Phones</a>
<ul class="sub-menu">
	<li><a href="iridium-phones/iridium-9555-satellite-phone>Iridium 9555 Satellite Phone</a></li>
	<li><a href="iridium-phones/iridium-go-satellite-phone>Iridium Go! Satellite Phone</a></li>
</ul>

3. The jQuery script

/** megamenus **/
activemegamenu = false;
$( document ).ready(function() {
  $('.megamenulink_satellite').hover(function(e){

    activemegamenu = 'megamenu_satellite';
    $('.megamenu_satellite').fadeIn();

  }, function(){
    activemegamenu = false;
    setTimeout('hidemegamenu()', 600);
  });

  $('.megamenu_satellite').hover(function(){
    activemegamenu = 'megamenu_satellite';

  },function(){
    activemegamenu = false;
    $(this).fadeOut();
  });

});

function hidemegamenu(){
  if(!activemegamenu){
    $('.megamenu_satellite').fadeOut();
  }
}

4. Barebones CSS:

.megamenu {
  display:none; 
  /* add menu styles here */
}

 

Also (Optional):

– Yes this works very easily w/ wordpress menus – you can do this by  setting a class on the menu item in wordpress
– Yes you’ll need to style your mega menu, I won’t tell you how to do that as I wouldn’t want to deprive you of that value of learning how to do that (who am i to do that)

Saturday, June 28th, 2014 · Categories: Javascript / jQuery (Internal), Wordpress Theme Development (Private)


Post Written by Tison Kelley

Tison Kelley, B.S., specializes in User Interface Design and User Experience in enterprise architectures. Nationally, he has worked with the U.S. Navy, Federal Aviation Administration, and the University of San Diego's Institute for Peace & Justice. Regionally, he has worked with McDonald's franchises, SAAB Sensis Corp, Consumer Credit Counseling, C.B. Richard Ellis, Upstate HomeCare and CNY organizations in a wide variety of industries. He is proficient in XHTML, CSS and Javascript development, as well as PHP, and MySQL on the server-side. He has recently exhibited at trade conferences; Gartner Enterprise Content Management in Las Vegas and Search Engine Strategies NYC. Kelley is a native of Syracuse, N.Y. and has a B.S. in Information Studies & Technology from Syracuse University. He was the founding director of a 501c3 organization that has helped donate over $34,000 for multiple sclerosis research.


Comments are closed.



Return to Blog

We will always build beautiful websites that rank high on search engines.

All About Us

Put simply, our work builds organizations. We've worked with organizations in both public & private sectors.
Read more

Contact

2610 S. Salina St.
Syracuse, NY 13205
Mon - Thurs 9am - 3:30pm
315.233.9283
Contact Us

Get Started

Our latest launch paid for itself on the date of the launch. How can your organization change?
Get Started