勉強したことのメモ

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

  関連記事

テキストエリアのリアルタイムプレビュー

テキストエリア内に書いた内容をリアルタイムで プレビューする機能が必要となり、教 ...

adblock(広告削除)設定している場合はページを表示させない

iPhoneのSleipnirでネットをしていると「広告がブロックされたのでペー ...

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

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

画像をつなぎ合わせて360度ビューの様に見せるjQueryプラグイン

3Dデータではなく、コマ送りになっている2D画像を用いて360度ビューの様に見せ ...

簡単にtable内をソート

やりたかった事は、 ・テーブル内でのソート ・内容は文字、数値、日時 ・PHPじ ...

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

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

FlashとjQueryを組み合わせたプラグインでWebカメラで撮影した画像をアップロード

FlashとjQueryを組み合わせたプラグインを用いてWebカメラで撮影した画 ...

jquery.snipeの使い方

使い方によっては面白くなりそう。 ■jquery.snipe http://ra ...

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

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

ページのリロード、ページの戻る

ブラウザのリロードと同じようなボタンを作成してほしいとの 要望があって色々あった ...