2depth메뉴를 3depth 메뉴로 만들어야합니다 도와주세요
본문
$('.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>
.펼쳐진상태에서 고정이되어야하는데 고정이안되네요;;
메뉴 css 도 같이 올려주셔야 해결에 도움이 됩니다.
html 마크업을 올려주셧고..
메뉴에 대한 <style>....</style>
부분 올려주시면 되겠네요
답변을 작성하시기 전에 로그인 해주세요.