第10回　クリックでサイドから展開するスライドメニューを作成する

Webサイトでスクリーンサイズ目一杯の大きな画像を使用したり、海外の画像共有サイトPinterestのように大量の画像をコンテンツとして敷き詰めるようなサイトでは、画像やコンテンツの魅力や迫力を損なわないように、余計な文字情報やユーザーが操作するメニューを小さくあつかったり、普段は隠しておいて必要なときに表示するようにしている場合が多くあります。

また、モバイル環境でのサイト閲覧も年々増加していることから、限られたスクリーンサイズの中でいかにユーザーが情報を見やすく、かつ使いやすいインターフェイスを提供するべきかを考えると、モバイルアプリのUIにならって、Webサイトでも主なメニューを通常隠しておいて、必要なときに出現させて利用できる仕組みを提供することは1つの解決方法として必須になるでしょう。このような仕組みを提供する場合は、ユーザーに隠れているメニューの存在を気付かせると同時に、直感的な操作でメニューを表示して利用できるように配慮する必要があります。

前回は、レスポンシブレイアウトなどで使用する画像を振りわけるプラグインを使用して画像の切り替えを行いましたが、今回はクリックで開閉するスライドメニューを作成します。

■今回作成したサンプル

●ナビゲーションのHTML

クリックで開閉するナビゲーション（※以下、開閉ナビゲーション）を作成する場合もHTMLのコードはそのまま表示させる場合との違いなどはなく、普通にマークアップするだけで良いです。

今回は、開閉ナビゲーション内のメニューのリンク先のイメージをよりわかりやすくするようにアイコンフォントを使用して各メニューを作成してみました。

アイコンフォントを使用し、リンク先のわかりやすいナビゲーションを作成

<div id="subContainer">
<nav id="mainNavigation">
<ul>
　<li class="nav_search">
　　<a href="#"><i class="fa fa-search"></i><span>Search</span></a>
　</li>
　<li class="nav_bookmark">
　　<a href="#"><i class="fa fa-bookmark"></i>Bookmark</span></a>
　</li>
　<li class="nav_tags">
　　<a href="#"><i class="fa fa-tags"></i><span>Tags</span></a>
　</li>
　<li class="nav_heart">
　　<a href="#"><i class="fa fa-heart"></i><span>Like</span></a>
　</li>
　<li class="nav_comment">
　　<a href="#"><i class="fa fa-comment"></i><span>Comment</span></a>
　</li>
　<li class="nav_gear separate top">
　　<a href="#"><i class="fa fa-gear"></i><span>Setting</span></a>
　</li>
</ul>
<p class="mainNavigation_trigger"><a><i class="fa fa-bars"></i></a></p>
</nav>
</div>

●開閉ナビゲーションにはアイコンフォントやCSSアニメーションで装飾

テキストのみのリンクではシンプルとなりますが、リンクの色や背景色などの装飾しかできないため、アイコンフォントの活用と、ロールオーバー時にCSS3 transitionによるアニメーションをつけることで、スライドメニューとあわせて浮遊感のあるメニューを実現しています。

CSS自体は基本的な縦並びメニューのスタイルのほかに、主にマウスオーバー（hover）時の各メニューでそれぞれ変化する色の指定のほか、開閉ナビゲーションを開閉（表示／非表示）させるトリガーとなるボタン（※以下、開閉トリガーボタン）の設定も同時に行っています。また、左右にスライドする開閉ナビゲーションと同じ領域に開閉トリガーボタンも設置し、ボタン自身も開閉時のスライドにあわせて移動する仕組みになっています。

●クリックで開閉するナビゲーション

開閉ナビゲーションのスライド（表示／非表示）の仕組みは単純で、CSSのpositionプロパティと「fixed」に、leftプロバティの値を増減させて左右のスライドを実現している。具体的にはleftプロパティの値をマイナスに設定すれば左方向へ、プラスに設定すれば右方向に向って要素が移動します。加えて、その要素にCSS transitionを設定しておけばスムースに移動するスライドの完成です。

Javascriptではそのleftプロパティの値を直接変更するか、あらかじめ異なるleftプロパティの値を設定したCSSセレクタを用意し、セレクタを切り替えることでスライドが実行されます（CSS transitionに対応していない環境を考慮し、jQueryの持つanimateメソッドでスライドのアニメーションを実装することも考えられる）。

;(function (d, $) {
  var jQdm_slideMenu;
  jQdm_slideMenu = function(){
    var prop = {
    	deferredImage: 'img.deferred',
    	subContainer: '#subContainer',
    	mainNavigation_trigger: '.mainNavigation_trigger',
    	mainNavigation_appear: '.appeared'
    }
    function init(){
    	$(prop.deferredImage).lazyload({
    		threshold : 10,
    		effect: 'fadeIn',
    		effectspeed: 1000
    	});
    	$(prop.mainNavigation_trigger).find('a').on('click', function(){
    		$(prop.subContainer).toggleClass(replaceString(prop.mainNavigation_appear));
    	});
     }
    function replaceString(_str, _bf, _af, _flg){
      var _reg = new RegExp(_bf || '[\\.#]', _flg || '');
      return _str ? _str.replace(_reg, _af || '') : false;
    }
    init();
  };
  jQdm_slideMenu();
})(document, jQuery);

●lazyloadプラグインによる画像の遅延読み込み

今回のサンプルでは、開閉ナビゲーションの仕組みのほかに、lazyloadプラグインを使用してWebページで使用する画像をページ表示時に一度に読み込むのではなく、ユーザーのページのスクロールにあわせて、その画像が表示されるべき位置に達したときにその画像が読み込まれる「画像遅延読み込み」という手法も実装しています。これはサンプルのように大きめの画像を大量に扱うページなどに実装すると、サーバー付加の軽減や、回線速度が遅い環境での表示速度向上を期待できるメリットがあります。

<div class="column">
<p class="photo shadow">
<img class="deferred" src="img/loader.gif" data-original="img/01.jpg" alt="">
<noscript><img src="img/01.jpg" alt=""></noscript>
</p>
</div>

$(prop.deferredImage).lazyload({
    threshold : 10,
    effect: 'fadeIn',
    effectspeed: 1000
});

●JavaScriptを有効にしていない環境の場合の配慮

機能は、JavaScriptが有効であることを前提としているため、Javascriptを有効にしていない環境やJavaScriptが動作しない環境では、適切な処理をしないと、コンテンツが一切表示されない場合があります。当サンプルで言えば、ページ表示時には開閉メニューが画面外に隠れており、そしてlazyloadプラグインではすべてのimg要素のsrc属性にローディング用の画像が設定されているため、JavaScriptが有効でなければ、開閉メニューを表示することもできなければ、画像はローディング用画像がずっと表示され続けている状態のままになります。サンプルではそういった状態を避けるために最低限の配慮を行いました。

ちなみにJavaScriptを無効にしているユーザーの比率は1％前後と言われ、その層をサポートに含めるかどうかは制作ポリシーや、案件の種類によって異なってきますが、今回のサンプルではアニメーション部分をCSS transitionで実装したように、今後はグレースフルデグラデーション（新しいブラウザ環境を基準として考え、古いブラウザには最低限の機能を提供する）指向で制作する機会が増えてくることから、古い、または推奨されていない環境でも最低限の機能を利用できるように配慮する事なども必要になってくるでしょう。

『現場でかならず使われている jQueryデザインのメソッド』

今回紹介したサンプルは『現場でかならず使われている jQueryデザインのメソッド』にてサンプルダウンロードとコードの解説を行っております。

2015/1/8

●本連載で使用している書籍「現場でかならず使われている jQueryデザインのメソッド」

jQueryの特長は、通常のJavaScriptよりもシンプルなコードでWebサイトの動的なふるまいを記述できる点です。CSSと同じセレクタが利用できるので、HTML+CSSをひと通り理解していれば、文法や記述ルールはすぐに習得できます。書は、このようなjQueryの実践感覚を身につくように、アコーディオンやタブパネル、ツールチップといった頻出の基礎技術から、背景全面動画、パララックススクロールなどの現在流行している最新の手法まで、多彩なjQueryのテクニックを解説。現場の制作メソッドがぎっしり詰まった必携の一冊です！