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 allo... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Copy & Paste CSS code below in your HEAD section
CSS
Step 2: Place JavaScript below in your HEAD section
JavaScript
Step 3: Place HTML below in your BODY section
HTML
How to setup
Step 1: Copy & Paste CSS code below in your HEAD section
CSS
Code:
<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>
JavaScript
Code:
<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 milliseconds outlinemenulabels: [], outlinemenus: [], //array to contain each block menu instances zIndexVal: 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.$anchorobj var $menu=outlinemenu.$menuobj var menuleft=($(window).width()-(outlinemenu.offsetx-$(document).scrollLeft())>outlinemenu.actualwidth)? outlinemenu.offsetx : outlinemenu.offsetx-outlinemenu.actualwidth+outlinemenu.anchorwidth //get x coord of menu var 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.$menuobj var $menuinner=outlinemenu.$menuinner if ($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.$menuobj var $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 $=jQuery this.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().left outlinemenu.offsety=outlinemenu.$anchorobj.offset().top outlinemenu.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"))].$menuobj if (e.relatedTarget!=$menu.get(0) && $(e.relatedTarget).parents("#"+$menu.get(0).id).length==0){ //check that mouse hasn't moved into menu object jkoutlinemenu.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().left outlinemenu.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>
HTML
Code:
<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>