勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

jQueryでドロワーメニューの作成

  jQuery JavaScript

■やりたかった事

スマホ用サイトにドロワーメニューを設置したかった。

 

■方法

よさげなプラグインは2つあり。

 

1つ目はスワイプ(フリック?)非対応。

http://jquer.in/javascript-and-jquery-solutions-for-fantastic-mobile-websites/drawer-slide-menu/

CSSとJSファイルを呼び出して、必要なIDとか振るだけ。

 

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="jquery.mobile-menu.js"></script>
<script>
$(function(){
$("body").mobile_menu({
menu: ['#main-nav ul'],
menu_width: 200,
prepend_button_to: '#mobile-bar'
});
});
</script>
</head>
<body>
<nav id="mobile-bar"></nav>
<nav id="main-nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Nav 2</a></li>
<li><a href="#">Nav 3</a></li>
<li><a href="#">Nav 4</a></li>
<li><a href="#">Nav 5</a></li>
<li><a href="#">Nav 6</a></li>
</ul>
</nav>

</body>
</html>

 

※サンプル

http://sample.taitan916.info/drawer/

 


2つ目はスワイプ(フリック)対応。

https://github.com/be-hase/sp-slidemenu

 

<!DOCTYPE html>
<html lang="ja">
<head>
<link href="./css/styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="slidemenu slidemenu-left">
<div class="slidemenu-header">
<div>
Header
</div>
</div>
<div class="slidemenu-body">
<ul class="slidemenu-content">
<li><a class="menu-item" href="">Menu 1</a></li>
<li><a class="menu-item" href="">Menu 2</a></li>
<li><a class="menu-item" href="">Menu 3</a></li>
<li><a class="menu-item" href="">Menu 4</a></li>
<li><a class="menu-item" href="">Menu 5</a></li>
</ul>
</div>
</div>
<div id="main">
<header id="header"></header>
<span class="button menu-button-left"></span>
<div id="contents">
<p>
<a href="demo1.html">menu</a>
</p>
</div>
<!-- contents -->
</div>
<script src="sp-slidemenu.js" type="text/javascript"></script>
<script>
//<![CDATA[
var menu = SpSlidemenu({
main : '#main',
button: '.menu-button-left',
slidemenu : '.slidemenu-left',
direction: 'left'
});
//]]>
</script>
</body>
</html>

 

こちらはjqueryを用いてない模様。なので、scriptの位置気をつけないとダメっぽい。

といってもjquery読んでいるページでやるのであれば、

 

$(function(){
var menu = SpSlidemenu({
main : '#main',
button: '.menu-button-left',
slidemenu : '.slidemenu-left',
direction: 'left'
});

 

こうしてしまえばいい。

 

※サンプル
http://sample.taitan916.info/drawer2/

 


■その他

メニューのアイコンとか画像素材はこちらが良さそう。
https://www.iconfinder.com/icons/106200/menu_icon#size=24

 - jQuery JavaScript

  関連記事

FormDataを使ったAjax通信がiPhoneのみエラー

FormDataオブジェクトを使用したAjax通信するシステムがあり、PCやAn ...

jQueryuiを用いてメールの入力補助(サジェスト)

autocompleteを用いた簡易なサジェストを見かけたのでメモ。 ■ソース ...

jQueryプラグインを作成する方法

jQueryのプラグインを作ってみたかった。 というのも大抵のものはググったらあ ...

スクロールしてもついてくる追尾型の広告を作る方法

スマホサイトとかでよく見る、スクロールしてもページ下部とかに常時表示されている追 ...

jQueryでコンテンツのスライド

jQueryもしくはJavaScriptでリンクを押すと 右から左にコンテンツを ...