2014
7
28
スマホ版で上からメニューがにゅっと降りてくるjQueryを実装してみた

このブログは、スマホ用に別テーマをつくってあるんですが、そこのメニューを今風(?)にしてみたいなーと思ってやってみました。


こんなかんじに

修正前

140728-1

フッターにただリストが書いてあって、そこにページ内リンクが貼ってあるだけでした。(キャプチャ撮り忘れて、過去のを探したら壁紙が違う時代のやつしか見つからずwww)

修正後

140728-2

ボタンを押すと、上からメニューがにゅっと降りてくるスタイルに。カテゴリやタグなど、更にここからアコーディオン出来たら…と最初ちょっと考えたのですが、内容が多すぎてメニューが全画面被ってしまうのも微妙に思ったので、別画面にリンクする形にしました。

参考

jQueryはあまり得意ではないのですが、こちらを参考にさせていただき、無事実装できました!いつもありがとうございますー!

ボタンをつける

140728-3

まずフォトショでボタンを作成。実寸でつくると、スマホ表示したときにぼんやりしてしまうので、2倍のサイズで。

参考にさせていただいたっていうかもうほぼこの通りすぎるボタンをつくってしまいました!ズルい!すてき!((└(:3」┌)┘))

こちらのフォントを使わせてもらっています。

header.php

ボタン画像と置換するためのmenu_btnpc_btnと、jQueryを動かすためのopenというクラスを与えておきます。

Multi Device Switcherというプラグインでテーマ切替していて、4行目の「PC表示」はプラグインの機能を利用しています。

style.css

160*50pxのボタン画像を、1/2の大きさでテキスト置換して表示しています。

メニュー画面をつくる

140728-4

header.php

シンプルなリストとしてつくっています。最後に「閉じる」用のcloseというクラスを用意しておきます。

カテゴリやタグページなどの設置方法はこちら

style.css

このブログで使ってるCSSなので、細部は調整ください。ざっくりした布の背景画像を用意して、それも1/2の大きさで表示しています。

「閉じる」部分を、最初は画像を使っていたのですが、表示が一呼吸遅れるのが気になって、「そうだ!スマホなんだからCSS3使って矢印つくっちゃえばいいんじゃん!」と(今更)気がつき、やってみました。

正方形にして、左と上だけborderを書いて、それを45°回転させる、という感じでできるんですねー。

こちらを参考にさせていただきました!

開閉させる

jQuery

あとは、openのクラスがクリックされたときにスライドダウンして、closeのクラスがクリックされたらスライドアップ、ということを書いてやります。(WordPressでない場合は2行目と11行目は必要ありません。)

わたしはこのまま使ってますが、slideDown()slideUp()のかっこ内に数値を入れてスピードを調整できます。

Androidで動作不具合

140728-5

さー、これで良し!と思ってしばらく様子を見てたら、なんか…Androidでのタップ領域がおかしい気がする…。。左上あたりを狙わないと動作しないような…。

テキストリンクのときは大丈夫だったんだけどな。画像置換にしてから動作が妙な気が。

いろいろググってみたら、このあたりが怪しい!

divで括る…!ふぉぉ…!こうしたら、全体がタップできるようになりました!凄い!ありがとうございます!!((└(:3」┌)┘))

以上です!自己満足ではありますが、一度こういうのやってみたかったので楽しかったですー!

スマホでよく見る画像のスライドショーと、アコーディオンのメニューを一緒に実装した際のメモもありますのでよろしければ。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 618
  • RSSを登録

公開日:2014/07/28


2件のコメント

  • 通りすがりです
    2015年4月23日 4:06 PM

    昔の記事に余計なお世話で恐縮ですが、slidedown,slideupで開閉するならslideToggleのほうがコードが短くて、間違いも少なくていいですよ。
    $(function(){
    $(“.open”).click(function(){
    $(“#menu”).slideToggle();
    });
    });

    • *you
      2015年4月24日 10:41 AM

      余計なお世話だなんてとんでもないです! アドバイスありがとうございますー!(´∀`*)

コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top