컨텐츠가 바뀌어도 슬라이드 메뉴 그대로 고정을 하려면..

엉주 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2015.11.26 21:15:44 6898 (49.♡.♡.32)

답변 1

본문

안녕하세요.

질문하나 드리려고 합니다..

왼쪽 고정으로 아래로 다운되는 슬라이드 메뉴를 넣었는데

메뉴클릭을 해서 컨텐츠로 넘어가면 슬라이드 메뉴가 닫힙니다..

메뉴슬라이드가 클릭하기 전 그상태 그대로 있었으면 하는데,

어떻게 수정해야하는지 부탁드립니다.ㅠㅠ

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}


$(function() {
 $('nav>ul>.btn').click(function(){ 
 $('nav>ul>.btn').next().slideUp('slow')
  $(this).next().slideDown('slow')
 $('nav>ul>.btn').removeClass('on');
 $(this).addClass('on');
 });
});