2depth메뉴를 3depth 메뉴로 만들어야합니다 도와주세요

2depth메뉴를 3depth 메뉴로 만들어야합니다 도와주세요

QA

2depth메뉴를 3depth 메뉴로 만들어야합니다 도와주세요

답변 3

본문

$('.lOver').each(function(){

if($(this).is('.on') == true){

$(this).find('>ul').stop().slideDown();

$(this).find('> a').click(function(){

var tg = $(this);


$('.lOver').find('> a').not(tg).parent('.lOver').find('> ul').stop().slideUp();

$('.lOver').removeClass('on');

//tg.parent('.lOver').addClass('on');

if($(this).parent('.lOver').find('> ul').css('display') == 'none'){

$(this).parent('.lOver').find('> ul').stop().slideDown();

tg.parent('.lOver').addClass('on');

}else{

$(this).parent('.lOver').find('> ul').stop().slideUp();

$('.lOver').removeClass('on');

}

return false;

});

});

이 질문에 댓글 쓰기 :

답변 3

이렇게 하시고 css 는 맞게 수정해보세요.

<script>
$(function(){
$("ul ul").hide();
$("ul ul ul").hide();
$("ul li").hover(function(){
$(this).children("ul:not(:animated)").slideDown("fast");
$(this).addClass('on').stop();
},
function(){
$("ul",this).slideUp("fast");
$(this).removeClass('on').stop();
});
});
</script>

<style>
.leftNav {margin-bottom:30px;} 
.leftNav > ul > li{border-top: 1px solid #ebebeb; background-color: #e4e4e4;padding: 9px 20px;} 
.leftNav > ul > li.lOver{background-color: #f6f4f7;} 
.leftNav > ul > li.lOver.on{background-color: #242424;} 
.leftNav > ul > li > a{display: block; font-size: 14px; color: #333333; } 
.leftNav > ul > li.lOver > a{background: url(../images/menu_close_bullet.gif) no-repeat 153px center;} 
.leftNav > ul > li.lOver.on > a{color: #ffffff; background: url(../images/menu_open_bullet.gif) no-repeat 153px center;} 
.leftNav > ul > li.lOver ul{display: none; padding-top:10px;} 
.leftNav > ul > li.lOver.on ul{display: block;} 
.leftNav > ul > li.lOver ul li{padding: 0 0 10px 30px;} 
.leftNav > ul > li.lOver ul li.new{background: url(../images/new.png) no-repeat 8px 2px;} 
.leftNav > ul > li.lOver ul li a{font-size: 12px; color: #f6f4f7;} 
.leftNav > ul > li.lOver.on ul li a{color: #ffffff;} 
.leftNav > ul > li.lOver ul li a:hover{color: #fbc51a;} 
.leftNav > ul > li.lOver.on ul li.on a{color: #fbc51a;} 
.leftNav li .lnDot {border-bottom: 1px dotted #8d8c8e; width: 120px; }
</style>


<body>
<div id="container">

<div class="leftNav"> 
<ul> 
<li class="lOver"> 
<a href="#">회사소개</a> 
<ul> 
<li>
<a href="<?=G5_URL?>/page/introduce.php?ov=1&a=1">인사말</a>
<ul> 
<li>
<a href="<?=G5_URL?>/page/introduce.php?ov=1&a=1">3depth</a>
</li> 
</ul> 
</li> 
<li>
<a href="<?=G5_URL?>/page/map.php?ov=1&a=2">찾아오시는길</a>
<ul> 
<li>
<a href="<?=G5_URL?>/page/introduce.php?ov=1&a=1">3depth</a>
</li> 
</ul> 
</li> 
</ul> 
</li> 
</ul>
</div>
답변을 작성하시기 전에 로그인 해주세요.
전체 3
© SIRSOFT
현재 페이지 제일 처음으로