【jQuery】モバイルアプリのようなサイドバーナビゲーションSimpler Sidebar

simpler-sidebarはモバイルアプリのようなサイドバーナビゲーションを作成するためのjQueryプラグイン。

マークアップ

<div id="navbar">
<!--
#navbar is positioned fixed.
It does not matter what kind of element #toggle-sidebar is.
-->
<span id="toggle-sidebar" class="button icon"></span>
</div>
<div id="sidebar">
<!--
simpler-sidebar will handle #sidebar's position.
To let the content of your sidebar overflow, especially when you have a lot of content in it, you have to add a "wrapper" that wraps all content.
-->
<div id="sidebar-wrapper" class="sidebar-wrapper">
<!--
Links below are just an example. Give each clickable element, for example links, a class to trigger the closing animation.
-->
<a class="close-sidebar" href="#">Link</a>
<a class="close-sidebar" href="#">Link</a>
<a class="close-sidebar" href="#">Link</a>
<a class="close-sidebar" href="#">Link</a>
</div>
</div>

CSS

.sidebar-wrapper {
position: relative;
height: 100%;
overflow: auto;
}

JS

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="simpler-sidebar/dist/jquery.simpler-sidebar.min.js"></script>
<script>
$( document ).ready( function() {
$( "#sidebar" ).simplerSidebar( {
selectors: {
trigger: ".toggle-sidebar",
quitter: "close-sidebar"
}
} );
} );
</script>

Options

$( "#sidebar" ).simplerSidebar( {
selectors: {
trigger: ".toggle-sidebar",
quitter: "close-sidebar"
},
animation: {
easing: "easeOutQuint"
},
sidebar: {
width: 500
},
mask: {
display: false
}
} );
 
simpler-sidebar

【jQuery】モバイルアプリのようなサイドバーナビゲーションSimpler Sidebar

  • LATEST
  • RELATED
  • POPULAR