wiki:howto:how_to_-_off-canvas_menu
HOW TO - Off-Canvas Menu
- description : How TO - Off-Canvas Menu
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-04-12
Ref
Create an Off-Canvas Menu
예제
Step 1) Add HTML
<div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</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()">☰ open</span> </div>
예제
Step 2) Add CSS
<style> body {font-family: "Lato", sans-serif;25; /* 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 */ 25; /* The navigation menu links */ .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; 25; /* When you mouse over the navigation links, change their color */ .sidenav a:hover {color: #f1f1f1;25; /* Position and style the close button (top right corner) */ .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; 25; /* 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;25; /* 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;25; .sidenav a {font-size: 18px;25; 25; </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"; 25; /* 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"; 25; <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;25; /* 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 */ 25; /* The navigation menu links */ .sidenav a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 25px; color: #818181; display: block; transition: 0.3s; 25; /* When you mouse over the navigation links, change their color */ .sidenav a:hover {color: #f1f1f1;25; /* Position and style the close button (top right corner) */ .sidenav .closebtn { position: absolute; top: 0; right: 25px; font-size: 36px; margin-left: 50px; 25; /* 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;25; /* 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;25; .sidenav a {font-size: 18px;25; 25; </style> </head> <body> <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</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()">☰ 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)"; 25; /* 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"; 25; </script> </body> </html>
/volume1/web/dokuwiki/data/pages/wiki/howto/how_to_-_off-canvas_menu.txt · 마지막으로 수정됨: 2023/01/13 18:44 (바깥 편집)
별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
