토글 및 메뉴 나오게 기능 수정

static/css/style.css

@@ -80,6 +80,7 @@
         font-weight:300;
         color:#901438;
         cursor:default;
+        text-align:center;
     }
     .nav__div .nav__title{padding-top:30px;writing-mode:vertical-lr;}
     .nav__div .uk-icon{cursor:pointer;}
@@ -87,16 +88,16 @@
     /* toggle menu */
     .menu__wrap{
         position:fixed;
-        right:0;
+        right:-440px;
         background:#e7e6e7;
         width:340px;
         height:100%;
-        padding:3%;
+        padding:50px 20px;
         z-index:1;
         display:none;
     }
     .menu__box{background:#fff;height:88%;border-radius:20px;}
-    .menu__close{position:absolute;top:10px;right:10px;cursor:pointer;}
+    .menu__close{position:absolute;top:20px;right:25px;cursor:pointer;}
     .menu__box ul{padding:8% 20%;}
     .menu__box ul li{font-size:20px;text-align:center;padding:30px 0;border-bottom:1px solid #e7e6e7;}
     .menu__box ul li:last-child{border-bottom:none;}
@@ -186,7 +187,7 @@
     .post__lists li:hover .lists__img{box-shadow:1px 1px 5px RGBA(144,20,68,0.2);}
 
     /* footer */
-    footer{width:100%;height:430px;background-color:#100e11;}
+    footer{width:100%;height:430px;background-color:#100e11;position:relative;z-index:9999;}
     .footer__inner{
         width:100%;
         max-width:1200px;

templates/base.html

@@ -66,6 +66,7 @@
     $(document).ready(function(){
         // 로그인 메뉴 활성화
         let check_state = 0;
+
         $(".login__section .user__nav__open").click(function(){
             if(check_state != 0){
                 $(this).find("span").attr("uk-icon","icon: triangle-down");
@@ -78,18 +79,18 @@
         });
 
         // 메뉴 토글
-        {#$(".menu__open").click(#}
-        {#    $(".menu__wrap").hide()#}
-        {##}
-        {#    $('.menu__wrap').toggle('slide', {#}
-        {#        direction: 'right'#}
-        {#    }, 400)#}
-        {#);#}
-        {##}
-        {#$('.menu__close').click(#}
-        {#    $('.menu__wrap').toggle('slide', {#}
-        {#        direction: 'right'#}
-        {#    }, 400)#}
-        {#);#}
-    });
+        $(".menu__open").click(function() {
+            $(".menu__wrap").show();
+            $(".nav__div").animate({"right":"-68px"}, 300, function(){
+                $(".menu__wrap").animate({"right":"0"}, 700);
+            });
+        });
+
+        $('.menu__close').click(function() {
+            $(".menu__wrap").animate({"right":"-440px"}, 700, function(){
+                $(".menu__wrap").hide();
+                $(".nav__div").animate({"right":"0"}, 300);
+            });
+        });
+    })
 </script>