【jQuery】メニューが横からスライドして表示される[Drawer]の使い方。(1)TagsONZE株式会社オンズ企業サイトへMenu株式会社オンズ開発ブログ【jQuery】メニューが横からスライドして表示される[Drawer]の使い方。【jQuery】メニューが横からスライドして表示される[Drawer]の使い方。Googleボタンをクリックすると横からスライドして現れるドロワーメニュー。最近のレスポンシブ対応ウェブサイトで多用されてきているので、もうお馴染みですね。プラグイン[Drawer]の使い方を紹介します。動作サンプルですが、公式サイトの例に倣って実際に試してみました。https://on-ze.com/demo/jquery-drawer/左上のアイコンをクリックするとメニューがスライドして表示されます。レスポンシブデザインにも対応済み。表示されたメニューの高さがウィンドウの高さを超える場合は独立してスクロールします。公式サイト(http://git.blivesta.com/drawer/)にて導入方法が説明されていますが、以下で詳しく解説していきます。必要なファイルを入手する最初にファイルをダウンロードしたいところですが、この[Drawer]は必要なファイルがすべてCDNで配信・提供されています。メインとなる「drawer.js」の他に、「jquery.js」と「iscroll.js」を利用することになります。必須ではありませんがスタイルシートの「drawer.css」も配信されています。すべて下記コードをHTMLに記述すればOKです。src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.1.0/js/drawer.min.js"></script>各CDNによりデータが高速配信されるのでサイトの表示速度向上にも繋がります。