モバイルデバイス向けCSSナビゲーションメニューとCSSナビゲーションメニューアイコンの実装解説。

スマートフォンやタブレットなどのモバイル端末が急速に普及したことにより、ホームページの制作方法もPCだけでなく多様な端末サイズに対応できるよう変化し、現在はモバイル端末、特にスマートフォン用のホームページを主体に据えた制作が当たり前になってきました。

ナビゲーションメニューはPCでは画面サイズいっぱい広く配置することでそのユーザーインターフェースを成立することができましたが、モバイル端末では固定のナビゲーションメニューにすべての内容を含めることは文字の大きさなどから困難です。

そこでナビゲーションメニューをモバイル端末に対応できるように考えられたのが今回解説させていただく可変式のナビゲーションメニューやナビゲーションメニューボタンです。ホームページの制作がPC主体で考えられていた頃はQ&Aページのタブメニューなどに使われていた技術をモバイルサイトのナビゲーションメニュー用にアレンジされたものになります。

それではモバイルデバイス向けCSSナビゲーションメニューとCSSナビゲーションメニューアイコンの実装を僕なりに解説していきたいと思います。

モバイルデバイス向けCSSナビゲーションメニューアイコン解説

最初にナビゲーションメニューアイコンの実装例を示して、解説していきていと思います。

今回実装したCSSナビゲーションメニューアイコンは以下の3つです。

*それぞれをクリックして動きを確認して下さい。

上のモバイルデバイス向けCSSナビゲーションメニューアイコン実装例のソースをHTML、JavaScript、Cssそれぞれを示して解説していきたいと思います。

動きを実装する上で必要なcssのtransition、translateの知識はそれぞれのリファレンスに記述しています。そこに不安があれば一度リファレンスを確認して下さい。

HTML共通

ナビゲーションメニューアイコン HTML実装解説

今回のナビゲーションメニューアイコンの実装は<button>タグの中にアイコンの元となる<span>タグ要素を一つ準備し、疑似要素の:before・:afterを使用して3つのアイコンを並べています。<span>タグ要素を3つ準備する方法など幾つか実装方法がありますが、ここでは割愛します。

JavaScript(JQuery)共通

ナビゲーションメニューアイコン JavaScript実装解説

JavaScript(JQuery)のtoggleClassでopenクラスのつけ外しを行います。このクラスの有り無しでナビゲーションメニューアイコンの動作をcssで切り替えます。

Css共通

ナビゲーションメニューアイコン CSS実装解説

CSSでのナビゲーションメニューアイコンの動作の実装解説をしていきますが、その前に一つだけ注意点を書いておきます。

今回のナビゲーションメニューアイコンの実装では:before・:afterはあくまでも疑似的要素であり、実体は<span>タグ一つのみです。実体である<span>タグを移動(top,left…)、回転(rotate)、透明(opacity)などのプロパティーで変化させると実体の疑似的要素である:before・:afterも同じように変化します。その中でbackgroundなど例外的なプロパティーがいくつかあるのでそうしたプロパティーを使用したり、疑似的要素のみをうまく変化させていくことで実装していくことになります。

それでは3つのナビゲーションメニューアイコンの左側から順に解説していたいと思います。まずは左側のナビゲーションメニューアイコンから解説します。

ナビゲーションメニューアイコン(左側)動作解説

ナビゲーションメニューアイコンを構成する<span>と: befre、: afterの位置関係ですが、上から: before、<span>タグ、: afterになります。

: before、: afterの位置の縦の移動から入ります。実体である<span>タグの位置からそれぞれtopの位置を-1em、1emずつずらすことで3つのアイコンが成立しています。ナビゲーションメニューアイコンをクリックするとJavaScript(JQuery)でopenクラス付加されます。openクラスを加えたcssで: before、: afterのtopの位置を0すなわち実体である真ん中に配置された<span>タグの位置に戻します。

topの位置を移動するアニメーションの実行時間をcssのtrasitionプロパティーを使用して行き帰り共に500ミリ秒に設定してあげます。

次に実体である<span>タグを透明にします。: berore と : after が重なるタイミングで実体である<span>タグのbackgroundプロパティーにtransparentを設定し透明にします。

cssのtranslateプロパティーのディレイタイムに500ミリ秒を設定し遅延させた後で、40ミリ秒かけて透明にします。

最後に二つの疑似要素を45°回転させます。openクラスを付加した : before : after のそれぞれにcssのtransformプロパティーを使用してrotate(45deg),rotate(-45deg)を設定します。

ナビゲーションメニューアイコン(左側)の往路に関する解説は以上になります。

次にナビゲーションメニューアイコンの復路の解説にはいりますが動作そのものは往路の逆になるだけなので少し絞って解説していきます。注意することは実行タイミングが逆になるというこどだけなので、translateプロパティーに設定する実行時間とディレイ時間をそのことを考慮した上で設定してあげるだけになります。

まずナビゲーションメニューアイコンをクリックするとopenクラスが外れます。そのことでopenクラスが付加されていないcssに動作が返っていきます。

疑似要素のtransformプロパティーがrotate(0)すなわち変化のない状態に戻ります。

<span>タグの実体のbackgroundが透明から#333に戻ります。

疑似要素のtopの位置が0から‐1em 1emに戻ります。

最初にcssで表現したナビゲーションメニューアイコンに戻って終了になります。

ナビゲーションメニューアイコン(中側)動作解説

それでは次のナビゲーションメニューアイコンの解説に入りてたいと思います。注意するとろは最初の解説と変わりありません。実体と疑似要素の理解とtranslateプロパティーの実行時間、実行タイミングの理解です。

それでは先ほど同様にナビゲーションアイコンの位置関係をみていきます。上から順に<span>タグの実体、: before、: afterの順になります。左側のアイコンと並びが違うのはmargin-leftで横に移動する動作が入るからです。この時、<span>タグの実体を動かすと、疑似要素も同時に移動してしまいます。そこで縦中央のアイコンは疑似要素の: beforeを配置して横移動に対応させます。

最初の動きは: beforeの横移動から入ります。openクラスが付加された : beforeのmarginプロパティーのレフトに2emを設定してアイコン中央を右側に移動させます。

cssのtransitionプロパティーの実行時間に1000ミリ秒を設定し、アニメーションさせます。

縦の移動を実行します。<span>の実体と : afterのそれぞれのtopプロパティーに-1em、1emを設定します。

これでナビゲーションメニューアイコン(中央)の往路のアニメーションは終了になります。

復路に関しては前回と変わらないので割愛させていただきます。trasitionプロパティーの実行時間とディレイタイムを考えながら自分の好みの動きで実装して下さい。秒数は自分の感覚で一向にかまいません。

ナビゲーションメニューアイコン(右側)動作解説

ナビゲーションメニューアイコン(右側)の動作の解説に入ります。左側のアイコンと中央のアイコンの動作をミックスさせたような動きにしてみました。

ナビゲーションアイコンの位置関係は中央のメニューアイコンと同じ並びです。上から順にタグの実体、: before、: afterの順になります。

maraginプロパティーのレフト側に2emを設定して横に移動します。

topプロパティーで上下のアイコンを中央に移動します。

backgroundプロパティーで中央のアイコンを透明にします。

translateプロパティーにrotate(-45deg)、rotate(90deg)を設定し回転させます。注意で述べたように実体である<span>タグを左に45°回転させると、疑似要素も45°回転しますので、45°戻した後にさらに45°すなわち90°に設定する必要があります。

これで左から3番目のナビゲーションメニューアイコンの往路の解説は終わりになります。復路に関しては前2つの例と変わらないので割愛させて頂きます。

cssナビゲーションメニューアイコン解説まとめ

これで3つのcssナビゲーションメニューアイコンの解説は終了になります。冒頭でも述べましたが、インターネットを閲覧する媒体がスマートフォンに完全にシフトした状況でホームページ制作側としてはそのuiを実装するために今回のアイコンメニューの技術は必須のものです。この記事が読んで頂けた方のお役に立てていれば幸いです。

スマートデバイス向けCSSナビゲーションメニューの実装

それでは次にナビゲーションメニューの実装と解説に入りたいと思います。今回実装解説したcssナビゲーションメニューアイコンと組み合わせての実装になります。実際の完成形は以下のようになります。

cssナビゲーションメニューもcssナビゲーションメニューアイコンと同様3種類準備して実装解説していきたいと思います。

0

コメントして下さい

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