Skip to content

Instantly share code, notes, and snippets.

@zaru

zaru/sideslidemenu.html

Created May 4, 2014 07:39
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save zaru/5bb0fa3d80580610e238 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save zaru/5bb0fa3d80580610e238 to your computer and use it in GitHub Desktop.
Download ZIP
Facebook風サイドスライドメニュー超絶シンプルサンプル
Raw
sideslidemenu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SideSlideMenu</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.16.0/build/cssreset/cssreset-min.css">
<style type="text/css">
#viewport {
overflow: hidden;
position: relative;
width: 100%;
}
#side-area {
color:#fff;
position:absolute;
width:256px;
background-color:#32394a;
z-index:1;
}
#side-touchable {
position:absolute;
left:256px;
width:100%;
height:100%;
cursor:pointer;
z-index:3;
display:none;
}
#page {
background-color:#ddd;
position:relative;
left:0px;
z-index:2;
}
#bt-side-open {
cursor:pointer;
}
</style>
</head>
<body>
<div id="viewport">
<div id="side-menu">
<div id="side-area">
<p>ここはサイドメニューです</p>
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
<li>メニュー5</li>
<li>メニュー6</li>
<li>メニュー7</li>
</ul>
</div>
<div id="side-touchable"></div>
</div>
<div id="page">
<div id="head-menu">
<ul>
<li id="bt-side-open">サイドメニューを開く</li>
</ul>
</div>
<h1>ここはメインページです</h1>
<section>
<h2>セクション</h2>
<p><a href="http://www.yahoo.co.jp/">リンク</a></p>
<p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
<p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
<p>テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。テキスト。</p>
</section>
</div>
</div>
<script src="./jquery-1.11.1.min.js"></script>
<script>
var openSideMenu = function() {
jQuery('#page').css('-webkit-transition', 'left 0.2s ease-out');
jQuery('#page').css('left', '256px');
jQuery('#side-touchable').show();
};
var closeSideMenu = function() {
jQuery('#page').css('-webkit-transition', 'left 0.2s ease-out');
jQuery('#page').css('left', '0px');
jQuery('#side-touchable').hide();
};
jQuery(function() {
jQuery('#bt-side-open').click(function() {
openSideMenu();
});
jQuery('#side-touchable').click(function() {
closeSideMenu();
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment