Scroll to Top

Hidden Bar

Some people call it sidebar, some drawer and some might call it bottom sheets. we call it hidden bar because it is all in one. This bar can be used as menu, can be used as hidden content trigger on click etc.

SITEMAP Documentation / Js Plugins / Hidden Bar

Demo

From Left From Right From Top From Bottom

Hidden Bar Left

Hidden Bar Left

Hidden Bar Left

Hidden Bar Left

Code copy

<a class="btn btn-flat btn-success" id="openHiddenBarLeft">From Left</a>
<div class="sidebarLeft green8" data-closebtn=".close-left" data-openbtn="#openHiddenBarLeft">
    <div class="row padY-10">
        <div class="col m9 l9 s12">
            <p class="text-grey4 padL-10">Hidden Bar Left</p>
        </div>
        <div class="col m3 l3 s12">
            <a class="close-left btn btn-light">close</a>
        </div>
    </div>
</div>
<script>
    $(".sidebarLeft").HiddenBar({
        behindNavbar: false
    });
</script>

Expand the hidden bar with these options.

Demo

variable default data-type options function
sidebarType overlay numeric overlay, offcanvas and fullscreen style of the hidden bar
BarPosition left string left, top, right, bottom position of the hidden bar
HiddenBarWidth 250px string any meaurement with its unit hidden bar width
HiddenBarHeight 200px string any meaurement with its unit hidden bar height
animSpeedOn 50 numeric time in microseconds appearing time of hidden bar
animSpeedOff 10 numeric time in microseconds disappearing time of hiddenbar
marginLeftCombo 25px string any measurement with its unit. when type is overlay, after the initiating it would combine two divs, second div margin is required.
allowScroll false bool true, false allow the scrollbar inside the hidden bar
behindNavbar true bool true, false hiddenbar should appear on navbar or behind navbar

Code copy

    <script>
        $(".sidebarLeft").HiddenBar({behindNavbar: false});
    </script>

Feedback