勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

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

      2014/05/24

■やりたかった事

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

 

■方法

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

 

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

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

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

 

 

※サンプル

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

 


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

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

 

 

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

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

 

 

こうしてしまえばいい。

 

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

 


■その他

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

 - javascript, jQuery

  関連記事

javascript_logo_unofficial-300x300
javascriptの注意点

javascriptにてチェックボックスのチェック状況をチェックを ループでまわ ...

jquery_logo
jQuery.uploadでリアルタイムプレビュー

やりたい事は、 ・<input type="file">で画像を選択 ...

jquery_logo
javascriptやjQueryで画像を書き換えても変わらない場合

けっこう前に画像をアップロードしてリアルタイムに プレビューする機能を作った時に ...

javascript_logo_unofficial-300x300
JavaScriptでFlashのバージョンを取得

既存のソースでFlashのバージョン取得を 行っているものがあり、使いそうなので ...

javascript_logo_unofficial-300x300
クロスドメインのiframeで子フレームから親フレームにheightの値を渡す

やりたかった事は、 ・iframeで子フレームから親フレームにheightの値を ...

jquery_logo
jQueryでUNIXタイムスタンプの取得

jQueryでUNIXタイムスタンプを取得したい場合、 $.now()だけで取得 ...

javascript_logo_unofficial-300x300
JavaScriptで小数の計算(decimal.js)

JavaScriptで小数の計算をすると値がずれることがあった。調べてみるとJa ...

jquery_logo
jQueryプラグインの作成

面白そうだったのでメモ。 ■参考サイト http://www.entacl.in ...

110126-HTML5_Logo
formでdisplay:none;にしてても送信される

formで特定の部分をdisplay:none;で非表示にしてても 内容は送信さ ...

mzl.qobqfuxq
GoogleMapsAPIでマーカーが全て表示されるように自動ズーム

GoogleMapsAPIでマーカーを複数設置した場合にズームの値や、マーカーの ...