Simplicityを少し改造してみた part6 スマホでのナビメニュー編

そのままでも問題なく動作すると思うのですが、ちょっと別のアプローチで実装してみようかと思います。実装するにあたって親テーマの該当部分はコメントアウトして子テーマに新しく追加します。

親テーマでは次のように処理してあります。

$(‘#mobile-menu-toggle’)がクリックされたら、$(‘#navi ul’)、つまりheader_menuを調べて、display: none;の場合display: block;を追加することで表示されていないものをスライドして表示する。それ以外は、表示されている状態なのでdisplay: block;を消して.display-hideを追加しスライドアップで非表示にする。

このような流れです。
そこで今回、変更したのが以下の処理。考え方はほぼ同じですが記述がまるっきり変更されています。

現在当サイトで実装しているメニュー開閉処理

※ 子テーマに追記。親テーマ該当部はコメントアウトしています。重要なことなので再度書いておきました。

if (!$(“#navi ul”).hasClass(“open”)){ 部分を閉じカッコが2つ入ってたので修正しました。
旧掲載 if (!$(“#navi ul”)).hasClass(“open”)){ ☓
新掲載 if (!$(“#navi ul”).hasClass(“open”)){ ◯

$(function() { は $(document).ready(function() { と同じことです。
まず、openMenu()とcloseMenu()と言う関数を用意します。ここでは、openMenu()の時.openと言うclassを付けて、closeMenu()の時は.openを取り除くと言う処理をするわけです。ここを分離したわけは後で書きます。

次に、

この部分。一部環境では、$(セレクタ).on(“click”, function(){…}); あるいは、 $(セレクタ).click(function(){…});が重い(処理が遅い)ことがあるそうです。おそらくスマホやらの話だと思うのですが、スマホの場合それがタップイベントかクリックかを判別するに際して、基本タッチ操作ですからタッチ優先でその後にclickが機能する仕組みなんだろうと想像します。なので、最初から端末側でタップイベントが利用できるようであればそれを優先的に使用するほうがいいんじゃなかろうかと言う話です。

ここでは、javascriptで、タップ機能がある場合はそちら、無い場合はclickとして使用できるように変数clickに対してイベントを入れています。このことから、次の

$(‘#mobile-menu-toggle’).on(click, function(){ は “click” と言うイベントではなくて、var clickにて変数clickを当てています(ここ間違えないように)。

if (!$(“#navi ul”).hasClass(“open”)){ では、#navi ulが.openと言うclassを持っていない時に最初に自作関数で作ったopenMenu()にて.openを追加、持っている時はcloseMenu()から.openを取り除いています。

css的には、.openを作成しないといけませんから、子テーマstyle.cssあたりにひとまずわかりやすいように、

とでも入れておけば、従来の表示になると思います。

自作関数を作って処理を分離した理由

さて、自作関数にした理由なのですが、これは処理を分離させることで例えばアニメーション等をさせたりすることがわかりやすく書けるからです。現状では、メニューを表示するバーガーアイコンをクリックするとナビゲーションが表示されるようになっています。
このバーガーアイコンを何かしら処理させたい時、例えばSimplicityではfontAwesomeを利用していると思います。それを止めて<span>を3つ用意しバーガーアイコンと同じようなものを構成したとします。また上の線からA,B,Cとしたとします。

それぞれに該当するCSSを書かなくてはいけませんが、こういうふうにしておくと、#mobile-menu-toggleをクリックした時にopenMenu()が動作するわけですから、function openMenu(){ 何かしらの処理 }の何かしらにspanを例えばcssアニメーションする記述をすることで、バーガーメニューがアニメーションして「X」にさせることも可能なわけです。spanで書いてますがdivでもイケると思います。むしろそちらの方が…。
cssで言うなら、transform: rotate(30deg);とかとして回転させたり、色々アイデア次第ですが視覚的に「メニューを開けます」、「閉じられます」という意思表示ができるようになります。

closeMenu()では、openMenu()の逆で処理していけば元のバーガーメニューになります。
こういった理由からあとづけで何かしらできるように関数を作って処理を分離させています。fontAwesomeを利用していても色を変えたり、fontAwesomeの「X」みたいのを選択することも可能でしょう。

ひとまずここでは、Simplicityの「メニューボタンの開閉」を少しアレンジする方向でのカスタマイズを紹介してみました。今後、実装していきたいと思います。
スマホを持っていない場合でも、Google ChromeやFirefox等のweb開発環境があれば動作の確認はできると思います。

※注意

現在、当サイトではナビゲーションメニューの表示をflex-boxにて実装しています。そのため、.openのcssは上記で書いた通りではありませんので予め書いておきます。またiphone5あたりの縦表示の際のブレイクポイントしかまだ着手していないので、ipadやらのタブレット端末では不具合が出ているかも知れません。

スポンサーリンク

シェアする

フォローする