ウェブデザイナーの毎日のお仕事のメモ

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

js / jQuery

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

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

sidr.js を使ったスライドするメニューの完成イメージ

このサイトでも、sidr.jsを使っています。

ブラウザがスマホサイズになると、メニューボタン(ハンバーガーメニューボタン)を押すと、右からグローバルナビゲーションがスライドインしてくる作りとなっています。

最初はグローバルナビゲーションは非表示になっていますが、

右上のハンバーガーメニューを押下すると、

右からシュッとナビゲーションが出てくるようになっています。

sidr.jsの使い方手順

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

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

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

  •  jquery.sidr.dark.css (自分が使用したいスタイルのcss)
  •  jquery.sidr.js

の2つのファイルを任意のフォルダにアップロードする。
※cssは、ご自身が好むスタイルのcssを選んで1つアップロードしてください。

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

③ファイルを読み込む

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,minimum-scale=1">
    <link rel="stylesheet" href="/css/jquery.sidr.dark.css">
  </head>
  <body>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/jquery.sidr.js"></script>
  </body>
</html>

※jquery.sidr.jsよりも上部に、jQueryのファイルを読み込むようにしてください。

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

HTML

<a id="right-menu" href="#">Toggle menu</a>
<div id="gnav">
  <ul>
    <li><a href="#">about</a></li>
    <li class="active"><a href="#">news</a></li>
    <li><a href="#">contact</a></li>
  </ul>
</div>
〜ここにコンテンツが入ります。〜

#gnav の中に、スライドインしてくるコンテンツの中身を書いてあげる。

JS

$('#right-menu').sidr({
		name: 'sidr-right',
		side: 'right',
		source: '#gnav'
});

side: 'left' とすると、左からスライドインすることもできます。

レスポンシブに対応させるには

CSS

#right-menu {
    display: none;
}

@media only screen and (max-width: 767px){
    #right-menu {
        display: block;
    }

    #gnav {
        display: none;
    }
}

上記のように、ブラウザのサイズがある一定よりも小さくなったら、display:block;で表示する。
のように、cssで表示非表示を切り替えてレスポンシブに対応させます。

以下にサンプルページをつくってみました。

767px以下になると、グローバルナビゲーションがスライドインする形に変わります。
試してみてください!

最新記事