Phiên bản đầy đủ: jsB@nk » Framework » jQuery » Trình đơn định hướng kéo xổ động
URL: https://www.javascriptbank.com/animated-drop-down-navigation-menu.html
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 rê chuột đến liên kết được chỉ định, hoặc được thiết lập để xuất hiện khi người dùng nhấn chuột vào liên kết chỉ định. Trình đơn còn cho phép bạn thiết lập chiều cao với tính năng cuộn đối với các danh sách liên kết lớn.
Phiên bản đầy đủ: jsB@nk » Framework » jQuery » Trình đơn định hướng kéo xổ động
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>