勉強したことのメモ

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

  関連記事

Jcropを使ってブラウザ上で画像を範囲指定して切り抜き(トリミング)

やりたかった事は、画像をアップロードして必要な部分のみを範囲指定してもらい、指定 ...

JavaScriptでinputタグのtypeを変更

チェックボックスの状態によって inputタグのtypeをtext⇔passwo ...

JavaScriptで多次元連想配列

JavaScriptで多次元の配列を作る際にいつも迷ってしまうのでメモ。 ■こう ...

javascriptのfor文で負荷軽減

javascriptで配列の数だけループをまわす際、 for (i=0; i&l ...

JavaScriptで三項演算子の中に三項演算子

既存のソースを作り変えている際によく分からないソースがあった。 だいぶ書き換えて ...

配列をjQueryで取り扱う

やりたかった事は、 ・テキストボックスが複数ある。そのページに送信するクエリによ ...

JavaScriptで全角半角を判別の上で文字数カウントを行う

やりたかった事は「全角5文字・半角10文字以内の入力フォーム」 みたいなもの。 ...

JavaScriptでUNIXタイムスタンプ取得

UNIXタイムスタンプを用いた際、 年月日からすぐUNIXタイムスタンプを出した ...

javascriptとPHPで正規表現を使う場合

とりあえず使いそうなのは検索と置換。 ■javascript var str = ...

Ajaxのクロスドメイン2

PHPも介せない場合。こちらの方がスマートでよさそう。 jsonpを使うみたい。 ...