Trình đơn định hướng kéo xổ động

J

JavaScriptBank

New member
Hiệu ứng sẽ tạo một trình đơn với chuyển động kéo xổ xuống mỗi khi người dùng
You must be registered for see links
đến liên kết được chỉ định, hoặc...
You must be registered for see links
tại
You must be registered for see links


You must be registered for see links

Demo:
You must be registered for see links

|
You must be registered for see links

Cách cài đặt

Bước 1: Copy mã CSS bên dưới và dán vào khu vực HEAD trên trang web của bạn
CSS
Mã: 
<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>

Bước 2: Đặt mã JavaScript bên dưới vào phần HEAD
JavaScript
Mã: 
<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>

Bước 3: Đặt mã HTML bên dưới vào phần BODY
HTML
Mã: 
<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>



Bạn có thể xem các mã tương tự bên dưới
-
You must be registered for see links

-
You must be registered for see links

-
You must be registered for see links



Một vài nhãn tương tự:
You must be registered for see links
,
You must be registered for see links
,
You must be registered for see links
,
You must be registered for see links
,
You must be registered for see links
,
You must be registered for see links
,
You must be registered for see links

Bạn có thể xem thêm nhiều JavaScript khác về
You must be registered for see links
và
You must be registered for see links





You must be registered for see links
-
You must be registered for see links
-
You must be registered for see links
 
Bạn phải đăng nhập hoặc đăng ký để bình luận.
Back
Top