マウスをウィンドウから外すと開閉するドロワー

Posted on by IKIX_wbdv

　マウスカーソルをブラウザウィンドウの外側に外すと，開いたり閉じたりするドロワーです．

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo - Drawer</title>
    <style>
	body
	{
		height: 100vh;
	}
	#drawer
	{
		display: none;
		background: #ccc;
		width: 300px;
	}
	#drawer.opened
	{
		display: flex;
	}
	#container
	{
		display: flex;
	}
	.item
	{
		width: inherit;
	}
	.content
	{
		width: 98%;
	}
	.edge
	{
		width: 1%;
		height: 100vh;
		background: #ddd;
	}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
	$(function(){
		$('.edge').mouseover(function(){
			$('#drawer').toggleClass('opened').toggle(300);
		});
	})
</script>
</head>
<body>
<header>Drawer</header>
<section id="container">
	<div class="edge edge_left"></div>
	<nav id="drawer">
		<ul class="item">
			<li>items</li>
			<li>items</li>
			<li>items</li>
			<li>items</li>
		</ul>
		<div class="edge edge_drawer"></div>
	</nav>
	<div class="content"></div>
	<div class="edge edge_right"></div>
</section>
</body>
</html>

　ドロワーの端.edge_drawerにマウスオーバーしても開閉するよう工夫した．