サイドからクリックで展開するスライドナビを作成する【jQuery連載10】

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

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

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

今回作成したサンプル

【サンプル】クリックでサイドから展開するスライドメニューを作成する
http://www.html5-memo.com/sample/jq-books/05

ナビゲーションの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><span>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プラグインを使用して、ウェブページで使用する画像をページ表示時に一度に一気に読み込むのではなく、ユーザのページのスクロールにあわせて、その画像が表示されるべき位置に達したときにその画像が読み込まれる「画像遅延読み込み」という手法も実装している。これはサンプルのように大きめの画像を大量に扱うページなどに実装すると、サーバー付加の軽減や、回線速度が遅い環境での表示速度向上を期待できる。

<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を有効にしていない環境の場合の配慮

今回のサンプルで実装した開閉ナビゲーションと、lazyloadプラグインによる遅延読み込み機能は、Javascriptが有効であることを前提としているため、Javascriptを有効にしていない環境やJavascriptが動作しない環境では、適切な処理をしていないと、コンテンツが一切表示されない場合もある。今回のサンプルで言えば、ページ表示時には開閉メニューが画面外に隠れている、そしてlazyloadプラグインではすべてのimg要素のsrc属性にローディング用の画像が設定されているため、Javascriptが有効でなければ、開閉メニューを表示することもできなければ、画像はローディング用画像がずっと表示され続けいる状態のままである。サンプルではそういった状態を避けるために最低限の配慮をおこなった。
Javascriptを無効にしているのは1%前後と言われ、その層をサポートに含めるかどうかは制作ポリシーや、案件の種類によって異なってくるが、今回のサンプルではアニメーション部分をCSS transitionで実装したように、今後はグレースフルデグラデーション(新しいブラウザ環境を基準として考え、古いブラウザには最低限の機能を提供する)指向で制作する機会が増えてくることから、古い、または推奨されていない環境でも最低限の機能を利用できるように配慮する事なども必要になるだろう。

今回は以上になります。

次回はブラウザ一杯に広がったメイングラフィックに最適なスライドショーを作成するを作成したいと思います。

この記事を書いた人

著者 : ハヤシユタカ

2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら

最近書いた記事

この記事に関連する記事