컨텐츠가 바뀌어도 슬라이드 메뉴 그대로 고정을 하려면..
본문
안녕하세요.
질문하나 드리려고 합니다..
왼쪽 고정으로 아래로 다운되는 슬라이드 메뉴를 넣었는데
메뉴클릭을 해서 컨텐츠로 넘어가면 슬라이드 메뉴가 닫힙니다..
메뉴슬라이드가 클릭하기 전 그상태 그대로 있었으면 하는데,
어떻게 수정해야하는지 부탁드립니다.ㅠㅠ
html
<nav>
<ul>
<li class="btn"><a href="#">메뉴1</a></li>
<li class="list">
<dl>
<dd><a href="#">- 메뉴1-2</a></dd>
<dd><a href="#">- 메뉴1-3</a></dd>
</dl>
</li>
<li class="btn"><a href="#">메뉴2</a></li>
<li class="list">
<dl>
<dd><a href="#">- 메뉴2-1</a></dd>
<dd><a href="#">- 메뉴2-2</a></dd>
</dl>
</li>
</ul>
</nav>
CSS
nav{width:220px;}
nav>ul { list-style:none;}
nav>ul>.btn>a{width:220px; height:80px; line-height:80px; padding-left:25px; display:block; box-sizing:border-box; background:#4f463f; color:#fff; border-bottom:1px outset #ccc; font-weight:bold}
nav>ul>.on>a{background:#ff722d; color:#fff;border:0}
nav>ul>.list{display:none;}
nav>ul>.list>dl{background:#fff;}
nav>ul>.list>dl>dd{padding:7px 25px; line-height:1.2em}
nav>ul>.list>dl>dd>a{color:#727272; font-size:0.82em;}
nav>ul>.list>dl>dd>a:hover, nav>ul>.list>dl>dd>a:focus{color:#ff722d}
JS
$(function() {
$('nav>ul>.btn').click(function(){
$('nav>ul>.btn').next().slideUp('slow')
$(this).next().slideDown('slow')
$('nav>ul>.btn').removeClass('on');
$(this).addClass('on');
});
});
답변을 작성하시기 전에 로그인 해주세요.
