*

プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】

公開日: : 最終更新日:2017/11/19 ノウハウ

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。スマートフォンを使っていればいつも何気なしにスマートフォンサイトを見ていると思います。

そのスマートフォンサイトをちょっと思い出してみてください。

スマホサイト

こんなマークを見たことがありませんか?大抵右上か左上にこの三本線マークがあるのではないかと思います。これはメニューのマークです。このボタンを押す事で画面外の上からか横からメニューが出て来る仕様にしているサイトがほとんどです。このメニューはドロワーメニュー、若しくはハンバーガーメニューと呼ばれています。三本線がハンバーガーみたいだからでしょうね。

その理由はメニューをサイト上に表示してしまうと画面のほとんどを専有してしまいます。元々表示する情報量が少ないスマートフォンですので、メニューは常時表示せずボタンを押す事で表示するようになっています。

この仕様は Google のアプリもその仕様ですし、他社のスマホアプリも追従する形となっておりスマートフォンの世界ではほぼ共通仕様となりつつあります。スマートフォンサイトを個人で作る場合もその仕様に則るのが良いでしょう。しかし三本線「≡」がメニューであるというのはスマートフォンに詳しい人しか認知されていないというのが実情です。≡の下に Menu とラベルを付けておくと親切です。

しかし実際スマートフォンサイトのメニューを作るとなると難しそうでしょう。画面外の上からスムーズにシュッと出てくるのですから色々プログラミングとかしなくてはいけないように思えます。

私も実際に作る機会があったのですが、作り方を調べているとプラグインの導入やら冗長なプログラミングコードを見て半ば嫌になってきました。

しかし、ちょっと仕組みを理解してしまえばスマートフォンサイトの上から出てくるドロワーメニュー、意外と簡単なのです。プラグインを使わなくても自作でいけます。

ここではプラグイン無しで簡単に実現するスマートフォンサイトのシンプルなドロワーメニューの作り方を紹介します。

スマホサイトのドロワーメニューの作り方

まずは html 部分から見てみましょう。

html部分

<header>
<div id="menu-bt">
   <img src="https://webmist.info/image/spmenu.png" id="drower" />
</div>
</header>

<nav id="menu">
<ul>
   <li><a href="#">トップ</a></li>
   <li><a href="#">サイト情報</a></li>
   <li><a href="#">商品情報</a></li>
   <li><a href="#">アクセス</a></li>
</ul>
</nav>

基本はこれだけです。まずメニューボタンと、メニューの項目を ul li タグのリストで構成しています。

次は動きを作る jQuery 部分です。シンプルですのであまり警戒しないでくださいね。

jQuery部分

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(function(){
   $("#menu").css("display","none");
   $("#menu-bt").on("click", function() {
      $("#menu").slideToggle(300);
      $(this).toggleClass("active");
   });
});
</script>

jQuery 部分も基本はこれだけです。意外とシンプルだったでしょう。

まずは jQuery 本体をスクリプトタグで読み込みます。

1行目から順番に解説すると、menu という id を指定している部分、すなわちメニュー部分を最初は非表示にしています。次に menu-bt という id を指定している部分(メニューボタン)をクリックするとどうなるかを書いているのが2行目以降です。

そして、メニュー部分に対して slideToggle という関数を呼び出しています。これはスライドさせて表示せよという命令です。カッコ内は何秒でメニューを表示するかという指定です。これはミリ秒で指定します。1秒なら1000です。

最後に menu という id を指定しているメニュー部分に active というクラスを追加しています。これはメニューが開いている状態というのが区別できるようにする為です。

実はここまででドロワーメニューの基本は動作します。下記サンプルをご覧ください。

ドロワーメニューのDEMO1

これだけでも ul li タグのリストがメニューとして上からスライドしてきていますね。しかし、まだ貧相です。ここから CSS でデザインを付けていきます。

CSS部分

nav#menu{
   width:100%;	
}
	
nav#menu ul{
   margin:0px;
   padding:0px;	
}
	
nav#menu ul li{
   list-style-type:none;	
}
	
nav#menu ul li a{
   width:100%;
   display:block;
   background-color:#333;
   color:#fff;
   border-bottom:1px solid #ccc;	
   text-align:center;
   padding:9px 0px 9px 0px;
}

一例ですが、CSS でデザインを付けてみました。CSS が一番長かったですね。デザインを付けたら下記のようになりました。

ドロワーメニューのDEMO2

ここまででもう完成に近い状態になりました。しかしよく見てください。このままでは、メニューをどうやって閉じたら良いかわからない人が出てきそうです。

よく使われる手法としては、メニューを開いたら≡マークを×に変化させる事で閉じる事を示す方法が多いです。×マークで閉じるは Windows でもお馴染みの習わしですからね。

メニューマークを×ボタンに変化させてみましょう。ここではシンプルに×マークの画像を用意して画像だけを変更します。

メニューボタンを閉じるボタンに切り替える

先程の jQuery コードに少し追記します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
$(function(){
   $("#menu").css("display","none");
   $("#menu-bt").on("click", function() {
      $("#menu").slideToggle(300);
      $(this).toggleClass("active");
      if($(this).hasClass("active")){
         $("#drower").attr('src','閉じるボタンURL');
      }else{
         $("#drower").attr('src','メニューボタンURL');
      }
   });
});
</script>

追記したのは「if($(this).hasClass(“active”)){」以降です。

active というクラスが付いていたら、すなわちメニューが開いていたら drower という id が指定してある img タグの src 属性を閉じるボタンの画像 URL に変更するという処理です。逆にメニューが閉じていたらメニューボタンに切り替えます。

この処理を加えると下記のようになります。

ドロワーメニューのDEMO3

これでメニューボタンが閉じるボタンに切り替わるようになりました。

おわりに

スマホサイトのドロワーメニューを作るのは難しそうと思っていましたが、蓋を開けてみたら意外と簡単でした。今回は一番シンプルなドロワーメニューの作り方を紹介しましたが、二段階で展開するメニューや横からスライドするメニューを作りたい場合は、自作だとかなり難しくなってしまうので別途プラグインを導入する必要があります。

関連記事

ローディング画面の作り方

cssとjqueryでサイトのローディング画面を簡単に実現する作り方【プラグインなし】
現在ロード中を知らせるローディング画面(Now Loading)は今までにどこかのサイトで見たことがあるかと思います。かつて FLASH 動画全盛の時代にはこんなローディン

スマホサイトのフッターの作り方

これを見れば簡単!スマホサイトのフッターメニューをサクッと作るサンプル
スマートフォンなどのモバイル端末でウェブサイトを見る人が急増し、今の時代スマートフォン用サイトを作る事が当たり前となりました。スマホ用に別の html ファイルを用意するより一つの

  • Pocket

おすすめトピックス

関連記事

これを見れば簡単!スマホサイトのフッターメニューをサクッと作るサンプル

スマートフォンなどのモバイル端末でウェブサイトを見る人が急増し、今の時代スマートフォン用サイトを作る事が当たり前となりました。スマホ用に別の html ファイルを用意するより一つの html で両方に対応するレスポンシブ […]

マウス
CSSのみでマウスのロールオーバーでopacityだと背景が濃いと白くならない対処法

画像のロールオーバーと言えば、ウェブサイトでリンクが付いた画像やバナーにマウスを乗せた時に色が変わったり何かしら変化がある処理を言います。一昔前には画像のロールオーバー一つに javascript を使って大変面倒で h […]

リファラーによってiframe内のリンク先をjavascriptで変更する

リファラーによってインラインフレーム内にあるリンクのリンク先を変えれたら便利になるなと思って javascript で自作してみました。こんな事したいと思う人は多分いないニッチなものだと思います。 どういう時に使いたかっ […]

画像のALT属性に文字を入れる気にならないのは画面に表示されないからだと思う

画像の ALT 属性って知っていますか?ALT 属性とは画像に付加するテキスト情報で、画像について手短に説明したテキストを入力する事が望ましいです。画像が表示されない時に何の画像かわかる為の代替テキストとして、音声読み上 […]

divタグ
div要素のクラス名をnth-childの擬似クラスで何番目を指定しても効かない

CSS3 が登場して擬似クラス nth-child が使えるようになって、要素の何番目のみにスタイルを適用するような事が非常に簡単になりました。従来ではクラスなどを駆使して無理やり指定していました。これではソースも CS […]

MP3ダウンロード
MP3を1クリックだけでストリーミングせずにダウンロードする方法

私はこのサイトとは別に、効果音や BGM の素材サイトを運営しています。ふとそのサイト名で google 検索をしてみた所、驚くべき光景を目にしました。 ポケットサウンドというのがそのサイト名なのですが、Google の […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
microUSBケーブルでもUSB Type-Cに対応させるには変換アダプタを使おう

USB ケーブルといえば様々な家電や端末に使います。スマートフ

作業用BGMをすぐに探して作業したい人向けサイト「#作業してくる」の使い方と活用法【無料】

創作活動にしろ、書類作成、レポート作成、現代を生きる人々には作

ボンボンショコラ
珠玉のチョコレート専門店!滋賀県長浜市の黒壁近く「ボンボンショコラ」

滋賀県長浜市に本格チョコレート専門店があります。その名前は「L

縦の三点リーダー
縦の三点リーダーをウェブサイト上で表示する方法

三点リーダーという言葉をご存知でしょうか。日本語の世界では度々

漬けトロチャーシュー麺
ボリューム満点の漬けトロとんこつラーメン!滋賀県長浜市の「麺屋風火」

滋賀県長浜市に出来たラーメン屋「麺屋風火」へ行ってきました。元

→もっと見る