frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

feedlyのようなドロワーメニューを作る

スポンサードリンク

feedly.com

feedlyとても便利ですよね。

今回はfeedlyで使用されている、マウスオーバーしたらメニューが表示されるようなドロワ―メニューを作ってみました。

See the Pen KrqPzd by funclur (@funclur) on CodePen.


<div class="drower-wrapper">
<div class="drower-open">
<ul>
<li>開いた</li>
<li><button>閉じる</button></li>
</ul>
</div>
<div class="drower-close">
<ul>
<li>開く</li>

</ul>
</div>
</div>
.drower-wrapper {
	width: 350px;
	transition-duration: .3s;
	transition-property: transform;
	transition-timing-function: ease-in-out;
	transform: translate(-300px);
}
.drower-wrapper:after {
	content: "";
	clear: both;
	display: table;
}
.drower-close, .drower-open {
}
.drower-close {
	height: 500px;
	background: #ccc;
	float: left;
	width: 50px;
}
.drower-open {
	float: left;
	height: 500px;
	background: #ddd;
	width: 300px;
  position: relative;
  button {
    position: absolute;
    right: 10px;
  }
}
$(function(){

	var open = function(self){
		self.css({
			'transform': 'translate(0)'
		});
	};
	var close = function(self){
		self.css({
			'transform': 'translate(-300px)'
		});
	};

	$('.drower-wrapper').find('button').on('click', function(e){
		e.stopPropagation();

		$('.drower-wrapper').css({
			'transform': 'translate(-300px)'
		});
		$('.drower-wrapper').find('.drower-close').show();
	});

	$('.drower-wrapper').on('mouseover click',function(e){
		e.stopPropagation();
		var self = $(this);
		open(self);
		self.find('.drower-close').hide();
	}).on('mouseleave', function(e){
		e.stopPropagation();
		var self = $(this);
		close(self);
		self.find('.drower-close').show();
	});

});