Full version: jsB@nk » Framework » jQuery » Mega Navigation onmouseover
URL: https://www.javascriptbank.com/mega-navigation-onmouseover.html
This free JavaScript code drops down the container that has a lot of the menu, along with very very very numberous items when users click the indicated link. This effect will be useful and appropriate if your website has a huge list of categories, up to hundreds, need to be shown, like jsB@nk version 8.
Full version: jsB@nk » Framework » jQuery » Mega Navigation onmouseover
URL: https://www.javascriptbank.com/mega-navigation-onmouseover.html
<style type="text/css">.megamenu{position: absolute;display: none;left: 0;top: 0;background: white;border: 1px solid #f06b24;border-width: 5px 1px;padding: 10px;font: normal 12px Verdana;z-index: 100;}.megamenu .column{float: left;width: 180px; /*width of each menu column*/margin-right: 5px;}.megamenu .column ul{margin: 0;padding: 0;list-style-type: none;}.megamenu .column ul li{padding-bottom: 5px;}.megamenu .column h3{background: #e0e0e0;font: bold 13px Arial;margin: 0 0 5px 0;}.megamenu .column ul li a{text-decoration: none;}.megamenu .column ul li a:hover{color: red;}</style><script type="text/javascript" src="/javascript/jquery.js"></script><script type="text/javascript" name="jkmegamenu.js">/************************************************ jQuery Mega Menu- by JavaScript Kit (www.javascriptkit.com)* This notice must stay intact for usage* Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code***********************************************//* jQuery Mega Menu v1.02* Last updated: June 29th, 2009. This notice must stay intact for usage * Author: JavaScript Kit at http://www.javascriptkit.com/* Visit http://www.javascriptkit.com/script/script2/jScale/ for full source code*/jQuery.noConflict();var jkmegamenu={effectduration: 300, //duration of animation, in millisecondsdelaytimer: 200, //delay after mouseout before menu should be hidden, in milliseconds//No need to edit beyond heremegamenulabels: [],megamenus: [], //array to contain each block menu instanceszIndexVal: 1000, //starting z-index value for drop down menu$shimobj: null,addshim:function($){$(document.body).append('<IFRAME id="outlineiframeshim" src="'+(location.protocol=="https:"? 'blank.htm' : 'about:blank')+'" style="display:none; left:0; top:0; z-index:999; position:absolute; filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)" frameBorder="0" scrolling="no"></IFRAME>')this.$shimobj=$("#outlineiframeshim")},alignmenu:function($, e, megamenu_pos){var megamenu=this.megamenus[megamenu_pos]var $anchor=megamenu.$anchorobjvar $menu=megamenu.$menuobjvar menuleft=($(window).width()-(megamenu.offsetx-$(document).scrollLeft())>megamenu.actualwidth)? megamenu.offsetx : megamenu.offsetx-megamenu.actualwidth+megamenu.anchorwidth //get x coord of menu//var menutop=($(window).height()-(megamenu.offsety-$(document).scrollTop()+megamenu.anchorheight)>megamenu.actualheight)? megamenu.offsety+megamenu.anchorheight : megamenu.offsety-megamenu.actualheightvar menutop=megamenu.offsety+megamenu.anchorheight //get y coord of menu$menu.css({left:menuleft+"px", top:menutop+"px"})this.$shimobj.css({width:megamenu.actualwidth+"px", height:megamenu.actualheight+"px", left:menuleft+"px", top:menutop+"px", display:"block"})},showmenu:function(e, megamenu_pos){var megamenu=this.megamenus[megamenu_pos]var $menu=megamenu.$menuobjvar $menuinner=megamenu.$menuinnerif ($menu.css("display")=="none"){this.alignmenu(jQuery, e, megamenu_pos)$menu.css("z-index", ++this.zIndexVal)$menu.show(this.effectduration, function(){$menuinner.css('visibility', 'visible')})}else if ($menu.css("display")=="block" && e.type=="click"){ //if menu is hidden and this is a "click" event (versus "mouseout")this.hidemenu(e, megamenu_pos)}return false},hidemenu:function(e, megamenu_pos){var megamenu=this.megamenus[megamenu_pos]var $menu=megamenu.$menuobjvar $menuinner=megamenu.$menuinner$menuinner.css('visibility', 'hidden')this.$shimobj.css({display:"none", left:0, top:0})$menu.hide(this.effectduration)},definemenu:function(anchorid, menuid, revealtype){this.megamenulabels.push([anchorid, menuid, revealtype])},render:function($){for (var i=0, labels=this.megamenulabels[i]; i<this.megamenulabels.length; i++, labels=this.megamenulabels[i]){if ($('#'+labels[0]).length!=1 || $('#'+labels[1]).length!=1) //if one of the two elements are NOT defined, existreturnthis.megamenus.push({$anchorobj:$("#"+labels[0]), $menuobj:$("#"+labels[1]), $menuinner:$("#"+labels[1]).children('ul:first-child'), revealtype:labels[2], hidetimer:null})var megamenu=this.megamenus[i]megamenu.$anchorobj.add(megamenu.$menuobj).attr("_megamenupos", i+"pos") //remember index of this drop down menumegamenu.actualwidth=megamenu.$menuobj.outerWidth()megamenu.actualheight=megamenu.$menuobj.outerHeight()megamenu.offsetx=megamenu.$anchorobj.offset().leftmegamenu.offsety=megamenu.$anchorobj.offset().topmegamenu.anchorwidth=megamenu.$anchorobj.outerWidth()megamenu.anchorheight=megamenu.$anchorobj.outerHeight()$(document.body).append(megamenu.$menuobj) //move drop down menu to end of documentmegamenu.$menuobj.css("z-index", ++this.zIndexVal).hide()megamenu.$menuinner.css("visibility", "hidden")megamenu.$anchorobj.bind(megamenu.revealtype=="click"? "click" : "mouseenter", function(e){var menuinfo=jkmegamenu.megamenus[parseInt(this.getAttribute("_megamenupos"))]clearTimeout(menuinfo.hidetimer) //cancel hide menu timerreturn jkmegamenu.showmenu(e, parseInt(this.getAttribute("_megamenupos")))})megamenu.$anchorobj.bind("mouseleave", function(e){var menuinfo=jkmegamenu.megamenus[parseInt(this.getAttribute("_megamenupos"))]if (e.relatedTarget!=menuinfo.$menuobj.get(0) && $(e.relatedTarget).parents("#"+menuinfo.$menuobj.get(0).id).length==0){ //check that mouse hasn't moved into menu objectmenuinfo.hidetimer=setTimeout(function(){ //add delay before hiding menujkmegamenu.hidemenu(e, parseInt(menuinfo.$menuobj.get(0).getAttribute("_megamenupos")))}, jkmegamenu.delaytimer)}})megamenu.$menuobj.bind("mouseenter", function(e){var menuinfo=jkmegamenu.megamenus[parseInt(this.getAttribute("_megamenupos"))]clearTimeout(menuinfo.hidetimer) //cancel hide menu timer})megamenu.$menuobj.bind("click mouseleave", function(e){var menuinfo=jkmegamenu.megamenus[parseInt(this.getAttribute("_megamenupos"))]menuinfo.hidetimer=setTimeout(function(){ //add delay before hiding menujkmegamenu.hidemenu(e, parseInt(menuinfo.$menuobj.get(0).getAttribute("_megamenupos")))}, jkmegamenu.delaytimer)})} //end for loopif(/Safari/i.test(navigator.userAgent)){ //if Safari$(window).bind("resize load", function(){for (var i=0; i<jkmegamenu.megamenus.length; i++){var megamenu=jkmegamenu.megamenus[i]var $anchorisimg=(megamenu.$anchorobj.children().length==1 && megamenu.$anchorobj.children().eq(0).is('img'))? megamenu.$anchorobj.children().eq(0) : nullif ($anchorisimg){ //if anchor is an image link, get offsets and dimensions of image itself, instead of parent Amegamenu.offsetx=$anchorisimg.offset().leftmegamenu.offsety=$anchorisimg.offset().topmegamenu.anchorwidth=$anchorisimg.width()megamenu.anchorheight=$anchorisimg.height()}}})}else{$(window).bind("resize", function(){for (var i=0; i<jkmegamenu.megamenus.length; i++){var megamenu=jkmegamenu.megamenus[i]megamenu.offsetx=megamenu.$anchorobj.offset().leftmegamenu.offsety=megamenu.$anchorobj.offset().top}})}jkmegamenu.addshim($)}}jQuery(document).ready(function($){jkmegamenu.render($)})/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/</script><script type="text/javascript">//jkmegamenu.definemenu("anchorid", "menuid", "mouseover|click")jkmegamenu.definemenu("megaanchor", "megamenu1", "mouseover")</script><!--Mega Menu Anchor--><p align="center"><a href="http://www.javascriptkit.com" id="megaanchor">Tech Links</a></p><!--Mega Drop Down Menu HTML. Retain given CSS classes--><div id="megamenu1" class="megamenu"><div class="column"><h3>Web Development</h3><ul><li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li><li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li><li><a href="http://www.javascriptbank.com">JavaScript Bank</a></li><li><a href="http://www.cssdrive.com">CSS Drive</a></li><li><a href="http://www.codingforums.com">Coding Forums</a></li><li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li></ul></div><div class="column"><h3>News Related</h3><ul><li><a href="http://www.cnn.com/">CNN</a></li><li><a href="http://www.msnbc.com">MSNBC</a></li><li><a href="http://www.google.com">Google</a></li><li><a href="http://news.bbc.co.uk">BBC News</a></li></ul></div><div class="column"><h3>Technology</h3><ul><li><a href="http://www.news.com/">News.com</a></li><li><a href="http://www.slashdot.com">SlashDot</a></li><li><a href="http://www.digg.com">Digg</a></li><li><a href="http://www.techcrunch.com">Tech Crunch</a></li></ul></div><br style="clear: left" /> <!--Break after 3rd column. Move this if desired--><div class="column"><h3>Web Development</h3><ul><li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li><li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li><li><a href="http://www.javascriptbank.com">JavaScript Bank</a></li><li><a href="http://www.cssdrive.com">CSS Drive</a></li><li><a href="http://www.codingforums.com">Coding Forums</a></li><li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li></ul></div><div class="column"><h3>News Related</h3><ul><li><a href="http://www.cnn.com/">CNN</a></li><li><a href="http://www.msnbc.com">MSNBC</a></li><li><a href="http://www.google.com">Google</a></li><li><a href="http://news.bbc.co.uk">BBC News</a></li></ul></div><div class="column"><h3>Technology</h3><ul><li><a href="http://www.news.com/">News.com</a></li><li><a href="http://www.slashdot.com">SlashDot</a></li><li><a href="http://www.digg.com">Digg</a></li><li><a href="http://www.techcrunch.com">Tech Crunch</a></li></ul></div></div>