-
체크박스를 이용해 슬라이드 메뉴 만들기(뒷 배경 블러효과)CSS 2023. 2. 13. 13:46
javascript없이 CSS만 사용합니다!
기본적인 틀은,
웹 브라우저의 화면에 보이지않는 곳(화면 바깥)에 메뉴를 만들어 놓은 후
체크박스의 체크 여부에 따라 보이는 화면에 들어오고 나가는 개념입니다.
<HTML>
<input type="checkbox" id="openMenu"> <label for="openMenu" id="openMenuLabel"> <span></span> <span></span> <span></span> </label> <div id="showMenu"> <div id="menuButtons"> <label for="openMenu" id="closeMenuLabel"> <span></span> <span></span> </label> </div> <div id="testText"> <p>메뉴 1</p> <p>메뉴 2</p> <p>메뉴 3</p> <p>메뉴 4</p> </div> </div>썸네일 상에 보이는 네비게이션 바는 다루지 않습니다!
메뉴, 메뉴를 보여주는 버튼, 메뉴를 닫는 버튼
크게 3가지로 나뉘어집니다.
<CSS> -1 // 기존 체크박스 없애기
#openMenu{ display: none; }<CSS> -2 // 메뉴오픈 버튼의 영역 및 위치속성
#openMenuLabel { display: block; position: absolute; right: 24px; top: 16px; width: 34px; height: 22px; cursor: pointer; }위치와 크기는 저의 기호에 맞게 작성하였습니다.
버튼에 마우스를 올릴 시 마우스 커서를 바꾸어 사용자의 가독성을 높여줍니다.
<CSS> -3 // 메뉴오픈 버튼(3선)의 선 굵기, 색상 등 공통속성
#openMenuLabel span { display: block; position: absolute; width: 100%; height: 3.5px; border-radius: 30px; background: rgb(193, 193, 193); }색상과 크기 등 span 태그 요소들의 공통적인 속성을 잡아줍니다.
<CSS> -4 // 각 선의 위치 속성
#openMenuLabel span:nth-child(1) { top: 0; } #openMenuLabel span:nth-child(2) { top: 50%; transform: translateY(-50%); } #openMenuLabel span:nth-child(3) { bottom: 0; }위, 아래 선은 0을 주어 label의 영역에 벗어나지 않는 선에서 최하단, 최상단에 위치시킵니다.
다만 두번 째인 가운데 선에 50%만 주게되면 span요소의 상단이 label 중간 영역에 맞춰 위치하게 됩니다.
하여 translateY(-50%)함수를 사용하게되면,
요소의 높이에 맞춰 -50%만큼 이동합니다.
즉 본인의 높이가 100px이라고 가정한다면 50px만큼 이동한다는 느낌으로 이해하면 됩니다.
<CSS> -5 // 열릴 메뉴의 속성
#showMenu { background-color: rgb(193, 193, 193); position: fixed; top:0; right: -300px; width: 300px; height: 100%; transition: .6s; }position: fixed 속성을 활용하여 메뉴의 기본 위치를 화면 바깥에 위치시켜 줍니다.
<CSS> -6 // 버튼 클릭 시 보여질 메뉴의 속성
#openMenu:checked ~ #showMenu { background-color: rgb(193, 193, 193); top:0; right: 0px; width: 300px; height: 100%; z-index: 3; }버튼이 클릭되면(체크박스가 체크되면) 메뉴의 위치를 이동시켜줍니다.
이 때 기본 속성에서 right로 잡아주었기 때문에 동일하게 right로 유지하지 않으면 애니메이션 속성이 적용되지 않습니다.
더불어 z-index: 3을 주었는데 이는 뒤에 나올 블러효과를 사용하기 위함입니다.
<CSS> -7 // 블러처리를 위한 기본 속성
#openMenuLabel::after { content: ""; position: fixed; left: 0; top: 0; display: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.05); backdrop-filter: blur(2px); }메뉴가 열렸을 때 메뉴 뒤의 배경을 블러처기 해주기 위함입니다.
label에 가상요소를 생성하여 줍니다.
생성 후 블러효과를 주고, display: none을 주어 평소에는 화면에 보이지 않도록 해줍니다.
<CSS> -8 // 메뉴가 열렸을 때 블러처리 영역 속성
#openMenu:checked ~ #openMenuLabel::after { display: inline; z-index: 2; }display: inline 속성으로 블러효과를 보이게 하고, z-index: 2를 줍니다.
메뉴에 3, 블러효과에 2를 주어 뒷 배경을 블러효과로 덮은 후 그 위에 메뉴를 덮어줍니다.
<CSS> -9 // 메뉴안에 위치할 버튼(들)의 영역 속성
#menuButtons { position: absolute; display: block; width: 100%; }닫기 버튼 외 다른 버튼이 추가 될 때 버튼들을 묶어줄 수 있는 영역을 만들어 줍니다.
<CSS> -10 // 닫기 버튼의 위치 속성
#closeMenuLabel { display: block; position: absolute; right: 16px; top: 16px; width: 34px; height: 22px; cursor: pointer; }메뉴 오픈 시 닫기 버튼의 위치를 잡아주고, 마우스 커서를 올렸을 시 가독성을 높이기 위해 'cursor: pointer'를 줍니다.
<CSS> -11 // 닫기 버튼의 선 굵기, 색상 등 공통속성
#closeMenuLabel span { display: block; position: absolute; width: 100%; height: 3.5px; border-radius: 30px; background: rgb(0, 0, 0); }우선 닫기 버튼의 굵기, 색상, 위치 등 공통적인 속성만 잡아줍니다.
<CSS> -12 // 각 선의 위치(기울기)속성
#closeMenuLabel span:nth-child(1){ top: 50%; transform: translateY(-50%) rotate(45deg); } #closeMenuLabel span:nth-child(2){ bottom: 50%; transform: translateY(50%) rotate(-45deg); }nth:-child()속성을 이용해 각 스팬태그 하나씩을 선택하여 기울기와 위치를 잡아주면 됩니다.
<CSS> -13 // test
#testText { position: absolute; top: 50px; width: 100%; }'CSS' 카테고리의 다른 글
체크박스를 이용해 토글 스위치(ON/OFF)만들기 (0) 2022.12.23