<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<style type="text/css">
.on{font-weight:bold; text-decoration:underline;}
</style>
</head>
<body>
<ul class="togglemn">
<li><a href="#">메뉴1</a>
<ul>
<li><a href="#">2차메뉴1</a></li>
<li><a href="#">2차메뉴2</a></li>
<li><a href="#">2차메뉴3</a></li>
<li><a href="#">2차메뉴4</a></li>
<li><a href="#">2차메뉴5</a></li>
</ul>
</li>
<li><a href="#">메뉴2</a>
<ul>
<li><a href="#">2차메뉴1</a></li>
<li><a href="#">2차메뉴2</a></li>
<li><a href="#">2차메뉴3</a></li>
<li><a href="#">2차메뉴4</a></li>
<li><a href="#">2차메뉴5</a></li>
</ul>
</li>
<li><a href="#">메뉴3</a>
<ul>
<li><a href="#">2차메뉴1</a></li>
<li><a href="#">2차메뉴2</a></li>
<li><a href="#">2차메뉴3</a></li>
<li><a href="#">2차메뉴4</a></li>
<li><a href="#">2차메뉴5</a></li>
</ul>
</li>
<li><a href="#">메뉴4</a></li>
<li><a href="#">메뉴5</a>
<ul>
<li><a href="#">2차메뉴1</a></li>
<li><a href="#">2차메뉴2</a></li>
<li><a href="#">2차메뉴3</a></li>
<li><a href="#">2차메뉴4</a></li>
<li><a href="#">2차메뉴5</a></li>
</ul>
</li>
</ul>
<script type="text/javascript">
function lnbSet(param, lnbIndex, useImg, useAll){
/* var setup, base setup */
var target = $(param+"> li > a");
var target2dpt = $(param+"> li > ul > li > a");
if(useImg == "Y"){
$(param+"> li:eq("+lnbIndex+") > a > img").attr("src", $(param+"> li:eq("+lnbIndex+") > a > img").attr("src").replace(".gif", "on.gif"));
} else {
$(param+"> li:eq("+lnbIndex+") > a").addClass("on");
}
$(param+"> li:gt("+lnbIndex+") > ul").hide();
/* 2depth menu decoration script */
function lnb2dpt(obj){
$(target2dpt).removeClass("on");
$(obj).addClass("on");
}
/* show-hide all menu */
function lnbAll(){
if(useAll == "Y"){
var option_target = $(".lnb_option a");
var optIndex = 0;
$(option_target).click(
function(){
var currIndex = $(option_target).index($(this));
if(currIndex == 0){
$(param+"> li > ul").show();
} else {
$(param+"> li > ul").hide();
}
}
);
} else {
return;
}
}
/* menu binding */
target.bind("click", function(){
lnbInit(this, param, target, useImg);
}).bind("focus", function(){
lnbInit(this, param, target, useImg);
});
target2dpt.bind("click", function(){
lnb2dpt(this);
});
/* show-hide all menu starting */
lnbAll();
}
function lnbInit(obj, param, target, flag){
var currIndex = $(target).index($(obj));
if(flag == "Y"){
$(param+"> li:eq("+lnbIndex+") > a > img").attr("src", $(param+"> li:eq("+lnbIndex+") > a > img").attr("src").replace("on.gif", ".gif"));
$(param+"> li:eq("+lnbIndex+") > ul").hide();
$(param+"> li:eq("+currIndex+") > a > img").attr("src", $(param+"> li:eq("+currIndex+") > a > img").attr("src").replace(".gif", "on.gif"));
$(param+"> li:eq("+currIndex+") > ul").show();
} else {
$(param+"> li:eq("+lnbIndex+") > a[class^=on]").removeClass();
$(param+"> li:eq("+lnbIndex+") > ul").hide();
$(param+"> li:eq("+currIndex+") > a").addClass("on");
$(param+"> li:eq("+currIndex+") > ul").show();
}
lnbIndex = currIndex;
}
var lnbIndex = 0;
lnbSet(".togglemn", lnbIndex, "N", "Y");
</script>
</body>
</html>
'스크립트' 카테고리의 다른 글
| Javascripy - 접근성/단축키 운용 (0) | 2011.06.30 |
|---|---|
| Javascript - 탭메뉴 (0) | 2011.06.30 |
| 퀵메뉴 스크립트 (0) | 2011.06.30 |
| JQuery - Q&A (0) | 2011.06.30 |