CSS만으로도 Side 메뉴(클릭 및 닫기 가능한)를 만들 수 있을것 같아서 만들어봤는데 성공했다.
IE9+ 로 IE9 이상의 모든 브라우저는 지원가능하다.
원리부터 말해보자면
label과 checkbox를 활용하였다.
CSS로 아래와 같이 표현가능하다.
input[id="ch"]:checked + label{
/* CSS if checked */
}
input[id="ch"] + label{
/* CSS if not checked */
}
label 안에 기본적으로 보여줄 메뉴 버튼과 sidemenu를 넣었다.
<label>
<p id="menu_toggle">menu</p>
<input type="checkbox" id="menu_toggle_c">
<label id="sidemenu">
<ul>
<li><a href="#test">menu1</a></li>
<li><a href="#test2">menu2</a></li>
<li><a href="https://hi098123.tistory.com/">menu3</a></li>
<li>menu4</li>
</ul>
</label>
</label>#menu_toggle_c 는 display:none;를 하면 된다.
테스트시 어떻게 작동하나 보여주기 위해 적용은 안해놨다.
최종으로 닫기 버튼과 배경blur(흐림처리) 적용 후
따로 디자인은 하지 않았으나 어렵지 않게 디자인을 적용할 수 있을것이다.
<!DOCTYPE html>
<html>
<head>
<title>IE9+ CSS Side Menu</title>
</head>
<body>
<label>
<p id="menu_toggle">menu</p>
<input type="checkbox" id="menu_toggle_c">
<label id="sidemenu">
<label id="menu_close" for="menu_toggle_c">x</label>
<label id="menu_close_blur" for="menu_toggle_c"></label>
<ul>
<li><a href="#test">menu1</a></li>
<li><a href="#test2">menu2</a></li>
<li><a href="https://hi098123.tistory.com/">menu3</a></li>
<li>menu4</li>
</ul>
</label>
</label>
<style>
#menu_toggle{
display: inline-block;
}
input[id="menu_toggle_c"]:checked + #sidemenu{
display: block;
}
#sidemenu{
position: absolute;
top: 0;
z-index: 1;
background-color: #eee;
display: none;
height: 100vh;
overflow-y: scroll;
left: 0;
width: 250px;
}
#sidemenu > ul{
margin-top: 30px;
}
#menu_close{
position: absolute;
right: 10px;
top: 10px;
padding: 0 10px;
height: 1em;
line-height: 1em;
cursor: pointer;
}
#menu_close:hover{
background-color: #666;
color: #fff;
}
#menu_close_blur{
position: fixed;
z-index: 0;
opacity: .5;
background-color: #333;
width: 100%;
height: 100%;
left: 0;
top: 0;
margin-left: 250px;
}
</style>
<p>1111111111111111111111111111111111111111111111111111</p>
<p>1111111111111111111111111111111111111111111111111111</p>
<p>1111111111111111111111111111111111111111111111111111</p>
<p>1111111111111111111111111111111111111111111111111111</p>
<p>1111111111111111111111111111111111111111111111111111</p>
<p>1111111111111111111111111111111111111111111111111111</p>
<p>1111111111111111111111111111111111111111111111111111</p>
<p>1111111111111111111111111111111111111111111111111111</p>
<p>1111111111111111111111111111111111111111111111111111</p>
<p>1111111111111111111111111111111111111111111111111111</p>
<p>1111111111111111111111111111111111111111111111111111</p>
<p>1111111111111111111111111111111111111111111111111111</p>
</body>
</html>
Demo : https://hi098123.github.io/PureCSS-SideMenu/
IE9+ CSS Side Menu
1111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111 1111111111111111111111111111111111111111111111111111 11111111111111111111111111111111111111111111
hi098123.github.io
'웹 프로그래밍 > HTML' 카테고리의 다른 글
| CSS 선택자로 유튜브 링크에 아이콘 넣기 (0) | 2020.06.25 |
|---|---|
| CSS) list-style 다양한 종류 (list-style-type) (3) | 2020.06.25 |
| CSS content 깨지는 현상(주의점) (1) | 2020.06.23 |
| HTML) Link, Script 태그 integrity 옵션 (0) | 2020.06.18 |
| IE ')'가 필요합니다. 해결하기 (0) | 2020.06.09 |
| JS) 자바스크립트에서 스타일 바꾸기 (1) | 2020.06.08 |
| JS) 자바스크립트에서 " ' ` 따옴표, 억음 부호의 차이 (0) | 2020.06.08 |
| CSS) 투명도 조절하고 싶을때 (rgba, opacity) (0) | 2020.05.13 |
저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.
(웹툴을 이용하고, 스크린샷/녹화하는것은 상관없습니다.)
예외적으로. 저에게 허락받은 경우에는 본문을 전재할 수 있습니다.
만약, 본문 공유를 원하신다면 링크 공유를 해주세요
저작권 정책 확인하기링크 공유하기