スマホナビで超シンプルなdrawerの作り方! 【プラグインなし・ドロワーナビ・ハンバーガーメニュー】

web制作

スマホのweb制作で欠かせないのが、ドロワーナビ(drawer)です。

アプリとかフレームワークなんかで制作すると、(たぶん)もう一義的に決まっていると思うので、あんまり迷わなさそうですが、HTML+CSS+JSの自作構築だと、作り方は自由なので、まあ、色んなやり方があります。

シンプルなdrawerは?

シンプルなdrawerの条件

自分が考えるに、下記のようなdrawerがスマートかなと勝手に思うようになりました。

drawer シンプル

・呼び出したメニュー画面で画面一杯に表示
・呼び出したメニュー画面でスクロールさせたい
・呼び出したメニュー画面でスクロールした時に元のページがスクロールされないようにする
・プラグインは使いたくない
・シンプルに終わりたい

ソースコード

で、作ってみたのが、下記の感じのコードです。

要点としては、

・JSのtoggleClass(クラスの追加と削除)でdrawer要素の開閉
・開くボタンと閉じるボタンは、body側とdrawer側で分けた。
・drawer要素をウィンドウの外側に隠している
・drawer要素をアクションして表示したら100%にする
・drawer要素内ではスクロール可能(その時、bodyはスクロールオフ。)
・drawer要素をアクションして隠す時は、その前に元のページを最上部に戻しておく

という感じです。

補足

ドロワーナビを収納する時、元のページを最上部に戻しておく理由としては、ちょっと古いブラウザだと、どうしても元のページのスクロール固定などがうまくいかないことが多かったからです。調整がとても面倒なんですよね。それならいっそ、drawerを戻す(しまう)時に、メイン要素のトップ部分までスクロールで戻す処理をしてあげると、いかにも仕様っぽくて良いかなと。

transformをいじると、メニュー開閉の向きなど調整できます。

あとは注記として、height100%⇒先祖属性(html,bodyも)にも適用しておかないと、うまくいかないかもです。

本ブログのドロワーナビ

おまけですが、本ブログでは、jQueryプラグイン「PageSlide」を使ったドロワーナビとなっています。

(以前、wordpressの場合はカプセル化しないとアカンよって記事を書いたことがあります。)

jQueryプラグイン『PageSlide』をwordpressできちんと動かす方法

ただ、上記のPageslideだと、メニュー画面でスクロールできなかったりして、ちょっと不便です。なので、どちらかというと、今回紹介した方法のほうが個人的には好きです。(だったらブログのも修正しろって話ですが、グロナビ開くほど本ブログを愛用している人は皆無なので、放置!)

最後に一言

スマホのナビって必要なものですが、大半のユーザーは、あんまり押さないんですよね。こだわり過ぎてもしゃーないとも思う。

本記事を気に入って頂けたら、facebookの「いいね!」を是非!

スマホナビで超シンプルなdrawerの作り方! 【プラグインなし・ドロワーナビ・ハンバーガーメニュー】


本記事のシェアはこちらから!

  • このエントリーをはてなブックマークに追加
  • Pocket

PROFILE

yoshi

本ブログ・WebMakeBlog KIYOTATSUを運営しているYoshiと申します。普段はWEB制作をやっています。得意なのは要件定義や構築で、HTML/css/javascript/PHP/git/wordpress/MT/DB/photoshop/illustrator/fireworksなど扱えます。サーバー・アプリなども習得中。