jQuery slimMenuの実装とデザインを修正する方法

ドロワーメニュー

スマホ(スマートフォン)サイトの製作でUIを考えた際に

最近では定番化したドロワーメニュー(Drawer menu)が良さそうなので

jQuery slimMenuを設置してみました。

その際の作業の流れが参考になればと思い記事にしました。

jQueryでいくつかあるようなので調べて

jQuery slimMenuというのがイメージ通りの動きをするものでした。

以前一度下記のj-queryを使ったことがあるのですが

閉じる際にメニューボタンを押さないとコンテンツに戻れないので

理解していないユーザーに不親切なので今回は採用しませんでした。

Sidr – A jQuery plugin for creating side menus

jQuery slimMenuですとたとえメニューボタンで閉じることが理解できなくても

コンテンツを下に押し出す形でメニューがでるので、

閉じずに閲覧できユーザビリティーに優れていると判断しました。

それでは実装の方法とデザインの修正を説明していきます。


  1. jQuery slimMenuの設定
  2. jQuery slimMenuのデザインを修正する方法
  3. 参考サイト・ブログ

jQuery slimMenuの設定

まずは下記サイトよりzipファイルをダウンロードをします。

jQuery slimMenu – A lightweight responsive and multi-level navigation menu plugin.

slimMenu

slimMenu

解凍して中身を確認します。

slimMenu2

slimMenu2

slimMenu3

slimMenu3

demo.htmlを開きます。

上記2つの部分で外部から.jsファイルを読み込んでいるため

ローカルのブラウザで確認すると横幅320pxになってもメニューボタンが出てきません。

ですが安心してください。レンタルサーバーを使用している場合はテストアップすると

ちゃんと980px以下のviewportでメニューが隠れて三本ラインのメニューボタンがでてきます。

まずは丸ごとコピペするかdemo.htmlのファイルをそのままファイル名を変えて使うのが手っ取り早いです。

作成してあるスマホサイトに実装する場合は

まずdemo.htmlのヘッダー内、下記ソースをコピペします。

続いての前にあるjavascriptのソースをコピーします。

ソースは下記になります。

ダウンロードしたフォルダ内にあるファイルはフォルダの階層を

変更する場合はリンク先を書きかえてください。

後はメニューをulタグで作成し、

ulにclass=”slimmenu”を加えれば設定できます。

jQuery slimMenuのデザインを修正する方法

1.背景色を変える

まずは折りたたまれた状態の時の背景色を変えます。

slimmenu.cssファイル内の下記ソースを書き換えます。

slimmenu.css

slimmenu.css

backgroundは背景、colorは文字の色となります。

そしてドロワーメニューのリスト部分の背景色を変えます。

slimmenu.css2

slimmenu.css2

2.ヘッダーに画像を適用

続いてヘッダーの会社のロゴなどをいれたい場合の修正です。

まずはMain Menuのテキスト部分を消します。

htmlファイルのbodyの閉じタグ前の部分です。

demo.html

demo.html

collapserTitle内の”で囲まれた部分を空(カラ)にします。

すると背景色が変わり、Main Menuが消えた状態になります。

メニュー

メニュー

画像を差し込むところはjquery.slimmenu.jsの下記ソース部分です。

jquery.slimmenu.js

jquery.slimmenu.js

$(変数)collapserに=以下の部分を代入しているのですが、

代入されている内容はhtmlで書かれているのでノンプログラマーのウェブデザイナーでもいじれますね♪

に続けて”内にimgタグを書き込みます。

こちらは例なのでimg部分は任意の画像を入れてください。

これでjQuery slimMenuをオリジナルのデザインに変えることができると思います。

他にも色々ドロワーメニューがあったので下記参考サイト・ブログのLIGのページを見てみてください。

参考サイト・ブログ

スマホサイト構築に!ドロワーメニュー、スワイプのプラグインまとめ | 株式会社LIG


Pocket