jQuery

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

September 15, 2016
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
    }
} );