슬라이드 인 탐색 오버레이

toggle을 클릭하면 왼쪽에서 슬라이드하는 off-screen nav에 대한 템플릿이 있습니다. 내가 무엇을하고 싶은지 nav 슬라이드, 오버레이가 그 뒤에 내용을 어둡게합니다. 이렇게하려면 div 페이지 콘텐츠를 감싸고 내용을 커버하는 BG 색상을 추가하려고했지만 작동하지 않습니다.슬라이드 인 탐색 오버레이

아무도 도와 줄 수 있습니까? 아래 코드 :

$(document).ready(function() { 
 
\t var toggle = $('.toggle'); 
 
\t var osNav = $('.offScreen-nav'); 
 
\t var pageContainer = $('.page-container'); 
 
\t 
 
\t toggle.click(function() { 
 
\t \t osNav.toggleClass('showNav'); 
 
\t \t pageContainer.toggleClass('navOnScreen') 
 
\t }); 
 
})

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t overflow: hidden; 
 
} 
 

 
nav { 
 
\t width: 100%; 
 
\t height: 70px; 
 
\t //border: 1px solid; 
 
\t background-color: #f1f1f1; 
 
\t display: flex; 
 
\t flex-direction: row; 
 
\t justify-content: flex-end; 
 
} 
 

 
.toggle { 
 
\t height: 50px; 
 
\t width: 50px; 
 
\t border: 1px solid; 
 
\t background-color: rgba(17,17,17, .9); 
 
\t opacity: .9; 
 
\t margin: 20px 15px; 
 
\t cursor: pointer; 
 
\t align-self: center; 
 
} 
 

 
main { 
 
\t height: 1000px; 
 
\t background-color: #ddd; 
 
} 
 

 
.offScreen-nav { 
 
\t width: 340px; 
 
\t height: 100vh; 
 
\t position: fixed; 
 
\t margin-left: 0; 
 
\t overflow: hidden; 
 
\t z-index: 2000; 
 
\t background-color: rgba(17,17,17, .9); 
 
\t transition: all .3s ease-in-out; 
 
\t transform: translate3d(-340px,0,0); 
 
} 
 

 
.showNav { 
 
\t transform: translate3d(0,0,0); 
 
} 
 

 
.page-container { 
 
\t transform: translate3d(0,0,0); 
 
\t transition: all .3s ease-in-out; 
 
\t transition-delay: .1s; 
 
} 
 

 
.page-container.navOnScreen { 
 
\t background-color: rgba(0,0,0, .6); 
 
\t transform: translate3d(20px,0,0); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="offScreen-nav"></div> 
 

 
<div class="page-container"> 
 
\t <nav> 
 
\t <div class="toggle"></div> 
 
</nav> 
 
\t <main></main> \t 
 
</div>

출처

2017-11-09 Theodore Steiner

은 내가 일반적으로 할 또 다른 요소라는 오버레이를 추가하고 그 효과를 생산하기 위해 탐색 항목을 전환하는로 전환합니다. 오버레이가 활성화되어있을 때 Z- 인덱스를 적용하여 표시 상태를 유지해야하므로 위치를 절대적으로 지정할 수 있으므로 토글 버튼을 탐색 메뉴에서 이동할 수도 있습니다. 아래를보십시오 ... 희망이 도움이됩니다!

$(document).ready(function() { 
 
\t var toggle = $('.toggle'); 
 
\t var osNav = $('.offScreen-nav'); 
 
\t var overlay = $('.overlay'); 
 
\t var pageContainer = $('.page-container'); 
 
\t 
 
\t toggle.click(function() { 
 
\t \t osNav.toggleClass('showNav'); 
 
\t \t overlay.toggleClass('showNav'); 
 
\t \t pageContainer.toggleClass('navOnScreen') 
 
\t }); 
 
})

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t overflow: hidden; 
 
} 
 

 
nav { 
 
\t width: 100%; 
 
\t height: 70px; 
 
\t //border: 1px solid; 
 
\t background-color: #f1f1f1; 
 
\t display: flex; 
 
\t flex-direction: row; 
 
\t justify-content: flex-end; 
 
} 
 

 
.toggle { 
 
    height: 50px; 
 
    width: 50px; 
 
    border: 1px solid; 
 
    background-color: rgba(17,17,17, .9); 
 
    opacity: .9; 
 
    /* margin: 20px 15px; */ 
 
    cursor: pointer; 
 
    align-self: center; 
 
    position: absolute; 
 
    top: 10px; 
 
    right: 15px; 
 
    z-index: 2; 
 
} 
 

 
main { 
 
\t height: 1000px; 
 
\t background-color: #ddd; 
 
} 
 

 
.offScreen-nav { 
 
\t width: 340px; 
 
\t height: 100vh; 
 
\t position: fixed; 
 
\t margin-left: 0; 
 
\t overflow: hidden; 
 
\t z-index: 2000; 
 
\t background-color: rgba(17,17,17, .9); 
 
\t transition: all .3s ease-in-out; 
 
\t transform: translate3d(-340px,0,0); 
 
} 
 

 
.showNav { 
 
\t transform: translate3d(0,0,0); 
 
} 
 

 
.page-container { 
 
\t transform: translate3d(0,0,0); 
 
\t transition: all .3s ease-in-out; 
 
\t transition-delay: .1s; 
 
} 
 

 
.page-container.navOnScreen { 
 
\t background-color: rgba(0,0,0, .6); 
 
\t transform: translate3d(20px,0,0); 
 
} 
 
.overlay.showNav { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    background: blue; 
 
    position: fixed; 
 
    z-index: 1; 
 
} 
 
.overlay{ 
 
\t transition:0.3s ease; \t 
 
    opacity: 0.5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="offScreen-nav"></div> 
 
<div class="overlay"></div> 
 
<div class="toggle"></div> 
 

 
<div class="page-container"> 
 
\t <nav> 
 
</nav> 
 
\t <main></main> \t 
 
</div>

출처

2017-11-09 16:26:45

JS에서, 같은 (이것은 현재 body의 배경 색상을 겹치는)뿐만 아니라 nav & main에서

을 background-color을 제거

// Toggle a class which removes background-color from main & nav 
nav.toggleClass('remove-bg') 
main.toggleClass('remove-bg')

CSS에서

:이 도움이

$(document).ready(function() { 
 
\t var toggle = $('.toggle'); 
 
\t var osNav = $('.offScreen-nav'); 
 
\t var pageContainer = $('.page-container'); 
 
\t var nav = $('nav'); 
 
    var main = $('main'); 
 
\t 
 
\t toggle.click(function() { 
 
\t \t osNav.toggleClass('showNav'); 
 
\t \t pageContainer.toggleClass('navOnScreen') 
 
    nav.toggleClass('remove-bg') 
 
    main.toggleClass('remove-bg') 
 
\t }); 
 
})

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t overflow: hidden; 
 
} 
 

 
nav { 
 
\t width: 100%; 
 
\t height: 70px; 
 
\t //border: 1px solid; 
 
\t background-color: #f1f1f1; 
 
\t display: flex; 
 
\t flex-direction: row; 
 
\t justify-content: flex-end; 
 
    transition: all .3s ease-in-out; 
 
\t transition-delay: .1s; 
 
} 
 

 
.toggle { 
 
\t height: 50px; 
 
\t width: 50px; 
 
\t border: 1px solid; 
 
\t background-color: rgba(17,17,17, .9); 
 
\t opacity: .9; 
 
\t margin: 20px 15px; 
 
\t cursor: pointer; 
 
\t align-self: center; 
 
} 
 

 
main { 
 
\t height: 1000px; 
 
\t background-color: #ddd; 
 
    transition: all .3s ease-in-out; 
 
\t transition-delay: .1s; 
 
} 
 

 
.offScreen-nav { 
 
\t width: 340px; 
 
\t height: 100vh; 
 
\t position: fixed; 
 
\t margin-left: 0; 
 
\t overflow: hidden; 
 
\t z-index: 2000; 
 
\t background-color: rgba(17,17,17, .9); 
 
\t transition: all .3s ease-in-out; 
 
\t transform: translate3d(-340px,0,0); 
 
} 
 

 
.showNav { 
 
\t transform: translate3d(0,0,0); 
 
} 
 

 
.page-container { 
 
\t transform: translate3d(0,0,0); 
 
\t transition: all .3s ease-in-out; 
 
\t transition-delay: .1s; 
 
} 
 

 
.page-container.navOnScreen { 
 
\t background-color: rgba(0,0,0, .6); 
 
\t transform: translate3d(20px,0,0); 
 
} 
 

 
.remove-bg { 
 
    background: transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="offScreen-nav"></div> 
 

 
<div class="page-container"> 
 
\t <nav> 
 
\t <div class="toggle"></div> 
 
</nav> 
 
\t <main></main> \t 
 
</div>

희망 :

/* Resetting background-color to transparent */ 
.remove-bg { 
    background: transparent; 
} 

/* To get the transition well */ 
main, nav { 
    transition: all .3s ease-in-out; 
    transition-delay: .1s; 
}

아래의 코드 조각에서보세요!

출처

2017-11-09 15:33:36

당신은 같은 것을 할 수 있습니다

$(document).ready(function() { 
 
    var toggle = $('.toggle'); 
 
    var osNav = $('.offScreen-nav'); 
 
    var pageContainer = $('.page-container'); 
 
    var darkLayer = $('main, nav'); 
 

 
    toggle.click(function() { 
 
    $(this).toggleClass('border'); 
 
    osNav.toggleClass('showNav'); 
 
    darkLayer.toggleClass('darkLayer'); 
 
    pageContainer.toggleClass('navOnScreen'); 
 
    }); 
 
})

* { 
 
\t margin: 0; 
 
\t padding: 0; 
 
\t overflow: hidden; 
 
} 
 

 
nav { 
 
\t width: 100%; 
 
\t height: 70px; 
 
\t //border: 1px solid; 
 
\t background-color: #f1f1f1; 
 
\t display: flex; 
 
\t flex-direction: row; 
 
\t justify-content: flex-end; 
 
} 
 

 
.toggle { 
 
\t height: 50px; 
 
\t width: 50px; 
 
\t border: 1px solid; 
 
\t background-color: rgba(17,17,17, .9); 
 
\t opacity: .9; 
 
\t margin: 20px 15px; 
 
\t cursor: pointer; 
 
\t align-self: center; 
 
} 
 

 
main { 
 
\t height: 1000px; 
 
\t background-color: #ddd; 
 
} 
 

 
.offScreen-nav { 
 
\t width: 340px; 
 
\t height: 100vh; 
 
\t position: fixed; 
 
\t margin-left: 0; 
 
\t overflow: hidden; 
 
\t z-index: 2000; 
 
\t background-color: rgba(17,17,17, .9); 
 
\t transition: all .3s ease-in-out; 
 
\t transform: translate3d(-340px,0,0); 
 
} 
 

 
.showNav { 
 
\t transform: translate3d(0,0,0); 
 
} 
 

 
.page-container { 
 
\t transform: translate3d(0,0,0); 
 
\t transition: all .3s ease-in-out; 
 
\t transition-delay: .1s; 
 
} 
 

 
.page-container.navOnScreen { 
 
\t background-color: rgba(0,0,0,.6); 
 
\t transform: translate3d(20px,0,0); 
 
} 
 

 
.darkLayer { 
 
    background: #333; 
 
    opacity: .5; 
 
    transition: all .3s linear; 
 
} 
 

 
.border { 
 
    border-color: #fff; 
 
    transition: all .3s linear; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="offScreen-nav"></div> 
 

 
<div class="page-container"> 
 
    <nav> 
 
    <div class="toggle"></div> 
 
    </nav> 
 
    <main></main> \t 
 
</div>

출처

2017-11-09 15:39:43 VXp

슬라이드 인 탐색 오버레이

답변

관련 문제