목차

HOW TO - Off-Canvas Menu

  • description : How TO - Off-Canvas Menu
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-04-12


Ref

How TO - Off-Canvas Mnu

Create an Off-Canvas Menu

예제

Step 1) Add 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>

예제

Step 2) Add 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>

예제

StEP 3) Add JavaScript
Off-Canvas Menu

<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>


아래 예제는 사이드 네비게이션을 슬라이드하고, 페이지 콘텐츠를 오른쪽으로 푸시합니다.
바디 요소에 40% 불투명도(opacity)의 검정 배경색을 추가하여, 사이드 네비게이션을 “강조(highlight)“합니다.

Off-Canvas Menu w/ opacty

<!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>
, , , ,