Simple Sidebar(ドロワーメニュー)の実装:メモ

Sidrの更新が滞っていた(利用させて頂いている身で失礼な理由ですが…(汗))のと、動きがすこしぎこちないのが気になり、代替のもを探して「Simple Sidebar」に辿り着きました。

特に書くこともないのですが、何点かメモとして。

「動かない！」となった場合、大抵設定が抜けていたり動作対象の指定が間違っていることが多いので、注意はしすぎることもないでしょう。

Simple Sidebar

Simple Sidebarの詳細は下記のサイトで。

• Simple Sidebar

headの部分の書き方からなにから親切に例示されているのが下記のページです。ちなみに右メニュー。

• Simple Sidebar Right

とりあえず例を貼付けてから手を入れていけば問題ないでしょう。

留意点

ちょっとした留意点を少々。

jQuery-ui

前項の例はjQuery-uiを読み込んでいますが、動きをデフォルトの状態で使うのであれば読み込まなくとも問題ありません。簡単に動きます。

optionのanmetionを記述してカスタムする場合は必要です。

animation: {
          easing: "easeOutQuint"
        }

jQuery-uiを読み込まずにanimationを書くと動きませんのでご注意を。

closingLink

ボタンがなくともスライドで横に動いたサイトの本体部分をクリックかタップすれば消せますが、閉じるためのボタン設定が可能です。

closingLinks: 'a',

例ではaになっていますが、aタグである必要もありません。この部分の注記をGitHubより引用します。

//*WARNING* do not select parent and child. Ex: ‘li, a’ when “<li><a href=””></a></li>”.
So just select the child element (‘a’).
POSSIBLE EXAMPLES: ‘a’, ‘li’, ‘a, .fauxlinks, #social, .button’.

注意点として、親子関係の指定はだめで、単一のタグにする必要があるようです。他方、id名やclass名の指定はOKです。

ナビゲーションをフリック時に下の要素が動く場合

言葉では説明し難いのですが、右サイドナビを表示している際に、そのナビをフリックするとナビ以外の部分が動きます。スワイプよりもフリックが顕著で、スワイプだとたまに動きますがフリックはかなりの確率で動くようです。

イメージ的には、ナビからフォーカスがずれて、ナビの下にあるはずのwrapperで指定した要素を操作してしまっている感じです。この状態になるとナビの反応がなくなり縦スクロールしません。

解決策としては慣性スクロールを有効にすること。Simple Sidebarを適用する要素に以下のcssを設定します。

.sidebar{/* .sidebarは任意のクラス */
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
}

慣性スクロールが有効になることで、フリック時にフォーカスがずれるような動作はなくなるはずです。

結び

かなり簡単にできました。右スライドの実装もスムーズに完了。ドロワーメニューが手軽に利用できそうです。

まだ後々作者の方の手が入りそうですが、現時点のものでも十分かもしれません。Simpleと名付けているだけあって、軽量なままでいてほしいなと思います。多機能なものが必要なら別のプラグインを探せすことが可能ですから。