ウェブデザイナーの毎日のお仕事のメモ - mainichi web まいにちウェブ

作成日:2020.11.10  最終更新日:2021.01.04

js / jQuery

プラグインdrawer.jsの使い方(横からスライドするメニュー)

横からスライドするメニューを作ることができる、drawer.jsの使い方をまとめてみました。

drawer.jsの使い方手順

①ファイルのダウンロード

Drawerのページのダウンロードボタンを押下して、ファイルをダウンロードしてくる。

drawerはここからダウンロードします。

②必要なファイルをサーバーにアップロードする

  • drawer.min.css
  • drawer.min.js

の2つのファイルを任意のフォルダにアップロードする。

※minファイルではないファイルも準備されていますので、ご自身の用途に合わせてしようファイルをお選びください。

③ファイルを読み込む

※drawer.min.jsより先にjqueryファイルと、iscroll.min.jsも読み込みます。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <link rel="stylesheet" href="/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.2.0/iscroll.min.js"></script>
    <script src="/js/drawer.min.js"></script>
  </head>
  <body>
  </body>
</html>

④HTML、JSに必要な記述をする

HTML

<body class="drawer drawer--left">
  <header>
	<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">
		<p>タイトルなど</p>
		<ul class="drawer-menu">
			<li><a href="#">1番目の項目</a></li>
			<li><a href="#">2番目の項目</a></li>
			<li><a href="#">3番目の項目</a></li>
		</ul>
	</nav>
</header>

  :

</body>

.drawer-nav の中に、スライドインしてくるコンテンツの中身を書いてあげる。
中身はご自身のサイトに合わせて色々変更してください。

JS

$('.drawer').drawer();

これだけでOKです。
以下にサンプルページをつくってみました。

drawerの表示を右から、にしたい場合

HTML

<body class="drawer drawer--right">

bodyに付けるクラスを、"drawer drawer--right"にします。

最新記事