Created
November 25, 2015 07:52
-
-
Save inakagawa/733b870995e96a84301b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="ja"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>hamburger menu 3</title> | |
<!-- drawer css --> | |
<link rel="stylesheet" href="./drawer.min.css"> | |
<!-- jquery & iscroll & dropdown --> | |
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.1/iscroll-min.js"></script> | |
<script src="http://cdn.rawgit.com/ungki/bootstrap.dropdown/3.3.1/dropdown.min.js"></script> | |
<!-- drawer js --> | |
<script src="./jquery.drawer.min.js"></script> | |
</head> | |
<body class="drawer drawer-left drawer-navbar"> | |
<header role="banner"> | |
<div class="drawer-header"> | |
<button type="button" class="drawer-toggle drawer-hamburger"> | |
<span class="sr-only">toggle navigation</span> | |
<span class="drawer-hamburger-icon"></span> | |
</button> | |
</div> | |
<div class="drawer-main drawer-default"> | |
<nav class="drawer-nav" role="navigation"> | |
<div class="drawer-brand"><a href="./">drawer</a></div> | |
<ul class="drawer-menu"> | |
<li class="drawer-menu-item"><a href="#">このサイトについて</a></li> | |
<li class="drawer-menu-item"><a href="#">記事1</a></li> | |
<li class="drawer-menu-item"><a href="#">記事2</a></li> | |
</ul> | |
<div class="drawer-footer"><span></span></div> | |
</nav> | |
</div> | |
</header> | |
<div class="drawer-overlay"> | |
<!-- content --> | |
</div> | |
<div class="main"> | |
<div class="invoker"> | |
push here to invoke drawer | |
</div> | |
</div> | |
<script> | |
$(document).ready(function() { | |
// ドロワーを準備 | |
$(".drawer").drawer(); | |
// 任意の要素にイベントを設定 | |
$(".invoker").on('click',function(){$('.drawer').drawer('open');}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
jquery ドロワープラグインの使用例
.drawer に対して drawer() で各種クラス、イベントをセットする。
どのクラスが何として働くかは、drawer() への引数で指定可能。