Simplicityを少し改造してみた part10 jQueryとcssでグローバルナビをサイドパネルに

久しぶりに何となくわかりやすいタイトルになった気がするのは僕だけでしょうか?(笑)

内容としてはPHPをいじらず、jQueryとCSSだけでグローバルナビをサイドパネルにするという、まさにタイトル通りのものなんですが色々書くのは後にして、今回もcodepenにてサンプルを作成したので、そちらを見てもらうのが良いのではないかと思ったりしています。

See the Pen WordPressTheme Simplicity jQuery&CSS Change global navigation side panel by Hidekichi (@Hidekichi) on CodePen.

メディアクエリは現時点(2015/08/18)では考慮してませんので、PCでもスマホでも同じような出力になります。
目的としては、Simplicityは横幅が1070pxで最大なので、ある程度大きなモニタを利用されている人にとっては左右のスペースがデッドスペースになっているように思ったので、そこらを活用してみようという感じでやってます。

グローバルナビがタイトル下からなくなると、その分だけでも記事が上に上がるので素早く記事にアクセスできますし、記事上にアドセンスを入れているような場合でも広告とナビが重ならないというメリットもあったりします。
で、僕は思うわけです。グローバルナビって使ってる?と(笑)

確かに、情報が多くサイドバーだけではそのサイトの内容にさっくりアクセスできない場合もあるので、そういう時はグローバルナビはあった方がもちろん良いですが、特定のカテゴリに特化したサイト、例えばゲームの情報ブログとかでも、MMORPGとくくれば色んなゲームを扱うことになりますが、仮にグラナドエスパダに特化したサイトであれば、書くことはそのゲームの内容だけですし、サイドバーだけでも何とかなるような気もしないでもないわけです。

プレイ日記のようなブログであれば、アーカイブであったり、タグクラウドだけあればたいていイケルような気もします。しかしながら全く要らないかというとそういうわけでもないので、どこかに表示できるようにしておくのは必要だと思います。そうなると、デッドスペースを利用するのがいいじゃない?!って事で、今回の運びと相成ったわけでございます。

動作の仕組み

まず、グローバルナビをクローンします。

これで変数menuに#naviの中にある.menuがクローン(複製)されます。普通にクローンするだけだと、タイトル下にメニューが残るのでremove()してからクローンすることで、元々の位置のグローバルナビを消して変数にその構造を格納することができるというわけです。他にも、色々要素を移動させる方法がありますが今回は上記の通りで作業します。

次に、今クローンしたグローバルナビを入れるブロックをjQueryで作ります。今回はbodyタグ下に.newMenuと.newMenuBを作ることにしました。

.newMenuBのタグの中にあるfa_openはfontAwesomeの矢印を入れるための変数です。中身は、通常利用するhtmlの通り、iタグにfontAwesomeのclassが入っているだけのものです。
moveTargetも変数です。ここには#containerと、.newMenuが入ります。この2つに対してtransitionを値の変化が起こった際にアニメーションさせるために仕込んでます。これはcssに書いても良いのですが、まぁついでだったので(笑)

入れ物と、矢印部分の要素の挿入ができたので、ここに変数menu、つまりはグローバルナビの中身を入れます。グローバルナビの元々のcssは#navi の中にあるものとして書かれているので、.newMenuの中に入れれば、対応するスタイルが定義されていないため新たに追記するだけでスタイルが反映されます(おそらく)。
仮に、グローバルナビの内容が入っている変数menu(jQueryオブジェクト)は、元に戻したい場合は元の位置にappendしたりprependしたりすれば戻ります。逆を言えば、どこにでも挿入できるということです。その入る場所用のcssが別途必要になりますけれども。

グローバルナビなどが準備できたら今度は、どのようにしてパネルを開くかなんですけれども、今回は、右側にスライドする事でメニューが表示され、メニューが表示されると#containerとかぶるので#containerも一緒に同じだけ右にスライドさせます。

スライドする仕組みは、cssのtransform: translate3d(x,y,z)で、xの値を変化させます。これらを.menuonと言うスタイルに書いておき、.newMenuB(矢印)もしくは、少しだけ見えている.newMenuがクリックされた時にjQueryで該当要素にaddClassを利用し、クラスを付与することで実現しています。今回は、transitionも仕込んであるので、閉じる動作をしなくても良いように、toggleClassにて、.menuを付けたり外したりすることによりパネルの開閉をさせています。

jQueryとしてはこれだけで、新たにhtmlに必要なブロックを挿入し、パネルの開閉にて操作できるような仕組みができました。

今回は、面倒だったのでcssにて、.newMenuの中の移動させたグローバルナビのサブメニューを表示させましたが、親メニューをクリックしたらサブメニューが表示されるようにするには、そのようなjQueryによるclassの付け外しが必要になると思います。

本来、.newMenuBにある矢印の部分のアニメーション動作は、cssのキーフレームあたりを利用するのが滑らかになるだろうかと思います。今回は、三角関数のsinカーブによる左右の動きを付けてみました。sinカーブは正弦曲線と言われ、簡単に言うと1と-1を往復する曲線なわけです。なので右行ったり左行ったりと言うのを1から-1になるループを利用して実現しています。それだけではあまり滑らかに見えなかったのでtransitionも併用しています。ここらはvelocity.jsなどを利用するともっと滑らかで簡単に、またjQueryのanimateよりもコマ落ちすること無く実現できるかと思います。

cssについては、好きにデザインできるところですから、特にこれといった解説はしませんが、サンプルはscssで書かれているため、そのままSimplicityの子テーマstyle.cssなどに追記するだけでは適用されません。サンプルのcss部分にview compiledと言うボタンがあるかと思うので、それを押してcssに変換してから利用してください。

またサンプルは表示領域が狭いため記事にボタン(.newMenuB)がかぶってしまっていますが、本来は左側のデッドスペースを有効利用する目的なので予めご了承ください。

スポンサーリンク

シェアする

フォローする