スマホサイトにおすすめ!ドロワーのjQueryプラグインを作ってみた

スマホサイトにおすすめ!ドロワーのjQueryプラグインを作ってみた

主にスマートフォンサイトを制作するときにおすすめなドロワーのjQueryプラグインをつくってみました。

ダウンロードはこちら

つくってみた背景

現在の現場では十数個のサービスを管理しているのですが、結構古いデザインのものが多くて最近はリニューアルばかりしているんですね。どんなサイトかは言えないですが、基本的にはジャンルはみんな同じで横展開しているサービスなんですね。なので、基本UIは同じような感じです。

なので、共通のUIはプラグインしちゃったほうが楽じゃん!!ってことでプラグイン化してみたんです。

ブラウザサポート

PC対応用にもIEとかもみとけよって話ですが、とりあえずSP用ってことでご勘弁を・・・
時間が空いたら確認・修正いたします。

  • Chrome最新
  • Android: 4.1以上
  • iOS: 6以上

使い方

head内でCSSを呼び出し

<link rel="stylesheet" href="dist/css/simple-drawer.css">

bodyの終了タグの前でjQueryとプラグインを呼び出し

<script src="dist/js/vendor/jquery-2.1.1.min.js"></script>
<script src="dist/js/jquery.simpledrawer.js"></script>

基本設定はこれだけです。あとは、下記のテンプレのようにマークアップしてください。

<div class="simple-drawer-fixed-bar">
    <span class="simple-drawer-btn">
        <i class="simple-drawer-btn__icon"></i>
    </span>
</div>
<div class="l-wrapper simple-drawer-wrapper">
    <main role="main">
        メインコンテンツ
    </main>
    <div class="simple-drawer">
        <div class="simple-drawer-inner">
            <aside role="complementary">
                ドロワー
            </aside>
        </div>
    </div>
</div>

JavaScript

jQuery(document).ready(function($){
    $(".simple-drawer").simpleDrawer();
});

こんな感じです。極力シンプルに最小限の機能だけを実装にしました。結構高機能なプラグインが多いですけど、個人的にはいらない機能がたくさんあってあまり好きではないです。

オプション

JavaScript側では大まかなオプションの変更ができます。あとはSassで色やアニメーションのスピードなど見た目の部分を調整できます。もちろんコンパイル後のCSSでも修正できますが、Sassでやったほうが一括で変更できるのでおすすめです。

JavaScript

主にJavaScript側ではクラスの命名とドロワーの向き、barの固定を設定しています

$(".simple-drawer").simpleDrawer({
    btnside         : 'left', // left or right
    drawerside      : 'left', // left or right
    fixed           : true // true or false
});

Sass Config

_configs.scss内の値を変更することで背景の色やドロワーのサイズなどを調整できます。

// Base
$base-size                      : 8px;
$base-width                     : 320px;

// Color
$color-base                     : #9265cf;
$color-primary                  : #f4f4f4;
$color-secondary                : #212121;
$color-overlay                  : #000;

// z-index
$z-index-base                   : 1000;

// animation
$animate-speed                  : .3s;

// fixed-bar
$fixed-bar-height               : 44px;

// hamburger
$hamburger-line-thickness       : 1px;

ぜひ使ってみてくださいー

ダウンロードはこちら

オススメの本



作りながら学ぶjQueryデザインの教科書

美しいUI/UXを実現する技術が必ず身につくレスポンシブ対応のUI/UXを実現する技術が身につくすぐに使える実用サンプルを作り、動かしながら、学習。jQueryのワンランク上の書き方が、この一冊で学べます。

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

同じカテゴリーの記事

ページの先頭へ