Menu
-
체크박스를 이용해 슬라이드 메뉴 만들기(뒷 배경 블러효과)CSS 2023. 2. 13. 13:46
javascript없이 CSS만 사용합니다! 기본적인 틀은, 웹 브라우저의 화면에 보이지않는 곳(화면 바깥)에 메뉴를 만들어 놓은 후 체크박스의 체크 여부에 따라 보이는 화면에 들어오고 나가는 개념입니다. 메뉴 1 메뉴 2 메뉴 3 메뉴 4 썸네일 상에 보이는 네비게이션 바는 다루지 않습니다! 메뉴, 메뉴를 보여주는 버튼, 메뉴를 닫는 버튼 크게 3가지로 나뉘어집니다. -1 // 기존 체크박스 없애기 #openMenu{ display: none; } -2 // 메뉴오픈 버튼의 영역 및 위치속성 #openMenuLabel { display: block; position: absolute; right: 24px; top: 16px; width: 34px; height: 22px; cursor: pointer..