【jQuery】スマホサイトにも使える軽量のナビゲーションプラグイン。slimMenu

【jQuery】レスポンシブには欠かせないドロワーメニュー系jQueryプラグイン10選でご紹介したslimMenuのご紹介。slimMenuはレスポンシブとマルチレベルのナビゲーションメニューを作成するために作られた軽量jQueryプラグインです。

ブラウザサポート

  1. IE 9+
  2. Latest Chrome
  3. Latest Firefox
  4. Latest Safari
  5. Latest Opera
  6. Android 2.2+
  7. Mobile Safari

CSS

<link rel="stylesheet" href="slimmenu.min.css" type="text/css">

jQuery

<script src="jquery.slimmenu.min.js"></script>

HTML

リストを使用して、ナビゲーションメニューを作成

<ul id="navigation" class="slimmenu">...</ul>

初期化

$('#navigation').slimmenu(
{
resizeWidth: '800',
collapserTitle: 'Main Menu',
animSpeed: 'medium',
easingEffect: null,
indentChildren: false,
childrenIndenter: '&nbsp;'
});

オプションの効果を使用したい場合。

<script src="**PATH_TO_PLUGIN**/jquery.easing.min.js"></script>

オプション

resizeWidth ナビゲーションメニューが折りたたまれる幅
initiallyVisible モバイルデバイス上のメインナビゲーションメニューを作成
collapserTitle メニュータイトル
animSpeed サブメニューの展開して折りたたむアニメーション速度
easingEffect 使用される効果
indentChildren レスポンシブのためのインデントオプション
childrenIndenter 先頭に付加され、レスポンシブのサブメニューは、この文字でインデントされる。
expandIcon サブメニューの親メニューに表示されるアイコン。
collapseIcon サブメニューの親メニューの横に表示されます。

MITライセンス

 
slimMenu

【jQuery】スマホサイトにも使える軽量のナビゲーションプラグイン。slimMenu

  • LATEST
  • RELATED
  • POPULAR