차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:hotwo:how_to_-_off-canvas_menu [2021/04/12 09:00]
emblim98
+++ — (현재)
@@ 줄 1: / 줄 1: @@
-======HOW TO - Off-Canvas Menu======
-<WRAP left notice 80%>
-  * description : How TO - Off-Canvas Menu
-  * author      : 오션
-  * email       : shlim@repia.com
-  * lastupdate  : 2021-04-12
-</WRAP>
-<WRAP clear></WRAP>
-\\
-====Ref====
-[[https://www.w3schools.com/howto/howto_js_off-canvas.asp|How TO - Off-Canvas Mnu]]\\
-=====Create an Off-Canvas Menu=====
-====예제====
-Step 1) Add %%HTML%%
-<code html>
-    <div id="mySidenav" class="sidenav">
-        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
-        <a href="#">About</a>
-        <a href="#">Services</a>
-        <a href="#">Clients</a>
-        <a href="#">Contact</a>
-    </div>
-    <div id="main">
-        <h2>Sidenav Push Example</h2>
-        <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
-        <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
-    </div>
-</code>
-====예제====
-Step 2) Add %%CSS%%\\
-<code css>
-    <style>
-        body {font-family: "Lato", sans-serif;}
-        /* The side navigation menu */
-        .sidenav {
-            height: 100%;       /* 100% Full-height */
-            width: 0;           /* 0 width - change this with JavaScript */
-            position: fixed;    /* Stay in place */
-            z-index: 1;         /* Stay on top */
-            top: 0;
-            left: 0;
-            background-color: #111; /* Black */
-            overflow-x: hidden;     /* Disable horizontal scroll */
-            transition: 0.5s;       /* Place content 60px from the top */
-            padding-top: 60px;      /* 0.5 second transition effect to slide in the side nav */
-        }
-        /* The navigation menu links */
-        .sidenav a {
-            padding: 8px 8px 8px 32px;
-            text-decoration: none;
-            font-size: 25px;
-            color: #818181;
-            display: block;
-            transition: 0.3s;
-        }
-        /* When you mouse over the navigation links, change their color */
-        .sidenav a:hover {color: #f1f1f1;}
-        /* Position and style the close button (top right corner) */
-        .sidenav .closebtn {
-            position: absolute;
-            top: 0;
-            right: 25px;
-            font-size: 36px;
-            margin-left: 50px;
-        }
-        /* Style page content - use this if you want to push the page content
-        to the right when you open the side navigation */
-        #main {transition: margin-left .5s; padding: 16px;}
-        /* On smaller screens, where height is less than 450px,
-        change the style of the sidenav (less padding and a smaller font sixe) */
-        @media screen and (max-height: 450px) {
-            .sidenav {padding-top: 15px;}
-            .sidenav a {font-size: 18px;}
-        }
-    </style>
-</code>
-====예제====
-StEP 3) Add %%JavaScript%%\\
-Off-Canvas Menu\\
-<code javascript>
-<style>
-        /* Set the width of the side navagation to 250px and the left margin of the page content to 250px */
-        function openNav() {
-            document.getElementById("mySidenav").style.width = "250px";
-            document.getElementById("main").style.marginLeft = "250px";
-        }
-        /* Set the width of the side navagation to 0 and the left margin of the page content to 0 */
-        function closeNav() {
-            document.getElementById("mySidenav").style.width = "0";
-            document.getElementById("main").style.marginLeft = "0";
-        }
-<style>
-</code>
-\\
-아래 예제는 사이드 네비게이션을 슬라이드하고, 페이지 콘텐츠를 오른쪽으로 푸시합니다.\\
-바디 요소에 40% 불투명도(opacity)의 검정 배경색을 추가하여, 사이드 네비게이션을 "강조(highlight)"합니다.\\
-====Off-Canvas Menu w/ opacty====
-<code css>
-<!DOCTYPE html>
-<html>
-<head>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <style>
-        body {font-family: "Lato", sans-serif;}
-        /* The side navigation menu */
-        .sidenav {
-            height: 100%;
-            /* 100% Full-height */
-            width: 0;
-            /* 0 width - change this with JavaScript */
-            position: fixed;
-            /* Stay in place */
-            z-index: 1;
-            /* Stay on top */
-            top: 0;
-            left: 0;
-            background-color: #111;
-            /* Black */
-            overflow-x: hidden;
-            /* Disable horizontal scroll */
-            transition: 0.5s;
-            /* Place content 60px from the top */
-            padding-top: 60px;
-            /* 0.5 second transition effect to slide in the side nav */
-        }
-        /* The navigation menu links */
-        .sidenav a {
-            padding: 8px 8px 8px 32px;
-            text-decoration: none;
-            font-size: 25px;
-            color: #818181;
-            display: block;
-            transition: 0.3s;
-        }
-        /* When you mouse over the navigation links, change their color */
-        .sidenav a:hover {color: #f1f1f1;}
-        /* Position and style the close button (top right corner) */
-        .sidenav .closebtn {
-            position: absolute;
-            top: 0;
-            right: 25px;
-            font-size: 36px;
-            margin-left: 50px;
-        }
-        /* Style page content - use this if you want to push the page content
-        to the right when you open the side navigation */
-        #main {
-            transition: margin-left .5s; padding: 16px;}
-        /* On smaller screens, where height is less than 450px,
-        change the style of the sidenav (less padding and a smaller font sixe) */
-        @media screen and (max-height: 450px) {
-            .sidenav {padding-top: 15px;}
-            .sidenav a {font-size: 18px;}
-        }
-    </style>
-</head>
-<body>
-    <div id="mySidenav" class="sidenav">
-        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
-        <a href="#">About</a>
-        <a href="#">Services</a>
-        <a href="#">Clients</a>
-        <a href="#">Contact</a>
-    </div>
-    <div id="main">
-        <h2>Sidenav Push Example</h2>
-        <p>
-            Click on the element below to open the side navigation menu, and push this content to the right. <br>
-            Notice that we add a black see-through background-color to body when the sidenav is opened.
-        </p>
-        <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
-    </div>
-    <script>
-        /* Set the width of the side navagation to 250px and the left margin of the page content to 250px */
-        function openNav() {
-            document.getElementById("mySidenav").style.width = "250px";
-            document.getElementById("main").style.marginLeft = "250px";
-            document.body.style.backgroundColor = "rgba(0, 0, 0, 0.4)";
-        }
-        /* Set the width of the side navagation to 0 and the left margin of the page content to 0 */
-        function closeNav() {
-            document.getElementById("mySidenav").style.width = "0";
-            document.getElementById("main").style.marginLeft = "0";
-            document.body.style.backgroundColor = "white";
-        }
-    </script>
-</body>
-</html>
-</code>
-{{tag>오션, How to Off-Canvas Menu}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구