<aside class="sidebar">
	<ul>
		<li>
			<a href="#" class="img_01">画像1</a>
		</li>
		<li>
			<a href="#" class="img_02">画像2</a>
		</li>
		<li>
			<a href="#" class="img_03">画像3</a>
		</li>
	</ul>
	<div class="button">
		<a href="#"></a>
	</div>
</aside>
body {
	background-color: #333333;
}

.sidebar {
	position: relative;
	left: -110px;
	width: 100px;
	height: auto;
	background-color: rgba(0, 0, 0, 0.5);
}

.sidebar ul {
	list-style-type: none;
	padding: 0;
}

.sidebar li {
	padding: 10px;
}

.sidebar li a {
	width: 70px;
	height: 70px;
	display: block;
	border: 3px solid #CCC;
	border-radius: 50%;
	text-align: center;
	text-decoration: none;
	line-height: 70px;
	color: #333333;
	font-family: "メイリオ";
}

.img_01 {
	background-color: #FA8072;
}

.img_02 {
	background-color: #66CDAA;
}

.img_03 {
	background-color: #B0E0E6;
}

.button a {
	position: absolute;
	top: 70px;
	left: 100px;
	display: block;
	width: 30px;
	height: 70px;
	color: #FFF;
	background-color: rgba(0, 0, 0, 0.5);
	text-align: center;
	text-decoration: none;
	line-height: 70px;
}

.open:after {
	content: "";
	display: block;
	position: absolute;
	top: 30px;
	right: 10px;
	width: 10px;
	height: 10px;
	border-top: 1px solid #CCC;
	border-right: 1px solid #CCC;
	transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-o-tansform: rotate(45deg);
}

.close:after {
	content: "";
	display: block;
	position: absolute;
	top: 30px;
	right: 10px;
	width: 10px;
	height: 10px;
	border-top: 1px solid #CCC;
	border-left: 1px solid #CCC;
	transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-tansform: rotate(-45deg);
}
$(function() {
	var duration = 500;
	var $sidebar = $('.sidebar');
	var $button = $('.button a');

	$button.addClass('open');
	$button.click(function() {
		$button.toggleClass('close');
		$button.removeClass('open');
		if ($button.hasClass('close')) {
			$sidebar.stop().animate({
				left: '0'
			}, duration, 'easeOutQuint');
		} else {
			$sidebar.stop().animate({
				left: '-100px'
			}, duration, 'easeOutQuint');
			$button.addClass('open');
		};
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js