レスポンシブメニューSmartMenusを実装しよう

こんばんは! Benです。

職場のWEBサイトのリニューアル作業真っ最中ですが、その中でプライベートでも使うjQueryを用いたレスポンシブメニューの実装をノートしたいと思います。

20160213a.PNG
今回使ったのはSmartMenusというものです。以前、Flexnavというものを実装していたのですが、動作確認段階で、ブラウザのウィンドウ幅を変えたりするとメニューの開閉がおかしくなる現象が確認されました。アニメーションがきれいでとても便利だったのですが、私用ならともかく組織のサイトなので断念。SmartMenusに変更しました。

まずはjQuery本体が読み込まれていることが前提になります。以前のノートが参考になると思います。メニューのファイルはここからダウンロードできます。ZIPでダウンロードすると、いろいろなファイルがあり、同じファイルも複数あったりしますが、その中で使うファイルはjquery.smartmenus.jssm-core-css.cssと好みのタイプのデザイン(sm-blue.css or sm-mint.css or sm-clear.css or sm-simple.css)どれか一つの3ファイルです。
コード
    
    
    

    
    

    
    
    
    
今回のHTMLソースです。まずはhead部分でCSSを読み込みます。CSSは全デザイン共通の基本となるsm-core-css.cssと好みのデザイン(今回はsm-blue.css)の2ファイルです。次に実際のメニュー部分をbody部の表示したい部分に書きます。<ul>タグでご覧のidとclassを指定すれば残りの<li>やサブメニューにも何もクラス指定はいりません。のところもメニューは各社員が変更すると思うので、できるだけシンプルにするためにも余計なclass指定がないのはいいことです。

最後にscript部分です初めにjQuery本体、次にSmartMenusを読み込み3行目以降で起動します。この順番を間違えると、正常に表示されません。もレスポンシブになっているのにサブメニューが表示されなく悩みましたが、結局、レスポンシブはスクリプトが動いていなくてもCSSで勝手になってました。スクリプトが動いていないときはサブメニューの表示がされない(▼が出ません)ことで判断できます。

20160213b.PNG
上手くいくと、モバイルのような画面幅が狭いときはご覧のようにアコーディオン式になります。PCのような広い画面では、コードの上の画面のようになります。

20160213c.PNG
こちらはsm-mint.cssを適用させた場合です。CSSファイルだけでなくて、<ul>タグのclassのところもsm-blueからsm-mintに変える必要があります。

20160213d.PNG
こちらはcleanです。吹き出しになります。

20160213e.PNG
こちらはsimpleです。本当にシンプルです。は職場サイト実装時、blueを基調にしてcore-cssとくっつけてCSSを一つにまとめたうえで、各支社ごとに違う点のみを分離して作成しました。今度紹介したいと思います。

この記事へのコメント


この記事へのトラックバック