【jQuery】スマホサイトにオススメ!ドロワーメニュースクリプトDrawer Menu with CSS Animations

スマホサイトなどでよく使われているドロワーメニュー。
トリガーをクリックしたらアクションが発生し、CSSアニメーションを使用して横からメニューを表示させるあれが実装できるスクリプト。

DEMOに紹介されているのはベーシックなレフト、ライトとレスポンシブ用。
対応ブラウザーはIE 10,chrome,Firefox,opera,Mac safari,iOS7 safar,iOS7 chrome

ライセンスはMIT license.

CSS・JS

<!-- drawer css -->
<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>

HTMLマークアップ

<body class="drawer drawer-right">
<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="./base">base</a></li>
</ul>
<div class="drawer-footer"><span></span></div>
</nav>
</div>
</header>
<div class="drawer-overlay">
<!-- content -->
</div>
</body>

Drawerを読み込む

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

【jQuery】スマホサイトにオススメ!ドロワーメニュースクリプトDrawer Menu with CSS Animations

  • LATEST
  • RELATED
  • POPULAR