読者です 読者をやめる 読者になる 読者になる

Test!

写真とWebデザインと時たまダイエット

Drawer メニューの追加と 文字の切り替え @Jquery

スマートフォンとかでよく見かけるメニュー。上に三本の線があってそこを押すと

メニューがにょきっと出てくるやつ。それを手軽に使えるのが下記のスクリプト

CDNもあるのでとっても便利。

Drawer - Javascript · Drawer · A small CSS3 and jQuery plugin for app style drawer menu.

 

まずはスクリプトをダウンロードしてきまーす。

またはCDNで読み込んでもOK。

cdnjs.com

読み込みが必要なのは下記のファイル。

<link rel="stylesheet" href="../css/drawer.min.css">

<!-- jquery & iscroll & dropdown -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.1/iscroll-min.js"></script>
<script src="//cdn.rawgit.com/ungki/bootstrap.dropdown/3.3.1/dropdown.min.js"></script>

<!-- drawer js -->
<script src="../dist/js/jquery.drawer.min.js"></script>

 

drawer.min.cssJquery.draer.min.jsもCDNにあったのでそれを読み込んでもOK

https://cdnjs.cloudflare.com/ajax/libs/drawer/2.4.0/js/jquery.drawer.min.js

https://cdnjs.cloudflare.com/ajax/libs/drawer/2.4.0/css/drawer.min.css

 

でもって、公式サイトにのっている方法を参考にHTMLを書く。

Drawer - HTML markup · Drawer · A small CSS3 and jQuery plugin for app style drawer menu.

レスポンシブタイプや、トップ固定タイプなど。


で、スクリプトを呼び出す。

$(document).ready(function() {
  $(".drawer").drawer();
});

 

 以上でだいたい動く。

とても簡単。

 

ただ、メニューバーをスマフォで開いたときに閉じるボタンがわかりずらいので

メニューの文字をボタンを追加して、それを開いたときに閉じるになるように文字を変えたあげるスクリプトを書く。

文字を変える方法はこちらを参考にした。

jQueryで開閉メニュー&ボタンのテキストを切り替える | blog|blow→in

  var flg = "close";
jQuery(".drawer-toggle").click(function(){
if(flg == "close"){
jQuery(".menutitle").text("閉じる");
flg = "open";
}else{
jQuery(".menutitle").text("メニュー");
flg = "close";
}
});

でもって

 htmlはこんな感じで。

 

<div class="drawer-header">

<button type="button" class="drawer-toggle drawer-hamburger">
<div id="overlay">
<span id="close" class="menutitle">閉じる</span>
</div>
<span id="btn" class="menutitle">メニュー</span>

<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>
</div>

cssは省略