Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 2 of 2
  1. #1
    Banned
    Join Date
    Mar 2010
    Posts
    1
    Member #
    21367
    This free JavaScript will add animationdropping animation for menus when users move mouse over a specified link, or they are set to appear through click.

    How to setup

    Step 1: Place CSS 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>
    Step 2: Place JavaScript below in your HEAD section
    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>
    Step 3: Copy & Paste HTML code below in your BODY section
    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>

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Thanks for the script. Don't spam our forums.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 05:24 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com