CSS

【CSS】CSSで開発されたオフキャンバス効果を備えたシンプルなレスポンシブナビゲーションメニューMenu Off-Canvas

July 22, 2018
Menu Off-Canvas (Pure CSS)

Menu Off-CanvasはCSSで開発されたオフキャンバス効果を備えた、シンプルなレスポンシブナビゲーションメニュー。

HTML

	<!-- Mobile Bar & Menu Icon -->
	<input type="checkbox" class="menu-toggle" id="menu-toggle">
	<div class="mobile-bar">
		<label for="menu-toggle" class="menu-icon">
				<span></span>
			</label>
	</div>
	
	<!-- Header -->
	<header class="header">
		<nav>
			<ul>
				<li><a href="#">Item 1</a></li>
				<li><a href="#">Item 2</a></li>
				<li><a href="#">Item 3</a></li>
				<li><a href="#">Item 4</a></li>
				<li><a href="#">Item 5</a></li>
			</ul>
		</nav>
	</header>

MIT