NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

レスポンシブWebデザインにも対応した、サイドバーを折り畳むことができる「Simple Sidebar」

2014年12月5日jQueryプラグイン活用

レスポンシブ・ウェブデザインにも対応した、サイドバーを折り畳むことができる「Simple Sidebar」

ボタンをクリックすると横からサイドバーを表示することができます。オプションを変更することで表示位置を右か左か選択可能です。
使用する際はjQueryに加えて、jQuery UIの読み込みも必要です。

デモページ

JavaScript

(function($){
	$(function(){
		$.ajaxSetup({
			cache: false
		});
		$('#side').simpleSidebar({
			settings: {
				opener: '#sideOpenBtn',
				wrapper: '#contents',
				animation: {
					duration: 300,
					easing: 'easeInOutQuint'
				}
			},
			sidebar: {
				align: 'right',
				width: 200,
				closingLinks: '#closeBtn',
				style: {
					zIndex: 100
				}
			},
			mask: {
				style: {
					backgroundColor: '#000000',
					opacity: 0.4,
					filter: 'Alpha(opacity=40)'
				}
			}
		});
	});	
})(jQuery);	

HTML

<div id="contents">
	<div id="sideOpenBtn"></div>
	<div id="side">
		<p id="closeBtn">x</p>
		<p class="title">side menu</p>
		<ul>
			<li><a href="#">menu01</a></li>
			<li><a href="#">menu02</a></li>
			<li><a href="#">menu03</a></li>
			<li><a href="#">menu04</a></li>
			<li><a href="#">menu05</a></li>
		</ul>
	</div>	
	<div id="main"></div>
</div>

CSS

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
#sideOpenBtn {
	position: relative;
	width: 34px;
	height: 28px;
	cursor: pointer;
	margin-top: 80px;
	margin-right: 45px;
	float: right;
}
#sideOpenBtn:before {
	content: "";
	position: absolute;
	border-top: 5px solid #ffbc30;
	border-bottom: 16px double #ffbc30;
	width: 34px;
	height: 6px;
}
#sideOpenBtn:hover:before {
	border-top-color: #5d5d5d;
	border-bottom-color: #5d5d5d;
}
#side {
	background-color: #ffbc30;
	color: #ffffff;
}
#side #closeBtn {
	text-align: right;
	margin: 5px 5px 0 0;
	cursor: pointer;
}
#side .title {
	font-weight: bold;
	padding: 0 15px 15px;
}
#side li a {
	display: block;
	padding: 15px 30px;
	color: #ffffff;
	text-decoration: none;
}
#side li a:hover {
	color: #ffbc30;
	background-color: #ffffff;
}

配布元

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. レスポンシブWebデザインにも対応した、サイドバーを折り畳むことができる「Simple Sidebar」

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com