Simplicity 少し改造してみた 番外編 part11 グローバルメニューをどうにかするアイデア

まぁ、よくあるやつなんですけどね、とりあえず、Simplicityで実装するにはどうすればよいかを色々踏まえつつ試してみた次第です。

どういったものかと言いますと、例えばボタンの位置はどこでも良いのですが、仮にサイトタイトルの左側付近に何かしらのボタンを表示させて、それをクリックするとサイト表示が小さくなって開いたスペースにメニューを表示するというようなやつです。

これも、どういうものかわからないと思うので、見てもらった方が良いのですけれども、だいたい現状のSimplicityの構成に近づけるために横幅を結構とってありますので、動作自体は以下のcodepenの表示で理解してもらえると思うんですが、レスポンシブにするにあたってflex等を利用してますので、できたらPCでしかもそこそこ大きな画面で、本体の方にアクセスしていただくのが良いのではないかなぁと思います。

See the Pen WordPressTheme Simplicity menu idea by Hidekichi (@Hidekichi) on CodePen.


※ 赤いボタンが発火スイッチです。リストのリンクをクリックせずに閉じる時は、小さくなったサイト部分をクリックすると元に戻ります。

なるべく、実際に近づけるためにhtmlの構造は同じ感じにしましたが、まるっきり同じではないのでそのあたりは注意です。

どのようにして実現しているか

赤いボタンを押すとサイト全体が小さくなる処理の部分から、説明したいと思います。ちょっと端折りますが、

全体的にはこのような構造になっています。#containerの中にfooterが入っててくれれば、#containerに操作すればよいのですけれども、確かSimplicityではfooterは別物になっていたように思うので上記の構成にしてあります。
レスポンシブな部分はflexを利用してやっていまして、今回はそこが問題点ではありません。メディアクエリを書くのが面倒臭いのでflex使ってますが、まぁ同じような感じの挙動になるかと思います。

まずは、このfooterを#containerと同じように動作させるために、#containerを囲むべく新たに.wrapperをjQueryで追加しています。.wrapperが作られた後はfooterを.wrapperの中に入れると言うような処理をしてあります。

こういう感じですね。これPHPをいじってたら結構色々スクロールして大変な部分です。

赤いボタンは、もしそこに無い場合は表示するようにしてあるんですが、まぁこれはどうでも良い部分です。今回は赤いボタンを発火スイッチにしましたが、これは別に何でも良いので、気にする部分ではないかと思います。

アクセスした瞬間には既に消えて見えませんが、実際のSimplicityと同様、うちのサイトのナビですけれども、そのまんまhtmlを貼っつけてあります。これは、

このようにして、#naviを複製して消してしまい、更にbodyの先頭に移動させています。元々のメニューについているclassやID、またその構造はそのまんまです。問題点としては、Simplicityの場合、すでにstyle.cssに#navi以下の設定が書いてあるため、どこに移動させても本来のスタイルが適用されてしまいます。
ここらを解決するためには、jQueryでIDを付け替えるか、親となるブロック(仮に.movedとかと名前を付けておく)を先にBodyの先頭に作っておいて、その中に#naviを移動させ、cssでスタイルする場合は、.moved #navi { … }と言う感じにするのが良いのかも知れません。

今回は、元々の#naviの部分をコメントアウトして、新たにデザインすると言う方向でやっています。

先ほど作った.wrapperを操作することで、サイト自体を小さくしたり戻したりという操作をしています。まず、cssですが、

.wrapper自体は縦横100%のposition: absoluteになってます。top、leftを共に0にすることにより、表示自体は変化が無いようにしています。.wrapperのサイズが変化する時にアニメーションするように、transitionも仕込んであります。
.wrapper.inactiveは、赤いボタンをクリックした時に、.wrapperに.inactiveと言うのを付け加えた瞬間発動するスタイルです。ここでは、transform: translate3dによって、右側に160px分移動させ、scaleで約半分のサイズになるように設定しています。scaleは1が100%です。右に移動しつつ、サイズ自体が半分になり、transitionによりアニメーションする感じになります。

.wrapperが小さくなって表示される画像は寝ログにあったのを直リンしています(笑)
これは、#naviの部分の背景になっています。これも基本レスポンシブで表示するだろうと思います。

#naviの部分もアニメーションするため、.wrapperとほぼ同じような仕組みとなっています。
#navi ul li.visibleの部分では、jQueryでliの部分を遅らせつつ表示させるため、.visibleと言うclassがついたものを用意してあります。

遅らせる部分のjQueryは、

このような感じです。40の部分を大きくすれば、もう少しゆっくりと表示されるはずです。

赤いボタンを押すことで、サイト表示は小さくなり、メニューが徐々に表示されるまではできました。
次に、これらを閉じる時の動作ですが、

このような感じになってます。$(‘li a’).on(“click”, function(e) { … }で、いわゆるリンク先を表示する動作を禁止してメニューを閉じるようにしています。ここは、例えば、該当部分のリンクを取得しておき、メニューを閉じたりした後でlocation.href等によって画面移動するようなギミックを入れられる部分でもあります。サンプル例では、メニューが閉じるだけです。

close()の部分は別途関数を用意して、それらが読み込まれます。

これはjQueryの外に入れてあるんですけれども、ここでは、まず、$(‘#navi li’)についてある.visibleと言うclassを取り除いた0.3秒後に、wrapperから.inactive.flagを消す処理自身を呼び出して消しています。
このようにすることで順番が作られ、まずメニュー部分を消してから、小さくなっているサイト表示を元に戻すことが可能なるわけです。
元に戻す際に、アニメーションするのは、.wrapperにtransitionが仕込んであるからです。

問題点もある

さて、一応これで動作しているようですけれども、問題点もあります。
例えば、現在Simplicityでは、スマホ表示の際に、sldr(?)でしたっけ?上下どちらかに引っ付いているコントロールパネルみたいのが入ってます。もちろん、ここにもメニューを表示する機構が組み込んであるため、どのようにして、今回のメニュー表示を実装するかとか。
仮にデフォルトのアコーディオンメニューであれば、そのまま使えそうですけれども、そうなった場合は今回の赤いボタンは画面をスクロールさせてもついてくるようなものの方が良いのではないかとか、いくつかの問題点が出てきます。
タブレット以上であれば表示するという感じで使えそうなんですけれど、その場合は画面幅によって例えば1024px以上であればと言う条件で発動させるとかになるでしょうか。

実際の所、このメニューが使いやすいかどうかがいまいちわからないので、何とも言いにくい部分ですが、サイトの構成自体がすでにレスポンシブになっているので、スキンあたりで作るのが良いのかも知れませんね。

拡張機能がプラグイン形式で配布されていて、必要なものだけ導入できる形になれば、これらを導入するのは難しいことではないのかも知れませんが、現状では様々な機能がテーマ内で実装されているため、組み込むには別の部分のカスタマイズも必要になりそうです。

ひとまずのアイデアとして。

スポンサーリンク

シェアする

フォローする