모바일 overflow 드롭다운

모바일 overflow 드롭다운

QA

모바일 overflow 드롭다운

답변 1

본문

모바일 네비입니다
https://m.naver.com/ 처럼 한줄로 쭉 늘어지고 좌우슬라이드 되는 네비를 만들고 싶은데
거기서 2depth 만 내려오고 싶은데


<div style="position:relative;z-index:999;">
    <div class="div" style="width:100%;overflow-x:auto;">
        <ul class="oneDepth" style="box-sizing:border-box;white-space:nowrap;">
            <!-- for문{ -->
            <li class="position:relative;display:inline-block;height:60px;cursor:pointer;line-height:60px;">
                1Depth입니다
                <ul class="twoDepth" style="display:none;position:absolute;top:60px;">
                    <li>
                        <a href="">2Depth입니다</a>
                    </li>
                </ul>
            </li>
            <!-- } for문 -->
        <ul>
    </div>
</div>
<script>
$(function(){
    $(".oneDepth").click(function(){
        $(this).children(".twoDepth").slideToggle(500);
    });
});
</script>

아래 사진으로 예시를 들면

3731885385_1615514674.3383.png
body {:overflow-x:hidden} 해놓은 상태고
.div {overflow-x:auto} 때문에
코드상 .twoDepth {display:block} 가 되어도 (노란2depth'뭐하지1'처럼) 잘려서 보입니다
overflow를 지우면 2depth가 보이는데 좌우로 스크롤이 되어야 하는데 도와주세요 어떻게해야하나요?

이 질문에 댓글 쓰기 :

답변 1

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 27
© SIRSOFT
현재 페이지 제일 처음으로