ど素人から毛を生やす。<延>

スマホサイトによくあるタッチでスライドしてくるメニューってかなり簡単に作れる件。

Web > javascript 2015年1月13日(最終更新:2年前)

このページは2015.1.13に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。

スマホサイトを作るにあたって、注意しなければならないのがヘッダー、特にグローバルナビゲーションだと思います。

PCサイトだとヘッダーに情報量が多くてもそこまで支障はありませんが(僕はヘッダーに情報を詰めるの嫌いですが)、スマホサイトで同じことやるとファーストビューがヘッダーのみ、しかも何度かスクロールして漸く本文が出てくるような惨状になります。
直帰率100%は免れません。

ということで、グローバルメニューも常時は隠し、クリックしたらオープンする仕組みにしたい。

で、それを実現するためのjQueryって実はかなり簡単という話です。

$(document).ready(function(){
	$(ボタン).click(function(){
		$(ナビゲーション).slideToggle('slow');
	});
});

たったこれだけです。(゚∀゚)(゚∀゚)

slideToggleがかなり便利でして、これを使うことで記述量は半分以下になります。

slideToggleはslideDownとslideUpを交互に行ってくれるものです。
display:noneならslideUpを、そうでなければslideDownを適用してくれるので、スイッチ用の変数も不要です。

CSSはお好みで。
但し、レスポンシブサイトの場合、ナビゲーションを隠さないサイズの場合に、
ナビゲーション{ dispyay:block  !important;}
をお忘れなきよう。
これがないと、スマホサイズのときにslideDownされたものがPCサイズになっても復活しないのでw

ちなみに、ナビゲーションのボタンをnav:before等で設置すると余分なHTMLを書かなくて良いので良い感じです。
しかしjQueryでは:beforeにイベントを設置することはできないので、nav全体にイベントを設置することになると思います。
その場合、リンクを押したとき一瞬ナビゲーションが閉じてしまうので、それを避けるために、

$(document).ready(function(){
    $("nav").click(function(){
        $("nav ul").slideToggle('slow');
    });
    $("nav ul").click(function(e){
        e.stopPropagation();
    });
});

とかやっておくと良い感じだと思います。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)