わざログ

2013.12.13

横からニュルっとスルっとあいつがでてくる。jQueryドロワーメニュープラグイン【jSlideMenu】を使ってみた

  • このエントリーをはてなブックマークに追加

ライター:マツモトカズマ

マツモトですよマツモト

ずいぶんと前に日本列島に寒気がやって参りましたね。最近はこたつの中で横になりながらジャンプ片手にみかん片手に、ついでにテレビ見ながらごろごろしてることを思い浮かべながら布団に入るのがついつい日課になってるエンジニアの松本です。

長めの自己紹介はさておき、本日は今ノリにノッているあのイケてるドロワーメニューを使ってみたいと思います。

知らないやつはもういない、ドロワーメニュー


google.com スマホ版

巷で噂のドロワーメニュー。FacebookアプリやGoogleサイト(*右画像)など、だれもが利用しているアプリやWebサービスで導入されています。横からニュルっとスルっとでてくるあのメニューこそ、ドロワーメニュー張本人です。あのニュルニュル感が気持ちいいから、ついつい何回も何十回も何百回も角っちょのメニューアイコンを押しちゃうんですよね。ああ気持ちいい


jQuery jSlideMenu


今回ドロワーメニューを導入する際に使用したのはjQueryプラグイン【jSlideMenu】。Webではしっくりとくるドロワーメニューの見せ方がみつからず、Google先生をお手本に作者さんが作ったそうな。(詳しいお話は作者さんページへ)
たしかに僕もいくつか探して導入してみたんですが、反応が鈍かったりバージョンの古いブラウザでは動かなかったりと、全然気持ちよくありませんでした。しかしこの【jSlideMenu】超気持ちいいのでぜひ一度お試しください。

Let's 導入してみようぜ。

さっそくですが、導入してみたいと思います。
こちらよりzipファイルをまるまるダウンロードしてきました。その中にあるjquery.slidemenu.jsファイルと、jquery.slidemenu.cssを使用します。

HTML

head部分
<link rel="stylesheet" type="text/css" href="css/jquery.slidemenu.css" />
<style type="text/css">
/*レイアウトに関する記述*/
#header {
	width: 100%;
	padding: 15px;
	background: #eee;
	border-bottom: 1px solid #ddd;
}

#drawerBtn a {
	font-size: 30px;
	font-weight: bold;
	color: #000;
}

#drawer ul li a {
	display: block;
	padding: 10px 15px;
	font-weight: bold;
	color: #fff;
	text-shadow: -1px -1px 0 #000;
	border-bottom: 1px solid #000;
	box-shadow: 0 1px 0 #555;
}

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slidemenu.js"></script>
<script type="text/javascript">
//ドロワーメニュー
$(function(){
	$("#drawerBtn a").slideMenu({  //ボタン要素の指定
		main_contents: "#container",  //メインコンテンツの指定
		menu: "#drawer",  //ドロワーメニューの大枠要素の指定
		menu_contents: "#drawerContents",  //ドロワーメニューの中枠要素の指定
		menu_list: "#drawerList",  //ドロワーメニューのリスト要素の指定
		bottom_margin: 120 //ドロワーメニューの下余白
	});
});
</script>
body部分
<div id="container"><!-- メインコンテンツ -->
  <div id="header">
    <div id="drawerBtn"><a href="#">≡</a></div>
  </div>
  <div id="main">
    <!-- ページ内容 -->
  </div>
</div>
<div id="drawer">
  <div id="drawerContents">
    <ul id="drawerList">
      <li><a href="#">Menu01</a></li>
      <li><a href="#">Menu02</a></li>
      <li><a href="#">Menu03</a></li>
      <li><a href="#">Menu04</a></li>
      <li><a href="#">Menu05</a></li>
      <li><a href="#">Menu06</a></li>
      <li><a href="#">Menu07</a></li>
      <li><a href="#">Menu08</a></li>
      <li><a href="#">Menu09</a></li>
      <li><a href="#">Menu10</a></li>
    </ul>
  </div>
</div>

css

jquery.slidemenu.css変更箇所
#container { /*メインコンテンツ要素へ変更*/
	background: #FFFFFF;
	-webkit-transform: translate3d(0px, 0px, 1px);
	-webkit-transition: .2s -webkit-transform ease-in-out;
	z-index: 1;
}

#container.show { /*メインコンテンツ要素へ変更*/
	-webkit-transform: translate3d(240px, 0px, 1px);
	min-width: 320px;
}

#drawer.show {  /*ドロワーメニュー大枠要素へ変更*/
    height: 100%;
    visibility: visible;
    z-index: 1;
    -webkit-transition: z-index 0s linear .2s;
 }

#drawerContents {  /*ドロワーメニュー中枠要素へ変更*/
	display: none;
	height: 100%;
	position: relative;
	width: 240px;
}

#drawer {  /*ドロワーメニュー大枠要素へ変更*/
	background-color: #333;
	top: 0;
	position: fixed;
	visibility: hidden;
	z-index: -1;
	-webkit-transition: visibility 0s linear .2s;
 }

ちなみにこのプラグインはontouchイベントを利用しているのでPCでは動作しません。ローカル等での動作確認は、一時的にマウスイベントに置き換えるとPCブラウザでもテストができます。

サンプルはこちらからどうぞ。(確認はスマホもしくはタブレット端末で)

これだけぬるっと動いてるからjavascript使ってアニメーションしてるんでしょって思ったんですけど、CSS3のtranslate3dというものを使っているようです。javascriptではクラスの切替を行い…って作者さんページに詳しいことが書かれているので、そちらをご覧ください。

最後に…

ライセンスや使用の可否が記載されていなかったための作者さんに問い合わせをしたところ、

  • ライセンスはMIT Licenseでお願いします。
  • 商用利用でもOKです。

とのことでした!素敵なお方ですね!という訳で、今日からあなたもニュルニュルライフ、楽しんでくださいね!ああ気持ちいい

サンプルはこちらからどうぞ。(確認はスマホもしくはタブレット端末で)


comments powered by Disqus

関連のある記事

関連のある記事はありません
ページ先頭へ戻る