Wondering what’s next for npm?Check out our public roadmap! »

    jquery-sidebar

    3.3.2 • Public • Published

    jquery-sidebar

    A stupid simple sidebar jQuery plugin.

    jquery-sidebar

    Available on CDN! 🚢

    jQuery-Sidebar is available on CDNJS and you can use it like this:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sidebar/3.3.1/jquery.sidebar.min.js"></script>

    Usage

    This library depends on:

    Include the script file in your HTML page:

    ...
    <!-- Include jQuery -->
    <script src="path/to/jquery.min.js"></script>
    <!-- Include jQuery Sidebar -->
    <script src="path/to/jquery.sidebar.min.js"></script>
    <!-- Or from CDNJS:
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sidebar/3.3.1/jquery.sidebar.min.js"></script>
    -->
    ...
    <div class="sidebar left">Hello World</div>
    <div class="sidebar right">I am on right!</div>
    <div class="sidebar top">I am on top!</div>
    <div class="sidebar bottom">I am on bottom!</div>
    ...
    <script>
        // Sidebar on left (default)
        $(".sidebar.left").sidebar().trigger("sidebar:open");
     
        // Sidebar on right side
        $(".sidebar.right").sidebar({side: "right"});
     
        // Sidebar on top side
        $(".sidebar.top").sidebar({side: "top"});
     
        // Sidebar on bottom side
        $(".sidebar.bottom").sidebar({side: "bottom"});
    </script> 
    ...

    Documentation

    sidebar(options)

    Initialize sidebar on selected elements.

    $(".my-sidebar").sidebar({...});

    After the call above, you can programatically open/close/toggle the sidebar using:

    $(".my-sidebar").trigger("sidebar:open");
    $(".my-sidebar").trigger("sidebar:close");
    $(".my-sidebar").trigger("sidebar:toggle");
    $(".my-sidebar").trigger("sidebar:close", [{ speed: 0 }]);

    After the sidebar is opened/closed, sidebar:opened/sidebar:closed event is emitted.

    $(".my-sidebar").on("sidebar:opened", function () {
       // Do something on open
    });
     
    $(".my-sidebar").on("sidebar:closed", function () {
       // Do something on close
    });

    Params

    • Object options: An object that will be merged with the default options.
    • speed (Number): animation speed (default: 200)
    • side (String): left|right|top|bottom (default: "left")
    • isClosed (Boolean): A boolean value indicating if the sidebar is closed or not (default: false).
    • close (Boolean): If true, the sidebar will be closed by default.

    Return

    • jQuery The jQuery elements that were selected.

    Changelog

    To see the versions and the changes between them go to releases page.

    How to contribute

    Have an idea? Found a bug? See how to contribute.

    License

    See the LICENSE file.

    Install

    npm i jquery-sidebar

    DownloadsWeekly Downloads

    66

    Version

    3.3.2

    License

    MIT

    Last publish

    Collaborators

    • avatar