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

この記事は2014年11月7日に書かれたもので、内容が古い可能性がありますのでご注意ください。

フェイスブックアプリなどにある画面横からスライドして出てくるメニューを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;
}

サンプル

Tweet about this on TwitterShare on FacebookShare on Google+Pin on PinterestShare on TumblrPrint this pageEmail this to someone

ads

ページトップへ

© hifi-dev All Rights Reserved.
kenboh
profile
kenboh

follow