スマホ対応(K)スライド式ナビゲーションをslidebars.jsを使って横幅可変のスマホデザインにHOMEJavascript(K)スライド式ナビゲーションをslidebars.jsを使って横幅可変のスマホデザインにスマホのWEBデザインをしているのに必ず決めなきゃいけない事は「ナビゲーションメニューをどのタイプでいくか」って事です。表示領域の少ないスマホの画面ではできるだけナビゲーションはコンパクトにわかりやすく見せたいもんです。プラグイン「slidebars.js」を使って実装スライド式ナビゲーションは基本jQueryを使って実相するパターンがほとんどでプラグインも多く配布されています。その中でも比較的人気なのが「slidebars.js」かと思いますので、今回はこちらを使用します。【配布先サイト】Slidebarsダウンロードしたファイルにはバージョン違いでたくさんのファイルが梱包されていますが、使用するのは「slidebars.css」と「slidebars.js」のみです。装飾なしのマッサラなスライド式メニューを作成jQueryの読み込みコードとJavaScriptを記述。」の外に出すDEMOこれで、とりあえず「menu」のテキストを押せばサイドからニュッと出てくるナビゲーションが出来上がります。CSSを使ってスマホらしいナビゲーションを作成これでは、いまいちピンとこないので実際実装した時のシチュエーションで、スマホサイトに適したデザインをCSSで組んでみます。※当然横幅可変のレイアウトです。ナビゲーションを帯型でいくので、メニューボタンを左側に、電話をかけるボタンとお問い合わせボタンを左に設置してみました。block;}以下、完成版のデモです。DEMOメニュー用の画像はWEBフォントのアイコンを使おうかとも思ったんですが、borderで枠を作ってその中央に「background」に「center」指定しています。大きさは決め打ちで作らなくても、「background-size」で調整しています。※ナビゲーション部分はスクロールしたら見えなくなりますが「position:fixed」で固定するのもいいかもしれません。※メニューを開いた時の背景色を変更したい場合は梱包されている「slidebars.css」に記述されている「.sb-slidebar」のbackgroundの色を変更すればおけです。まとめ今回実装してから気づいたんですが、スライドしてメニューを表示させた時にコンテンツ部分(#sb-siteで囲ってる部分)がスワイプすると動いてしまう事が問題かなと。ナビゲーションメニューの数が少ないとスワイプすることもないんでしょうが・・・多い場合はコンテンツ部分もスクロールするので若干操作性がよくないかと思いました。コメントをキャンセルメールアドレスが公開されることはありません。Memo当ブログの管理人Kc_fuji(け-し-)です。WEB制作会社に務めるサラリーマンです。このブログは、制作の覚え書きとWordpressの実験所として利用しています。PAGEWEB(K)Campus(WEB系キャンパス)は娯楽は少なめ。