Pure CSS Side Toggle Menu

카테고리 : 웹 프로그래밍/HTML 2020. 6. 9. 22:27

CSS만으로도 Side 메뉴(클릭 및 닫기 가능한)를 만들 수 있을것 같아서 만들어봤는데 성공했다.

 

IE9+ 로 IE9 이상의 모든 브라우저는 지원가능하다.

 

원리부터 말해보자면

label과 checkbox를 활용하였다.

 

CSS로 아래와 같이 표현가능하다.

input[id="ch"]:checked + label{
	/* CSS if checked */
}
input[id="ch"] + label{
	/* CSS if not checked */
}
CSS

 

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>
HTML

#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>
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 태그)를 남기셔야 됩니다.
(웹툴을 이용하고, 스크린샷/녹화하는것은 상관없습니다.)

예외적으로. 저에게 허락받은 경우에는 본문을 전재할 수 있습니다.

만약, 본문 공유를 원하신다면 링크 공유를 해주세요

저작권 정책 확인하기
링크 공유하기

 댓글