【js】ドロワーメニュー作成 No.02（レスポンシブ対応）

ホーム » N-PLUS 全記事一覧 » DEMO » 【js】ドロワーメニュー作成 No.02（レスポンシブ対応）

【js】ドロワーメニュー作成 No.02（レスポンシブ対応）

JQuery・JS／DEMO

■Javascript CODE

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

■CSS CODE

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/css/drawer.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.1.3/iscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

■HTML CODE

<body class="drawer drawer--left">
<header role="banner">
<button type="button" class="drawer-toggle drawer-hamburger">
<span class="sr-only">toggle navigation</span>
<span class="drawer-hamburger-icon"></span>
</button>
<nav class="drawer-nav" role="navigation">
<!-- ここからドロップダウンの中身 -->
<ul class="drawer-menu">
<li><a class="drawer-menu-item" href="#">Left</a></li>
<li class="drawer-dropdown">
<a class="drawer-menu-item" href="#" data-toggle="dropdown" role="button" aria-expanded="false">Navbar <span class="drawer-caret"></span>
</a>
<ul class="drawer-dropdown-menu">
<li><a class="drawer-dropdown-menu-item" href="#">Dropdown nav1</a></li>
<li><a class="drawer-dropdown-menu-item" href="#">Dropdown nav2</a></li>
<li><a class="drawer-dropdown-menu-item" href="#">Dropdown nav3</a></li>
</ul>
</li>
</ul>
<!-- ここまでドロップダウンの中身 -->
</nav>
</header>
<main role="main">
<p style="text-align: center;">左上のメニューボタンをクリック！</p>
</main>

</body>