hifi-dev

スマホサイトによくあるドロワーメニューをcss3のみで作成

2014年11月7日 css , html

フェイスブックアプリなどにある画面横からスライドして出てくるメニューをcss3のみで作成。

対象ブラウザは以下を想定。IE9はアニメーションはしませんが動作はします。

• ios 4以上
• android 2.3以上
• IE10以上
• モダンブラウザ

まずはhtml。
大枠の#containerの下に#drawerSlideMenuがあり、
#container自体を移動させ#drawerSlideMenuを表示させます。

html

<input type="checkbox" id="checkBox1">
<div id="container">
<label for="checkBox1" id="checkBox1Label" onclick=""></label>
<!-- /#container --></div>
<div id="drawerSlideMenu">
<nav>
<ul>
<li><a href="dummy.html">MENU 1</a></li>
<li><a href="dummy.html">MENU 2</a></li>
<li><a href="dummy.html">MENU 3</a></li>
</ul>
</nav>
<!-- /#drawerSlideMenu --></div>

続いてcss。
動作させるポイントはチェックボックスのon・offで制御させます。
チェックボックスが:checkedの時に隣接セレクタで#containerを移動させます。
隣接セレクタを使用しているためチェックボックスを移動させると動作しなくなります。

css

/* #drawerSlideMenu */
body {
	overflow-x: hidden;
}
#checkBox1{
	display: none;
}
#checkBox1Label {
	display: block;
	width: 30px;
	height: 30px;
	background-color: red;
	cursor: pointer;
}
#drawerSlideMenu {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 80%;
	background-color: #333;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
#drawerSlideMenu ul {
	margin: 0;
	padding-left: 0;
	list-style-type: none;
}
#drawerSlideMenu ul li a {
	display: block;
	padding: 10px;
	background: #000;
	color: #fff;
	text-decoration: none;
}
#checkBox1:checked + #container {
	left: 80%;
}
#container {
	position: relative;
	left: 0;
	z-index: 1;
	background-color: #fff;
	-webkit-transition: left .3s ease-in-out;
	-moz-transition: left .3s ease-in-out;
	-o-transition: left .3s ease-in-out;
	transition: left .3s ease-in-out;
}

サンプル

css , html kenboh

ads