<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="/inc/css/common.css" />
<script type="text/javascript" src="/inc/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function lnb(hn,sn){
var $lnb = $('#lnb > ul > li');
var $lnb_depth = $('.lnbDepth > li');
$lnb.eq(hn-1).addClass('on');
$lnb.eq(hn-1).find('.lnbDepth').children().eq(sn-1).addClass('sel');
$lnb.find('ul').hide();
$lnb.each(function(){
if($(this).hasClass('on')){
if($(this).find('div').next().is('ul')){
$(this).find('div').next().slideToggle(300);
}else{
$(this).find('div').addClass('brnone');
}
$(this).find('img').attr('src', $(this).find('img').attr('src').replace('_off.gif', '_on.gif'));
}
});
$lnb.click(function(){
if($(this).hasClass('on')) return false;
$lnb.removeClass('on');
$(this).addClass('on');
$lnb.find('ul').slideUp(300);
if($(this).find('div').next().is('ul')){
$(this).find('div').next().slideToggle(300);
}else{
$(this).find('div').addClass('brnone');
}
});
$lnb_depth.each(function(){
if($(this).hasClass('sel')){
$(this).find('img').attr('src', $(this).find('img').attr('src').replace('_off.gif', '_on.gif'));
}
});
$('.lnbDepth li img').hover(function(){
if($(this).parent().hasClass('sel')) return false;
$(this).parent().addClass('over');
$(this).attr('src', $(this).attr('src').replace('_off.gif', '_on.gif'));
}, function(){
if($(this).parent().hasClass('sel')) return false;
$(this).attr('src', $(this).attr('src').replace('_on.gif', '_off.gif'));
$(this).parent().removeClass('over');
});
}
</script>
</head>
<body>
<div id="wrap">
<div id="container">
<div id="lnb">
<ul class="menu">
<li><a href="#"><img src="/images/news/lmenu_01_off.gif" alt="공지사항" /></a>
<div></div>
<ul class="lnbDepth">
<li><img src="/images/news/smenu_01_off.gif" alt="1" /></li>
<li><img src="/images/news/smenu_02_off.gif" alt="2" /></li>
<li><img src="/images/news/smenu_03_off.gif" alt="3" /></li>
</ul>
</li>
<li><a href="#"><img src="/images/news/lmenu_02_off.gif" alt="Silk" /></a>
<div></div>
<ul class="lnbDepth">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li><a href="#"><img src="/images/news/lmenu_03_off.gif" alt="진행 중 이벤트" /></a>
<div></div>
<ul class="lnbDepth">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li><a href="#"><img src="/images/news/lmenu_04_off.gif" alt="당첨자 발표" /></a>
<div></div>
<ul class="lnbDepth">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li><a href="#"><img src="/images/news/lmenu_05_off.gif" alt="지난 이벤트" /></a>
<div></div>
<ul class="lnbDepth">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
<script type="text/javascript">lnb(1,1);</script>
</div>
<div id="contWrap">
</div>
</div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="/inc/css/common.css" />
<script type="text/javascript" src="/inc/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function lnb(hn,sn){
var $lnb = $('#lnb > ul > li');
var $lnb_depth = $('.lnbDepth > li');
$lnb.eq(hn-1).addClass('on');
$lnb.eq(hn-1).find('.lnbDepth').children().eq(sn-1).addClass('sel');
$lnb.find('ul').hide();
$lnb.each(function(){
if($(this).hasClass('on')){
if($(this).find('div').next().is('ul')){
$(this).find('div').next().slideToggle(300);
}else{
$(this).find('div').addClass('brnone');
}
$(this).find('img').attr('src', $(this).find('img').attr('src').replace('_off.gif', '_on.gif'));
}
});
$lnb.click(function(){
if($(this).hasClass('on')) return false;
$lnb.removeClass('on');
$(this).addClass('on');
$lnb.find('ul').slideUp(300);
if($(this).find('div').next().is('ul')){
$(this).find('div').next().slideToggle(300);
}else{
$(this).find('div').addClass('brnone');
}
});
$lnb_depth.each(function(){
if($(this).hasClass('sel')){
$(this).find('img').attr('src', $(this).find('img').attr('src').replace('_off.gif', '_on.gif'));
}
});
$('.lnbDepth li img').hover(function(){
if($(this).parent().hasClass('sel')) return false;
$(this).parent().addClass('over');
$(this).attr('src', $(this).attr('src').replace('_off.gif', '_on.gif'));
}, function(){
if($(this).parent().hasClass('sel')) return false;
$(this).attr('src', $(this).attr('src').replace('_on.gif', '_off.gif'));
$(this).parent().removeClass('over');
});
}
</script>
</head>
<body>
<div id="wrap">
<div id="container">
<div id="lnb">
<ul class="menu">
<li><a href="#"><img src="/images/news/lmenu_01_off.gif" alt="공지사항" /></a>
<div></div>
<ul class="lnbDepth">
<li><img src="/images/news/smenu_01_off.gif" alt="1" /></li>
<li><img src="/images/news/smenu_02_off.gif" alt="2" /></li>
<li><img src="/images/news/smenu_03_off.gif" alt="3" /></li>
</ul>
</li>
<li><a href="#"><img src="/images/news/lmenu_02_off.gif" alt="Silk" /></a>
<div></div>
<ul class="lnbDepth">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li><a href="#"><img src="/images/news/lmenu_03_off.gif" alt="진행 중 이벤트" /></a>
<div></div>
<ul class="lnbDepth">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li><a href="#"><img src="/images/news/lmenu_04_off.gif" alt="당첨자 발표" /></a>
<div></div>
<ul class="lnbDepth">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li><a href="#"><img src="/images/news/lmenu_05_off.gif" alt="지난 이벤트" /></a>
<div></div>
<ul class="lnbDepth">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>
<script type="text/javascript">lnb(1,1);</script>
</div>
<div id="contWrap">
</div>
</div>
</div>
</body>
</html>
'web standard > jquery' 카테고리의 다른 글
| width가 100%인 이미지에 맵 걸기 (0) | 2013.04.22 |
|---|---|
| 좌우(상하) 슬라이드 (0) | 2012.02.29 |
| 수평네비게이션 기초 (0) | 2012.02.13 |
| 수직네비게이션 기초 (0) | 2012.02.13 |
| 이미지 순차적으로 스위칭 (0) | 2012.01.26 |
