최신 웹 개발 튜토리얼
 

방법 - 사이드 탐색

❮ 이전 다음 장 ❯

애니메이션, 폐쇄 측면 탐색 메뉴를 만드는 방법에 대해 알아보십시오.






살아 움직이는듯한 사이드 탐색 만들기

1 단계) 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>

<!-- Use any element to open the sidenav -->
<span onclick="openNav()">open</span>

<!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page -->
<div id="main">
  ...
</div>
2 단계) CSS를 추가 :

예

/* 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 */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* 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, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px !important;
    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: 20px;
}

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
3 단계) 자바 스크립트를 추가합니다

상기 측면 탐색 슬라이드 아래 예와는 250 픽셀 폭한다 :

Sidenav 오버레이 예

/* Set the width of the side navigation to 250px */
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

/* Set the width of the side navigation to 0 */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
»그것을 자신을 시도

측면 탐색 슬라이드 아래 예와 (또한 "페이지 콘텐츠"의 왼쪽 마진을 설정하는 데 사용되는 sidenav의 폭을 설정하는 값) 우측 페이지의 콘텐츠를 푸시 :

콘텐츠 푸시 Sidenav

/* Set the width of the side navigation 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 navigation 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";
}
»그것을 자신을 시도

아래의 예는 또한 측면 탐색에 슬라이드하고, 오직이 시간, 우리는, 몸의 요소에 40 %의 불투명도에 검정색 배경 색상을 추가 오른쪽에있는 페이지의 콘텐츠를 밀어 "highlight" 측면 탐색 :

/ 불투명도 w 내용 밀어 Sidenav

/* Set the width of the side navigation to 250px and the left margin of the page content to 250px and add a black background color to body */
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 navigation to 0 and the left margin of the page content to 0, and the background color of body to white */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
    document.body.style.backgroundColor = "white";
}
»그것을 자신을 시도

왼쪽 측면 탐색 슬라이드 아래 예와 전체 페이지 커버 (100% width) :

전체 폭을 Sidenav :

/* Open the sidenav */
function openNav() {
    document.getElementById("mySidenav").style.width = "100%";
}

/* Close/hide the sidenav */
function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
»그것을 자신을 시도

아래의 예는 열리고 애니메이션없이 측면 탐색 메뉴습니다 :

애니메이션없이 Sidenav

/* Open the sidenav */
function openNav() {
    document.getElementById("mySidenav").style.display = "block";
}

/* Close/hide the sidenav */
function closeNav() {
    document.getElementById("mySidenav").style.display = "none";
}
»그것을 자신을 시도

팁 : 우리의 이동 CSS Navbar의 튜토리얼 탐색 모음에 대한 자세한 내용을 보려면.


❮ 이전 다음 장 ❯