FLINTERS Engineer's Blog

FLINTERSのエンジニアによる技術ブログ

HTML5/CSS3 メニューの作り方

久しぶりの投稿です。みたけです。

最近、iosAndroidHTML5を使う機会が増えてきたので、そのTOPICをの書いていこうと思ってます。

今回はFacebookやPathなどでよく使われている左上のメニューについて。


押すとメニューが表示され、メイン画面は右側にスライドされているようにみえる動きですね。
私は、この動き、分かりやすいので好きです。

今回はHTML5CSSでの実装を説明していこうと思っています。
色々とライブラリは出てますが、今回はそれを使わず、自作にてやる方法です。

今回のイメージはこんな感じ。
かなりシンプルに、headerにメニューボタンのみを表示。
f:id:k_chindamaikul:20150722155449p:plain
メニューを押すと、こんな感じになります。
f:id:k_chindamaikul:20150722155515p:plain
まずはHTML5から。

<body>
<nav id="navisample">
 <ul>
  <li><a href="#">Menu</a></li>
  <li><a href="#">What's new!</a></li>
  <li><a href="#">Recruit</a></li>
  <li><a href="#">CompanyInfo</a></li>
  <li><a href="#">IR Info</a></li>
  <li><a href="#">Contact</a></li>
 </ul>
</nav>
<header id="header">
	<a href="#" class="menu_sample">MENU</a>
</header>
<footer>
	&copy; slider Menu Sample
</footer>
</body>


次はCSSCSSにてメニューの部分を左側に動かしています。

#navisample {
	position: absolute;
	top: 0;
	width: 220px;
	left: -220px;
}


次にJavascript。ここも動作部分のみ掲載。css/translateを使って画面を動かしてます。

$('body').css({
  '-moz-transform': 'translate(220px.0)',
  'transform':'translate(220px,0)',
  '-webkit-transform':'translate(220px,0)',
})


代表的なライブラリとしては、cssPanelMenu、PageSlide あたりですね。
これを使うと、より簡単に実装可能です。
facebook メニュー CSS 等で検索するといっぱい出てきますので、こちらを参考にしてみてください。

次回はアプリでの実装を紹介していこうと思ってます。