FEVDES BLOG

自分の経験をシェアしたい。Webデザインのテクニック&効率化。

Javascript jQuery

ドロワーメニューの「simple-sidebar」の簡単なサンプル

投稿日:

SPONSORED LINK

01

simple-sidebar

スマホなどの、ドロワーメニューの追加で便利な「simple-sidebar」。
サンプル通りに作っても、つまづいたので、備忘録代わりに簡単なサンプルを作りました。

作り方

今回のデモは下記から確認できます。

デモはこちら

2016013022422618024

JavaScript読み込み

ソースはGitHubの「simple-sidebar」の「download.zip」から、ダウンロードできます。

<head>部分に、jQueryとjQueryUI及び、ダウンロードしてきた 「jquery.simple-sidebar.min.js」を読み込みます。
今回は「js」フォルダ内に「jquery.simple-sidebar.min.js」を置いています。

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script src="js/jquery.simple-sidebar.min.js"></script>

HTML

HTML部分は以下の通り。

  • 「.header」が固定のヘッダー
  • 「.gNav」がスライドしてくるナビゲーション
  • 「.container」がコンテンツ部分

です。

<div class="header">

	<div class="header__btnMenu">Menu</div>
	<!-- /.header__btnMenu -->

</div>
<!-- /.header -->

<nav class="gNav">

	<ul class="gNav__list">
		<li><a href="#">Navigation</a></li>
	</ul>
	<!-- /.gNav__list -->

</nav>
<!-- /.gNav -->

<div class="container">



</div>
<!-- /.container -->

CSS

CSSでは、ヘッダーの固定をしています。
今回は、「.header__btnMenu」が、メニューのボタンになります。

/*===============================================================
	header
================================================================*/
.header {
  background: #202020;
  height: 54px;
  position: fixed;
  width: 100%;
  z-index: 100;
}
.header .header__btnMenu {
  background: #eee;
  height: 36px;
  top: 10px;
  right: 10px;
  position: absolute;
  width: 36px;
}

/*===============================================================
	gNav
================================================================*/
.gNav {
  background: #fff;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.gNav .gNav__list li {
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  width: 100%;
}
.gNav .gNav__list li a {
  color: #333;
  display: block;
  padding: 15px 10px;
  text-decoration: none;
}

/*===============================================================
	container
================================================================*/
.container {
  background: #eee;
  height: 2000px;
  padding-top: 54px;
  position: relative;
  width: 100%;
}

JavaScript

  • 「$(‘.gNav’)」で、スライドするナビゲーションを指定しています。
  • 「opener」は、スライドを作動させるためのボタンを指定します。今回は、「.header__btnMenu」です。
  • 「wrapper」はコンテンツ部分を指定します。今回は、「.container」です。
  • 今回は、右からナビゲーションをスライドさせたいので「align: ‘right’」を指定しています。右からスライドさせたい場合は、「align: ‘left’」を指定します。
$(function(){

	$('.gNav').simpleSidebar({
		opener: '.header__btnMenu',
		wrapper: '.container',
		animation: {
			easing: 'easeOutQuint'
		},
		sidebar: {
			align: 'right'
		}
	});

});

デモはこちら

-Javascript, jQuery

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Magnific PopupでYouTubeに関連動画を表示させない方法

SPONSORED LINK Youtube の動画をLightboxのようなモーダルウィンドウで表示できるMagnific Popup。 レスポンシブ・デザインに対応しているので便利です。 Magn …

デザイナーでもJavaScriptやjQueryが必ず上達する3つのコツ

SPONSORED LINK いまやJavascriptを使わないサイトはほぼないと思います。 WEBデザイナーもJavascript、せめてjQueryは使えないと 厳しい時代です。 JavaScr …

no image

見てて楽しいParicleアニメーション

SPONSORED LINK Flashでのリッチコンテンツ隆盛だったころに、パーティクルは憧れでした。 CodePenにあったParicleアニメーション。 やっぱり眺めているだけでも楽しいです。

jQuery

jQueryでスクロールするとヘッダーを固定させる

SPONSORED LINK 最近よくあるページがスクロールを始めるとヘッダーの位置が固定するjQueryのスクリプトです。 よく使うのでメモがわりに掲載します。 基本は簡単なので覚えておけばいろいろ …

WordPressに自動でBootstrapのレスポンシブのテーブルのクラスを適用する

SPONSORED LINK WordPressにBootstrapのレスポンシブのtableクラスである、table-responsiveを適用する方法です。 jQueryを使うことで、ソースを扱わ …

KIYOTA
KIYOTA
Webデザイナー / ウェブ解析士
デザインとコーディングと制作現場が大好きなWebデザイナー(Webデザイナー歴13年)
コーポレートサイトを中心に、官公庁・公共施設・メディア・商業施設・不動産など多岐のジャンルのWebサイトを数百件制作。
モットーは「Speed & Quality」。
広範囲な知識・技術・経験を活かした素早い制作が得意。 WACA上級ウェブ解析士。