2019.04.08
【jQuery】軽量・シンプルな横からスライドするドロワーメニュー「YSSスライダー」を作りました。
スマートフォンサイトなどのメニューは、横からスライドして出てくるドロワーメニューを実装できると素敵です。
ドロワーメニューのjQueryプラグインは色々とあるのですが、動きがもっさりしていたり、理想の動きにするために複雑なjsファイルに手を加える必要があったりと、痒いところに手が届かずもやもやとしていました。そんな中、ある案件で近しいものを作成したので、こりゃ使えるぞということでドロワーメニューのプラグインとしてブラッシュアップしました。
その名も「YSSスライダー」です！！！！YSS！！YSS！！！！
YSSスライダーの特徴
・スライドで出す要素と開閉ボタンはbody内のどこにおいても良い
・ひとつのページにいくつも設置できる
・レスポンシブ対応
・余計なオプションが無く軽量
・余計なオプションが無いのでカスタマイズしたい場合はJS、CSSの知識が必要
とにかく汎用性が高くなるようにしています。他のドロワーメニュープラグインでは、スライド要素がbody直下になければならなかったり、ボタン要素の挙動を複雑なクラス付与で行う必要があったりと、導入が面倒だったりします。
「YSSスライダー」はボタン要素もスライド要素もbody内のどこにおいても良く、複数導入可能、付与しなければならないクラスも最低限にしています。また挙動もスライドが出てくるという最低限のものしか実装していないので、スライド要素や開閉ボタン要素へのCSS反映に自由度があります。
なのでグローバルメニューとして使うだけでなく、本文内にボタンを配置してモーダルウィンドウのような使い方をすることも可能です。ボタンの兄弟位置にスライド要素を置くこともできるので、ソースの管理も容易です。
使い方
・jQueryを読み込む
・yssのJSファイルとCSSファイルを読み込む
・スライドさせる要素に「yss_contents」クラスを付ける
・開閉ボタンの要素に「yss_open」クラスを付ける
・連動するスライド要素とボタンに共通のyssデータ属性を付ける 例：「data-yss=”hoge”」
・スライド要素内に閉じるボタンを置く場合は、ボタン要素に「yss_close」クラスを付ける
サンプル
スタンダード
まずページの上部でCSSを読み込みます。
<link rel="stylesheet" href="../js/yss/yss.css">
ページ下部でjQueryとJSファイルを読み込みます。
<script src="../js/jquery-3.2.1.min.js"></script> <script src="../js/yss/yss.js"></script>
あとは以下の様に、開閉ボタンやスライド要素にクラスとデータ属性を付けます。
<p class="yss_open" data-yss="number1">開くボタン</p>
<div class="yss_contents" data-yss="number1">
<p class="yss_close">閉じる</p>
<!-- スライド要素内 -->
</div>
複数設置
複数設置は、複数の開閉ボタンとスライド要素を用意し、それぞれに異なるデータ属性を設定します。
<p class="yss_open" data-yss="number1">開くボタン</p>
<div class="yss_contents" data-yss="number1">
<!-- スライド要素内 -->
</div>
<p class="yss_open" data-yss="number2">開くボタンその2</p>
<div class="yss_contents" data-yss="number2">
<!-- スライド要素内 -->
</div>
「number1」のボタンを押せば「number1」のスライド要素が開き、「number2」のボタンを押せば「number2」のスライド要素が開きます。
スマートフォン対応
ボタンとスライド要素に「yss_pchide」クラスを付けると、指定したブレークポイントよりウィンドウサイズが広い場合にボタンとスライド要素が非表示になります。
<div class="yss_open yss_hamburger yss_pchide" data-yss="number3">開くボタン</div>
<div class="yss_contents yss_pchide" data-yss="number3">
<!-- スライド要素内 -->
</div>
ブレークポイントは初期値では768pxになっています。調整したい場合はyss.jsの9行目を編集してください。
$('.yss_contents').each(function() {
var
current_scrollY,
$open_btn,
$close_btn,
$contents = $(this),
id,
breakpoint = 768; //ブレークポイント
$(function(){
幅が狭いもの
スライド要素の幅はCSSで指定可能です。
.yss_contents{
width:70%;
}
左から出てくる
スライド要素を左から出したい場合はスライド要素に「yss_left」を付けます。
サンプル
<p class="yss_open" data-yss="number1">左から出てくる</p>
<div class="yss_content yss_left" data-yss="number1">
<p class="yss_close">閉じる</p>
<!-- スライド要素内 -->
</div>
はじめこの機能はオプションとして用意していなかったのですが、ひとつのページに右らからのドロワーメニューと左からのドロワーメニューが存在するのは必要なシーンがありそうに感じたので追加しました。
ドロワーメニューを自作するとき、品質を高めようとすると思いのほか難しい
軽い気持ちで作り始めたドロワーメニューですが、とりあえず形にするのは容易でも、きちんと品質が高いものにするのはなかなか大変でした。例えばスライドを表示中にスライド内がスクロールできなくなってしまい、隠れている本文がスクロールしてしまっているなど、奇怪なバグが次々湧いてくるのです。
「YSSスライダー」はそのようなバグを一つ一つ潰しているので、なかなか安定的に使用できると思います。
ダウンロード
GitHubで公開しています。以下のリンク先にある「Clone or download」ボタンからダウンロードできます。
ダウンロード
