pax_global_header 0000666 0000000 0000000 00000000064 13014407707 0014515 g ustar 00root root 0000000 0000000 52 comment=016833853d8e72689338d361b1463b377e8ef691 BootSideMenu-1.0.0/ 0000775 0000000 0000000 00000000000 13014407707 0014050 5 ustar 00root root 0000000 0000000 BootSideMenu-1.0.0/.gitignore 0000664 0000000 0000000 00000000042 13014407707 0016034 0 ustar 00root root 0000000 0000000 BootSideMenu.iml .idea/ .gitignore BootSideMenu-1.0.0/README.md 0000664 0000000 0000000 00000003252 13014407707 0015331 0 ustar 00root root 0000000 0000000 #BootSideMenu After a long time a new (hope better) version is here. ***BootSideMenu*** is a jQuery plugin to easily build a sliding menu in a Bootstrap based application. Online demo can be found [HERE](http://www.lombardoandrea.com/demo/BootSideMenu/index.html) ---------- ###**Options** | Option | Type | Value | Description|Default | :--------- | :--- | :---- | :--------- |:------: | **side**|String|left or right|Where menu will be placed|*left* | **duration**|Integer|milliseconds|Animation duration|*500* | **remember**|Boolean|true or false|Restore last menu status on page refresh|*true* |**autoClose**|Boolean|true or false|If true the initial status will be "closed"|false |**pushBody**|Boolean|true or false|If true the body of the page will be pushed left or right, according to the menu width and position|false |**closeOnClick**|Boolean|true or false|If true the menu will be closed when a link is clicked|true ###**Events** | Event | Description | Default | :---- | :---------- | :------ |**onTogglerClick**|A function to be executed when the toggler arrow is clicked| do nothing |**onBeforeOpen**|A function to be executed before the menu is opened| do nothing |**onOpen**|A function to be executed when the menu is opened| do nothing |**onBeforeClose**|A function to be executed before the menu is closed| do nothing |**onClose**|A function to be executed when the menu is closed| do nothing ##Examples Watch the examples folder to see it in actions ##Donations If you appreciate my work, and you are kind to offer a coffee, I will be very satisfied. :coffee: [PayPal Donations Here](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=DUNFGKA32BFGE) :coffee: BootSideMenu-1.0.0/css/ 0000775 0000000 0000000 00000000000 13014407707 0014640 5 ustar 00root root 0000000 0000000 BootSideMenu-1.0.0/css/BootSideMenu.css 0000664 0000000 0000000 00000006642 13014407707 0017717 0 ustar 00root root 0000000 0000000 .sidebar { z-index: 999999; position: fixed; top: -1px; bottom: -1px; padding: 0; width: auto; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, .15); -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175); box-shadow: 0 6px 12px rgba(0, 0, 0, .175); } .sidebar > .row > .col-xs-12, .sidebar > .row > .col-sm-12, .sidebar > .row > .col-md-12, .sidebar > .row > .col-lg-12 { padding: 0; position: absolute; bottom: 0; top: 0; overflow: auto; } .sidebar > .row { margin: 0; } .sidebar { width: auto; } .sidebar.sidebar-left { left: 0; right: 20px; } .sidebar.sidebar-right { right: 0; left: 20px; } .toggler { -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, .15); width: 20px; height: 48px; position: absolute; top: 47%; cursor: pointer; } .sidebar-left > .toggler { -webkit-border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-topright: 4px; -moz-border-radius-bottomright: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-left: 1px solid #fff; -webkit-box-shadow: 1px 0px 8px rgba(0, 0, 0, .175); box-shadow: 1px 0px 8px rgba(0, 0, 0, .175); right: -20px; } .sidebar-left > .toggler > span { margin: 15px 2px; } .sidebar-right > .toggler { -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-topleft: 4px; -moz-border-radius-bottomleft: 4px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-right: 1px solid #fff; -webkit-box-shadow: -1px 0px 8px rgba(0, 0, 0, .175); box-shadow: -1px 0px 8px rgba(0, 0, 0, .175); left: -20px; } .sidebar-right > .toggler > span { margin: 15px 2px; } /*Native BootStrap Hack*/ .sidebar .list-group-item:last-child, .sidebar .list-group-item:first-child { border-radius: 0; } .sidebar .list-group { margin-bottom: 0; } .sidebar .list-group-item { border: 1px solid #DDD; border-left: 0; border-right: 0; margin-bottom: 0; margin-top: -1px; } .list-group .collapse a { padding-left: 25px; } .list-group-item .glyphicon { margin-right: 5px; } @media (min-width: 400px) { .sidebar { width: 80%; } .sidebar.sidebar-left { left: 0; right: auto; } .sidebar.sidebar-right { right: 0; left: auto; } } @media (min-width: 528px) { .sidebar { width: 300px; } .sidebar.sidebar-left { left: 0; right: auto; } .sidebar.sidebar-right { right: 0; left: auto; } } @media (min-width: 768px) { .sidebar { width: 230px; } .sidebar.sidebar-left { left: 0; right: auto; } .sidebar.sidebar-right { right: 0; left: auto; } } @media (min-width: 992px) { .sidebar { width: 230px; } .sidebar.sidebar-left { left: 0; right: auto; } .sidebar.sidebar-right { right: 0; left: auto; } } @media (min-width: 1200px) { .sidebar { width: 230px; } .sidebar.sidebar-left { left: 0; right: auto; } .sidebar.sidebar-right { right: 0; left: auto; } } BootSideMenu-1.0.0/examples/ 0000775 0000000 0000000 00000000000 13014407707 0015666 5 ustar 00root root 0000000 0000000 BootSideMenu-1.0.0/examples/0-menu-template.html 0000664 0000000 0000000 00000021222 13014407707 0021465 0 ustar 00root root 0000000 0000000
A jQuery plugin to easily create a sliding menu, working on a Bootstrap based application.
All examples uses this template for the HTML code:
<!--Test --> <div id="test"> <div class="user"> <img src="../img/avatar.png" alt="Esempio" class="img-thumbnail"><br> <a href="http://www.lombardoandrea.com" target="_blank" class="navbar-link">Andrea Lombardo</a> </div> <div class="list-group"> <a href="#item-1" class="list-group-item" data-toggle="collapse">Item 1</a> <div class="list-group collapse" id="item-1"> <a href="#" class="list-group-item">Item 1 di 1</a> <a href="#" class="list-group-item">Item 2 di 1</a> <a href="#item-1-1" class="list-group-item" data-toggle="collapse">Item 3 di 1</a> <div class="list-group collapse" id="item-1-1"> <a href="#" class="list-group-item">Item 1 di 1.3</a> <a href="#" class="list-group-item">Item 2 di 1.3</a> <a href="#" class="list-group-item">Item 3 di 1.3</a> </div> </div> <a href="#item-2" class="list-group-item" data-toggle="collapse">Item 2</a> <div class="list-group collapse" id="item-2"> <a href="#" class="list-group-item">Item 1 di 2</a> <a href="#" class="list-group-item">Item 2 di 2</a> <a href="#" class="list-group-item">Item 3 di 2</a> </div> <a href="#item-3" class="list-group-item" data-toggle="collapse">Item 3</a> <div class="list-group collapse" id="item-3"> <a href="#" class="list-group-item">Item 1 di 3</a> <a href="#" class="list-group-item">Item 2 di 3</a> <a href="#item-3-1" class="list-group-item" data-toggle="collapse">Item 3 di 3</a> <div class="list-group collapse" id="item-3-1"> <a href="#" class="list-group-item">Item 1 di 3.3</a> <a href="#" class="list-group-item">Item 2 di 3.3</a> <a href="#" class="list-group-item">Item 3 di 3.3</a> </div> </div> <a href="#item-4" class="list-group-item" data-toggle="collapse">Item 4</a> <div class="list-group collapse" id="item-4"> <a href="#" class="list-group-item">Item 1 di 4</a> <a href="#" class="list-group-item">Item 2 di 4</a> <a href="#" class="list-group-item">Item 3 di 4</a> </div> </div> </div> <!--/Test -->
Watch the first example.