Full version: jsB@nk » Framework » jQuery » Animated Drop Down Navigation Menu
URL: https://www.javascriptbank.com/animated-drop-down-navigation-menu.html
This free JavaScript will add dropping animation for menus when users move mouse over a specified link, or they are set to appear through click. The menu also allows you to set the height, along with scrolling feature for for very long list menus.
Full version: jsB@nk » Framework » jQuery » Animated Drop Down Navigation Menu
URL: https://www.javascriptbank.com/animated-drop-down-navigation-menu.html
<style type="text/css" name="jkoutlinemenu.css">/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/.outlinemenu{position: absolute; /*leave this alone*/display: none; /*leave this alone*/width: 180px; /*default width of menu*/border: 1px solid black;overflow-x: hidden;}.outlinemenu ul{list-style-type: none;margin: 0;padding: 0;}.outlinemenu ul li a{background: white;font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;color: #00014e;display: block;width: auto;padding: 3px 0;padding-left: 5px;text-decoration: none;border-bottom: 1px solid #B5B5B5;}.outlinemenu ul li a:visited, .outlinemenu ul li a:active{color: #00014e;}.outlinemenu ul li a:hover{color: black;background: #ffffcb;}/* Holly Hack for IE \*/* html .outlinemenu li {height: 1%; }* html .outlinemenu li a { height: 1%; }/* End */</style><script type="text/javascript" src="/javascript/jquery.js"></script><script type="text/javascript" name="jkoutlinemenu.js">/************************************************ Animated Outline 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***********************************************/var jkoutlinemenu={effectduration: 300, //duration of animation, in millisecondsoutlinemenulabels: [],outlinemenus: [], //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")//alert(this.$shimobj.attr("src"))},alignmenu:function(e, outlinemenu_pos){var outlinemenu=this.outlinemenus[outlinemenu_pos]var $anchor=outlinemenu.$anchorobjvar $menu=outlinemenu.$menuobjvar menuleft=($(window).width()-(outlinemenu.offsetx-$(document).scrollLeft())>outlinemenu.actualwidth)? outlinemenu.offsetx : outlinemenu.offsetx-outlinemenu.actualwidth+outlinemenu.anchorwidth //get x coord of menuvar menutop=($(window).height()-(outlinemenu.offsety-$(document).scrollTop()+outlinemenu.anchorheight)>outlinemenu.actualheight)? outlinemenu.offsety+outlinemenu.anchorheight : outlinemenu.offsety-outlinemenu.actualheight //get y coord of menu$menu.css({left:menuleft+"px", top:menutop+"px"})this.$shimobj.css({width:outlinemenu.actualwidth+"px", height:outlinemenu.actualheight+"px", left:menuleft+"px", top:menutop+"px", display:"block"})},showmenu:function(e, outlinemenu_pos){var outlinemenu=this.outlinemenus[outlinemenu_pos]var $menu=outlinemenu.$menuobjvar $menuinner=outlinemenu.$menuinnerif ($menu.css("display")=="none"){this.alignmenu(e, outlinemenu_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, outlinemenu_pos)}return false},hidemenu:function(e, outlinemenu_pos){var outlinemenu=this.outlinemenus[outlinemenu_pos]var $menu=outlinemenu.$menuobjvar $menuinner=outlinemenu.$menuinner$menuinner.css('visibility', 'hidden')this.$shimobj.css({display:"none", left:0, top:0})$menu.hide(this.effectduration)},definemenu:function(anchorid, menuid, revealtype, optwidth, optheight){var $=jQuerythis.outlinemenulabels.push([anchorid, menuid, revealtype, optwidth, optheight])},render:function($){for (var i=0, labels=this.outlinemenulabels[i]; i<this.outlinemenulabels.length; i++, labels=this.outlinemenulabels[i]){this.outlinemenus.push({$anchorobj:$("#"+labels[0]), $menuobj:$("#"+labels[1]), $menuinner:$("#"+labels[1]).children('ul:first-child'), revealtype:labels[2]})var outlinemenu=this.outlinemenus[i]outlinemenu.$anchorobj.add(outlinemenu.$menuobj).attr("_outlinemenupos", i+"pos")outlinemenu.$menuobj.css(parseInt(labels[3])>10? {width:parseInt(labels[3])+"px"} : {})outlinemenu.$menuobj.css(parseInt(labels[4])<outlinemenu.$menuobj.height()? {height:parseInt(labels[4])+"px", overflow:"scroll", overflowX:"hidden"} : {})outlinemenu.actualwidth=outlinemenu.$menuobj.outerWidth()outlinemenu.actualheight=outlinemenu.$menuobj.outerHeight()outlinemenu.offsetx=outlinemenu.$anchorobj.offset().leftoutlinemenu.offsety=outlinemenu.$anchorobj.offset().topoutlinemenu.anchorwidth=outlinemenu.$anchorobj.outerWidth()outlinemenu.anchorheight=outlinemenu.$anchorobj.outerHeight()outlinemenu.$menuobj.css("z-index", ++this.zIndexVal).hide()outlinemenu.$menuinner.css("visibility", "hidden")outlinemenu.$anchorobj.bind(outlinemenu.revealtype=="click"? "click" : "mouseenter", function(e){return jkoutlinemenu.showmenu(e, parseInt(this.getAttribute("_outlinemenupos")))})outlinemenu.$anchorobj.bind("mouseleave", function(e){var $menu=jkoutlinemenu.outlinemenus[parseInt(this.getAttribute("_outlinemenupos"))].$menuobjif (e.relatedTarget!=$menu.get(0) && $(e.relatedTarget).parents("#"+$menu.get(0).id).length==0){ //check that mouse hasn't moved into menu objectjkoutlinemenu.hidemenu(e, parseInt(this.getAttribute("_outlinemenupos")))}})outlinemenu.$menuobj.bind("click mouseleave", function(e){jkoutlinemenu.hidemenu(e, parseInt(this.getAttribute("_outlinemenupos")))})} //end for loop$(document).bind("click", function(e){for (var i=0; i<jkoutlinemenu.outlinemenus.length; i++){jkoutlinemenu.hidemenu(e, i)}}) //end document.click$(window).bind("resize", function(){for (var i=0; i<jkoutlinemenu.outlinemenus.length; i++){var outlinemenu=jkoutlinemenu.outlinemenus[i]outlinemenu.offsetx=outlinemenu.$anchorobj.offset().leftoutlinemenu.offsety=outlinemenu.$anchorobj.offset().top}})jkoutlinemenu.addshim()}}jQuery(document).ready(function($){jkoutlinemenu.render($)})/* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com*/</script><a href="#" id="designanchor">Web Design Links</a><br /><br /><div style="text-align:right"><a href="#" id="designanchor2">More web Design Links</a></div><!--Define HTML for all animated menus at the very end of the page (ie: right before </body> tag)!--><div id="mymenu1" class="outlinemenu"><ul><li><a href="http://www.dynamicdrive.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.dynamicdrive.com/style/" >CSS Library</a></li><li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li><li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li><li><a href="http://www.cssdrive.com">CSS Drive</a></li><li><a href="http://www.javascriptbank.com/forum/">JavaScript Forums</a></li><li><a href="http://www.javascriptbank.com/service/">JavaScript Services</a></li><li><a href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a></li></ul></div><script type="text/javascript">//jkoutlinemenu.definemenu("anchorid", "menuid", "mouseover|click", optional_width, optional_height)jkoutlinemenu.definemenu("designanchor", "mymenu1", "mouseover", 180)</script><div id="mymenu2" class="outlinemenu"><ul><li><a href="http://www.dynamicdrive.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.dynamicdrive.com/style/" >CSS Library</a></li><li><a href="http://www.javascriptbank.com/forum/">JavaScript Forums</a></li><li><a href="http://www.javascriptbank.com/service/">JavaScript Services</a></li><li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li><li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li><li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li><li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li><li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li><li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li><li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li><li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li><li><a href="http://www.cssdrive.com">CSS Drive</a></li><li><a href="http://www.codingforums.com/" style="border-bottom-width: 0">Coding Forums</a></li></ul></div><script type="text/javascript">//jkoutlinemenu.definemenu("anchorid", "menuid", "mouseover|click", optional_width, optional_height)jkoutlinemenu.definemenu("designanchor2", "mymenu2", "mouseover", 170, 150)</script>