WEB系キャンパス

(K)スライド式ナビゲーションをslidebars.jsを使って横幅可変のスマホデザインに

sp_slider_visual

スマホのWEBデザインをしているのに必ず決めなきゃいけない事は「ナビゲーションメニューをどのタイプでいくか」って事です。表示領域の少ないスマホの画面ではできるだけナビゲーションはコンパクトにわかりやすく見せたいもんです。

ナビゲーションのタイプはいくつかありますが、今回はFacebookアプリのナビゲーションメニューですっかりお馴染みになった横にスライドするタイプのスライド式ナビゲーションを実装した時の備忘録

jQuery のプラグイン「slidebars.js」を使って実装

スライド式ナビゲーションは基本jQueryを使って実相するパターンがほとんどでプラグインも多く配布されています。その中でも比較的人気なのが「slidebars.js」かと思いますので、今回はこちらを使用します。

【配布先サイト】Slidebars

ダウンロードしたファイルにはバージョン違いでたくさんのファイルが梱包されていますが、使用するのは「slidebars.css」と「slidebars.js」のみです。

装飾なしのマッサラなスライド式メニューを作成

jQueryの読み込みコードとJavaScriptを記述。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/slidebars.js"></script>
<link rel="stylesheet" href="css/slidebars.css" media="all">

<script>
    (function($) {
        $(document).ready(function() {
        $.slidebars();
    });
    }) (jQuery);
</script>

【HTML】

<body>
<div id="sb-site">
<header>
<p class="sb-toggle-left">menu</p>
</header>
<div id="contents">
    <p>コンテンツ</p>
    <p>コンテンツ</p>
    <p>コンテンツ</p>
    <p>コンテンツ</p>
    <p>コンテンツ</p>
    <p>コンテンツ</p>
    <p>コンテンツ</p>
    <p>コンテンツ</p>
    <p>コンテンツ</p>
    <p>コンテンツ</p>
    <p>コンテンツ</p>
</div><!-- /#contents -->
</div><!-- /#sb-site -->

<div class="sb-slidebar sb-left sb-style-push">
<nav>
  <ul>
    <li><a href="#">メニュー01</a></li>
    <li><a href="#">メニュー02</a></li>
    <li><a href="#">メニュー03</a></li>
    <li><a href="#">メニュー04</a></li>
    <li><a href="#">メニュー05</a></li>
    <li><a href="#">メニュー06</a></li>
    <li><a href="#">メニュー06</a></li>
  </ul>
</nav>  
</div><!-- /.sb-slidebar -->

CSSのクラス名の付け方をデフォルト通りに行くと以下の感じ

  • 「#sb-site」で囲ってる部分が通常表示しているコンテンツ部分
  • メニューボタンは「.sb-toggle-left」で囲う（右から出したい場合は.sb-toggle-right）
  • スライドされるメニューは「.sb-slidebar sb-left sb-style-push」3つのclassで囲う（右から出したい場合はsb-left→sb-right）
  • メニューは「#sb-site 」の外に出す

DEMO

これで、とりあえず「menu」のテキストを押せばサイドからニュッと出てくるナビゲーションが出来上がります。

CSSを使ってスマホらしいナビゲーションを作成

これでは、いまいちピンとこないので実際実装した時のシチュエーションで、スマホサイトに適したデザインをCSSで組んでみます。※当然横幅可変のレイアウトです。

ナビゲーションを帯型でいくので、メニューボタンを左側に、電話をかけるボタンとお問い合わせボタンを左に設置してみました。

<body>
<div id="sb-site">
<header>
<nav id="sp_menu">
<div class="sb-toggle-left">menu</div>
<div class="sp-mail_btn"><a href="#"></a></div>
<div class="sp-tel_btn"><a href="tel:##"></a></div>
</nav>
</header>
<div id="contents">
  <p>コンテンツ</p>
  <p>コンテンツ</p>
  <p>コンテンツ</p>
  <p>コンテンツ</p>
  <p>コンテンツ</p>
  <p>コンテンツ</p>
  <p>コンテンツ</p>
  <p>コンテンツ</p>
  <p>コンテンツ</p>
  <p>コンテンツ</p>
  <p>コンテンツ</p>
</div><!--#contents-->
</div><!--#sb-site-->

<div class="sb-slidebar sb-left sb-style-push">
    <ul id="nav_list">
      <li><a href="#">メニュー01</a></li>
      <li><a href="#">メニュー02</a></li>
      <li><a href="#">メニュー03</a></li>
      <li><a href="#">メニュー04</a></li>
      <li><a href="#">メニュー05</a></li>
      <li><a href="#">メニュー06</a></li>
      <li><a href="#">メニュー07</a></li>
      <li><a href="#">メニュー08</a></li>
    </ul><!-- /#nav_list -->
</div><!— /.sb-slidebar -->
</body>

【CSS】

body{
  margin:0;
  padding:0;
  width:100%;
  min-width: 320px;
  font-size: 62.5%;
}

a{text-decoration: none;}

ul,
li{
  list-style: none;
  margin: 0;
  padding: 0;
}

/*ヘッダーナビゲーション--------------------------*/
nav#sp_menu{
  background-color: #F70841;
  padding:7px 0;
  overflow: hidden;
}

.sb-toggle-left,
.sp-tel_btn,
.sp-mail_btn{
  width:44px;
  height:44px;
  border:2px solid #faf5ef;
  position: relative;
  text-indent:100%;
  white-space:nowrap;
}

.sb-toggle-left a,
.sp-tel_btn a,
.sp-mail_btn a{
  width:44px;
  height:44px;
  display: block;
}

.sb-toggle-left{
  float: left;
  margin-left:2%;
}

.sb-toggle-left{
  background: url(../img/icon_menu.png) center no-repeat;
  background-size: 70%;
}

.sp-tel_btn a{
  background: url(../img/icon_tel.png) center no-repeat;
  background-size: 80%;
}

.sp-mail_btn a{
  background: url(../img/icon_mail.png) center no-repeat;
  background-size: 80%;
}

.sp-tel_btn,
.sp-mail_btn{
  float: right;
  margin-right: 3%;
  border-radius: 50px;
}

/*メニューリスト--------------------------*/
ul#nav_list{
  overflow: hidden;
}

ul#nav_list li{
  font-size: 1.3em;
  border-bottom: 1px dashed #cce7e3;
  padding:5% 5%;
  text-align: right;
}

ul#nav_list li a{
    color: #fff;
    display: block;
}

以下、完成版のデモです。

DEMO

メニュー用の画像はWEBフォントのアイコンを使おうかとも思ったんですが、borderで枠を作ってその中央に「background」に「center」指定しています。大きさは決め打ちで作らなくても、「background-size」で調整しています。

※ナビゲーション部分はスクロールしたら見えなくなりますが「position:fixed」で固定するのもいいかもしれません。

※メニューを開いた時の背景色を変更したい場合は梱包されている「slidebars.css」に記述されている「.sb-slidebar」のbackgroundの色を変更すればおけです。

まとめ

今回実装してから気づいたんですが、スライドしてメニューを表示させた時にコンテンツ部分（#sb-siteで囲ってる部分）がスワイプすると動いてしまう事が問題かなと。

ナビゲーションメニューの数が少ないとスワイプすることもないんでしょうが・・・多い場合はコンテンツ部分もスクロールするので若干操作性がよくないかと思いました。
その辺も踏まえてもう少し改良できればなぁと思いながら今回は以上ですm(_ _)m

こちらの記事もあわせてどうぞ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です