Pure CSS Side Toggle Menu

카테고리 : 웹 프로그래밍/HTML

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

 

 

저작권 보호안내
무단 전재, 재배포 행위는 금지됩니다. (글을 복사하여 게시금지)
본문의 일부(링크용 문장) 인용은 가능하지만, 출처와 링크(a 태그)를 남기셔야 됩니다.
(웹툴을 이용하고, 스크린샷/녹화하는것은 상관없습니다.)

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

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

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

 댓글 (0개)