JavaScriptBank
08-03-2010, 05:26 PM
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 (http://www.javascriptbank.com/vi=rê chuột) đến liên kết được chỉ định, hoặc... chi tiết (http://www.javascriptbank.com/animated-drop-down-navigation-menu.html/vi//) tại JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)
http://www.javascriptbank.com/javascript.images/framework/animated-drop-down-navigation-menu.jpg (http://www.javascriptbank.com/javascript/framework/jquery/animated-drop-down-navigation-menu/preview/vi/)
Demo: JavaScript Trình đơn định hướng kéo xổ động (http://www.javascriptbank.com/animated-drop-down-navigation-menu.html/vi/)
| JavaScript Animated Drop Down Navigation Menu (http://www.javascriptbank.com/animated-drop-down-navigation-menu.html)
Cách cài đặt
Bước 1: Đặt mã CSS bên dưới vào phần HEAD
CSS
<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: Copy mã JavaScript bên dưới và dán vào khu vực HEAD trên trang web của bạn
JavaScript
<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(sty le=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).a ttr("_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.outer Width()
outlinemenu.actualheight=outlinemenu.$menuobj.oute rHeight()
outlinemenu.offsetx=outlinemenu.$anchorobj.offset( ).left
outlinemenu.offsety=outlinemenu.$anchorobj.offset( ).top
outlinemenu.anchorwidth=outlinemenu.$anchorobj.out erWidth()
outlinemenu.anchorheight=outlinemenu.$anchorobj.ou terHeight()
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: Copy mã HTML bên dưới và dán vào khu vực BODY trên trang web của bạn
HTML
<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
- Siêu trình đơn định hướng khi rê chuột (http://www.javascriptbank.com/mega-navigation-onmouseover.html/vi/)
- Các trình đơn dạng thẻ hữu ích (http://www.javascriptbank.com/useful-javascript-tab-bar-navigation-codes.html/vi/)
- Trên 30 trình đơn định hướng với framework (http://www.javascriptbank.com/30-essential-javascript-framework-supported-navigation-menu-techniques.html/vi/)
Một vài nhãn tương tự: trình đơn định hướng (http://www.javascriptbank.com/vi+tag=trình đơn định hướng), kéo xổ (http://www.javascriptbank.com/vi+tag=kéo xổ), trình đơn động (http://www.javascriptbank.com/vi+tag=trình đơn động), rê chuột (http://www.javascriptbank.com/vi+tag=rê chuột), chiều cao (http://www.javascriptbank.com/vi+tag=chiều cao), tính năng cuộn (http://www.javascriptbank.com/vi+tag=tính năng cuộn), danh sách liên kết (http://www.javascriptbank.com/vi+tag=danh sách liên kết)
Bạn có thể xem thêm nhiều JavaScript khác về Framework (http://www.javascriptbank.com/javascript/framework/vi/) và jQuery (http://www.javascriptbank.com/javascript/framework/jquery/vi/)
Menu trượt ở đầu trang web (http://www.javascriptbank.com/javascript/menu/floatable/vi/) - Code tuyết rơi (http://www.javascriptbank.com/vi+title=tuyết rơi) - Hiệu ứng ảnh mờ ảo bằng JavaScript (http://www.javascriptbank.com/vi=ảnh mờ ảo)
http://www.javascriptbank.com/javascript.images/framework/animated-drop-down-navigation-menu.jpg (http://www.javascriptbank.com/javascript/framework/jquery/animated-drop-down-navigation-menu/preview/vi/)
Demo: JavaScript Trình đơn định hướng kéo xổ động (http://www.javascriptbank.com/animated-drop-down-navigation-menu.html/vi/)
| JavaScript Animated Drop Down Navigation Menu (http://www.javascriptbank.com/animated-drop-down-navigation-menu.html)
Cách cài đặt
Bước 1: Đặt mã CSS bên dưới vào phần HEAD
CSS
<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: Copy mã JavaScript bên dưới và dán vào khu vực HEAD trên trang web của bạn
JavaScript
<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(sty le=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).a ttr("_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.outer Width()
outlinemenu.actualheight=outlinemenu.$menuobj.oute rHeight()
outlinemenu.offsetx=outlinemenu.$anchorobj.offset( ).left
outlinemenu.offsety=outlinemenu.$anchorobj.offset( ).top
outlinemenu.anchorwidth=outlinemenu.$anchorobj.out erWidth()
outlinemenu.anchorheight=outlinemenu.$anchorobj.ou terHeight()
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: Copy mã HTML bên dưới và dán vào khu vực BODY trên trang web của bạn
HTML
<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
- Siêu trình đơn định hướng khi rê chuột (http://www.javascriptbank.com/mega-navigation-onmouseover.html/vi/)
- Các trình đơn dạng thẻ hữu ích (http://www.javascriptbank.com/useful-javascript-tab-bar-navigation-codes.html/vi/)
- Trên 30 trình đơn định hướng với framework (http://www.javascriptbank.com/30-essential-javascript-framework-supported-navigation-menu-techniques.html/vi/)
Một vài nhãn tương tự: trình đơn định hướng (http://www.javascriptbank.com/vi+tag=trình đơn định hướng), kéo xổ (http://www.javascriptbank.com/vi+tag=kéo xổ), trình đơn động (http://www.javascriptbank.com/vi+tag=trình đơn động), rê chuột (http://www.javascriptbank.com/vi+tag=rê chuột), chiều cao (http://www.javascriptbank.com/vi+tag=chiều cao), tính năng cuộn (http://www.javascriptbank.com/vi+tag=tính năng cuộn), danh sách liên kết (http://www.javascriptbank.com/vi+tag=danh sách liên kết)
Bạn có thể xem thêm nhiều JavaScript khác về Framework (http://www.javascriptbank.com/javascript/framework/vi/) và jQuery (http://www.javascriptbank.com/javascript/framework/jquery/vi/)
Menu trượt ở đầu trang web (http://www.javascriptbank.com/javascript/menu/floatable/vi/) - Code tuyết rơi (http://www.javascriptbank.com/vi+title=tuyết rơi) - Hiệu ứng ảnh mờ ảo bằng JavaScript (http://www.javascriptbank.com/vi=ảnh mờ ảo)