2018.02.11 2021.10.10

横からスライドしてくるドロワーメニューが超簡単につくれる『Drawer』

KOSAERU WEB MEMO CSS Javascript

最近のサイト制作において、特にスマホサイトからのアクセス数を意識している方からのオーダーとしてドロワーメニューを採用して欲しいというリクエストが多い。

方法は色々あるが、最近よく使っているのが『Drawer』。
理由は簡単！設置とカスタマイズが簡単だからだ。あと動きもスマート♪

今後も使っていくと思うので設置方法をメモをしておきます。

１．必要なCSSとJSを設置

『Drawer』公式サイトから必要ファイルをダウンロードする方法と、CDNを使う方法がある。
以下の記述は、CDNを利用する場合の記述。JSはフッタに設置が良いかもね。

『Drawer』CDN

<!-- drawer.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css">
<!-- jquery & iScroll -->
<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>
<!-- drawer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"></script>

２．メニューを設置

<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-brand" href="#">Brand</a></li>
        <li><a class="drawer-menu-item" href="#">Nav1</a></li>
        <li><a class="drawer-menu-item" href="#">Nav2</a></li>
      </ul>
    </nav>
  </header>
  <main role="main">
    <!-- Page content -->
  </main>
</body>

<span class="sr-only">toggle navigation</span>

</button>

<li><a class="drawer-brand" href="#">Brand</a></li>

</ul>

</nav>

</header>

</main>

</body>

3.Javascriptを書く

オプションもある。『Drawer』公式サイトでチェック。

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

$(document).ready(function() {

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

});

４．その他

・メニューを左に設置するときは

・メニューを右に設置するときは

・開閉ボタンはどこでも設置可

<button type=”button” class=”drawer-toggle”>Drawer toggle</button>

・PCとスマホについて

PCとスマホではサイズやメニューの開く幅を変えると良いだろう。
ともかくCSSをグリグリ書くことでどうにでもなる。

Drawer – Flexible drawer menu using jQuery, iScroll and CSS.
http://git.blivesta.com/drawer/

WEB MEMO CSS Javascript

関連するタグの記事

HP・LP制作でいつか使うかもしれないCSSネタ

2021.02.09 2023.06.22

CSSのみで作れるドロワーメニュー CSSのみで作れるってとこが良いですね。 See the Pen drawer menu by himeka223 (@himeka223) on CodePen. スクロールすると見出しを固定用語集…

CSS｜テキストが表示領域を超えている時に途中でテキストを切って「・・・」を表示させる方法

2016.02.29 2021.10.10

省略可能なテキストを省略して「・・・」を表示させます。デザイン的に整列して表示させたい時なんかに便利 ▼基本 [crayon-6741d0a8a8923964334459/] ▼例：以下のようなことがでけました。 …

CSSのみでモーダルウィンドウを作ってみた！

2016.02.23 2021.10.10

このブログのスマホ用テンプレートで採用してみたモーダルウィンドウ。スマホではメニューや検索フォームを隠して、ファーストビューをすっきりさせたかったので採用してみました。あと、今どきっぽくてカッコ良いかと思ったので。 ▼モーダルウィンドウを…

CSSのfont-familyで割と綺麗な明朝体を指定することがでけた！

2016.05.17 2021.10.10

これまで明朝体を使う時は画像を使っていたけど以下のように、CSSのfont-family指定で割と綺麗なカンジで使えたので、今後は画像を使わなくても良いかも。と、いうことでメモメモ ((φ(-ω-)ｶｷｶｷ [crayon-6741d0a8a8a1d62…

CSS テーブルの列幅を均等にする

2016.05.16 2021.10.10

CSSでテーブルのセルの幅を均等にする方法。 table-layout:fixed; を利用する。 [crayon-6741d0a8a8a66385740467/]

CSS テキストシャドウで文字を縁取る

2015.12.11 2021.10.10

text-shadow: black 1px 1px 0px, black -1px 1px 0px,black 1px -1px 0px, black -1px -1px 0px; 影の色、横のずれ、下のずれ、ぼかし具合