[Vue js 반응형 웹페이지] 우측 슬라이드메뉴

여기서 이어서함

[Vue js 반응형 웹페이지] 페이지구성 + Router 설정

yoyostudy.tistory.com/29

 

 

page2.vue를 아래 코드로 수정

<template>
    <div id="page2">
        <div id="page2-head">
            PAGE 2
        </div>
        <br>
        <br>
        page2 - 우측 슬라이드
        <br><br><br>
        <button id="page2-slide-show">slide show</button>
        <br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br>


        <!-- Slide Box -->
        <div id="page2-slide" class="page2-slide-hidden">
            <div id="page2-shadow">
                <div id="page2-slide-head">PAGE 2 - SLIDE</div>
                <div id="page2-slide-box">
                    <div id="page2-slide-scroll">
                        <div>카테고리</div>
                        <div>카테고리</div>
                        <div>카테고리</div>
                        <div>카테고리</div>
                        <div>카테고리</div>
                        <div>카테고리</div>
                        <div>카테고리</div>
                        <div>카테고리</div>
                        <div>카테고리</div>
                        <div>카테고리</div>
                        <div>카테고리</div>
                        <div>카테고리</div>
                        <div>카테고리</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery';
    export default {
        name: "page2",
        mounted(){
            /* Nav 처리 */
            $(".nav-box-circle").removeClass("nav-box-selected");
            for(var x=0;x<$(".nav-box-circle").length;x++){
                if(!$(".nav-box-circle").eq(x).hasClass("nav-box-default")){
                    $(".nav-box-circle").eq(x).addClass("nav-box-default")
                }
            }
            $(".nav-box-circle").eq(1).removeClass("nav-box-default");
            $(".nav-box-circle").eq(1).addClass("nav-box-selected");


            /* Slide 처리 */
            {
                /* Show */
                $("#page2-slide-show").click(function(){
                    $("html").css({"overflow":"hidden"});
                    $("#page2-slide").removeClass("page2-slide-hidden");
                    $("#page2-slide").addClass("page2-slide-show");
                });

                /* Close */
                $("#page2-slide").click(function(e){
                    var target = e.target.className;
                    if(target == "page2-slide-show"){
                        $("#page2-slide").removeClass("page2-slide-show");
                        $("#page2-slide").addClass("page2-slide-hidden");
                        $("html").css({"overflow":"auto"});
                    }
                });
            }
        }
    }
</script>

<style scoped>
    /* Head */
    #page2{ width:inherit; }
    #page2-head{ width:inherit; border-bottom:1px #D8D8D8 solid; height:70px; position:fixed; z-index:10; top:0;
        left:50%; transform: translateX(-50%); background-color:white; color:black; text-align:center; line-height:70px; font-size:30px; font-weight:bold; }


    /* Slide */
    #page2-slide{ transition:all .3s linear; position:fixed; width:100%; height:100%; top:0; z-index:70; }
    #page2-shadow{ box-shadow: 0 14px 28px rgba(0,0,0,0.05), 0 10px 10px rgba(0,0,0,0.12); height:100%; position:absolute; width:70%; right:0; }
    #page2-slide-head{ width:100%; position:absolute; z-index:62; border-bottom:1px #D8D8D8 solid; right:0; height:70px; color:black; text-align:center; background-color:white; line-height:70px; font-size:30px; font-weight:bold; }
    #page2-slide-box{ width:100%; position:absolute; height:calc(100vh - 71px); background-color:white; z-index:61; top:71px; right:0; float:right; }
    #page2-slide-scroll{ height:100%; overflow-y:scroll; }
    #page2-slide-box div div{ height:80px; }

    .page2-slide-hidden{ transition:all .4s; right:-100%; }
    .page2-slide-show{ transition:all .4s; right:0; }
</style>

 

 

 

슬라이드 메뉴 동작 영상

 

슬라이드 메뉴 동작 영상