【jQuery】タッチスワイプと連動するスライドスワイプメニューSlide and Swipe Menu

【jQuery】スマホサイトなどで使えそうなオフキャンバスやドロワーメニュー系jQueryプラグイン10選でご紹介したSlide and Swipe Menu。Slide and Swipe Menuはタッチスワイプと連動する軽量のスライドスワイプメニュー。”>【jQuery】スマホサイトなどで使えそうなオフキャンバスやドロワーメニュー系jQueryプラグイン10選でご紹介したSlide and Swipe Menu。Slide and Swipe Menuはタッチスワイプと連動する軽量のスライドスワイプメニュー。

必要なファイルをロード

<!-- jQuery library (served from Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- touchSwipe library -->
<script src="http://labs.rampinteractive.co.uk/touchSwipe/jquery.touchSwipe.min.js"></script>
<!-- Sliding swipe menu javascript file -->
<script src="../jquery.slideandswipe.js"></script>

HTML markup

<body>
<nav>
[...]
</nav>
<main>
[...]
<a class="ssm-toggle-nav" href="#" title="Open / close">Open / close</a>
</main>
<div class="ssm-overlay ssm-toggle-nav"></div>
</body>

プラグインを初期化

<script>
$(document).ready(function() {
$('nav').slideAndSwipe();
});
</script>

CSS

/* navigation */
nav {
height: 100%;
width: 280px;
background-color: #0a4a3c;
left: 0;
top: 0;
z-index: 2;
position: fixed;
overflow-y: auto;
overflow-x: visible;
transform: translate(-280px,0);
}
/* overlay layer */
.ssm-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.2);
display: none;
z-index: 1;
}

MITライセンス

 
Slide and Swipe Menu

【jQuery】タッチスワイプと連動するスライドスワイプメニューSlide and Swipe Menu

  • LATEST
  • RELATED
  • POPULAR