勉強したことのメモ

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

  関連記事

jquery_logo
jQueryでshow/hideよりaddClass/removeClassの方が速い

diaplay:none/blockする際に最近はshow()/hide()を ...

javascript_logo_unofficial-300x300
サイトにHTMLエディタ(WYSIWYG)を導入する方法

シンプルで導入が簡単、且つ日本語化されているウィジウィグを探しており、良さそうな ...

jquery_logo
jQueryでjsonデータを処理(parseJSON)

他社が作成したシステムのちょっと改修案件があった。設置したもののどうも動かないと ...

jquery_logo
jQselectableでセレクトボックスをリッチにする

入力フォームみたいなもので元々はテキストボックス内に 都道府県を入れてもらうとい ...

jquery_logo
日付入力のテキストフォームにカレンダープラグインを導入

やりたかった事と制限は下記の通り。 ・日付入力のテキストフォームにカレンダープラ ...

jquery_logo
画像をサムネイル⇔クリックで拡大(lightbox)

画像をサムネイル表示してクリックしたら大きく表示する というのがlightbox ...

jquery_logo
画像をドラッグ&ドロップでアップロード

■2015/04/15追記 以下記事の方が新しくて詳しい。 http://tai ...

javascript_logo_unofficial-300x300
JavaScriptでcookieの保存

JavaScriptでcookieを保存したかったけど 方法が分からなかったので ...

jquery_logo
jQueryの指定されたイベントを実行する(trigger)

jQueryで $('ID').trigger('click'); というみたこ ...

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

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