andrealombardo / bootsidemenu

BootSideMenu is a jQuery plugin to easily build a sliding menu in a Bootstrap based application.

This project is no longer maintained. But it still works!

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.

---

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 or if a click is made outside of it	true
icons	Object	An object where to specify the icon fonts classes	A way to use other icon fonts instead of glyphicon	icons: {left: 'glyphicon glyphicon-chevron-left', right: 'glyphicon glyphicon-chevron-right', down: 'glyphicon glyphicon-chevron-down'}
theme	String	'default', 'dracula', 'darkblue', 'zenburn', 'pinklady', 'somebook'	Five themes plus a default one. Your is welcome.	'default'

Events

Event	Description	Default
onStartup	A function to be executed when the menu is instantiated	do nothing
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

Methods

Method	Description
$(selector).BootSideMenu.open();	Open menu programmatically
$(selector).BootSideMenu.close();	Close menu programmatically
$(selector).BootSideMenu.toggle();	Toggle menu programmatically
Watch in action HERE.

Examples

Watch the examples folder to see it in actions or try an Online Demo

Donations

Coffee and beers are well accepted! :coffee: PayPal Donations Here 🍺

bootsidemenu's Issues

Is this issue fixed in this new version?

Hi Andrea,

Hello once again. I am just wondering if this feature which I had written long back has been fixed in the new version ?

content visible when page starts

How do you make the content of the sidebar not visible when the page is first loaded. Right now the content is visible on the page for a second before the sidebar is initialized.

Other Icons for Toggler?

Hi,
I really love this slide menu, but I have one issue:
I already use FontAwesome in my current project and I don't wanna add a second font language.
In your sample you are using glyphicon for the icons - and there seems to be no way to change these, is this right?

Hide open/close curtains during every page refresh

Hello,

First of all this is a wonderful menu slider. Loved every bit of it. But I am stuck in a small problem.

if(autoClose){
  $(this).find(".toggler").trigger("click");
}

I have implemented the BootSideMenu in my application but on every page refresh or moving on to a new page the slider curtains pop out and go back in. I would like the it to stay in the same place and not animate.

Can you please help me to achieve this. Thanks in advance.

The panel content lose its event handlers.

The js code that takes the element and wraps the element html around custom elements doesnt take into account the fact that dom elements may have event handler's attached to it.

The old code below uses this.html() and appends it to the new html. I have attached a fix to it below.

OLD CODE:

oldCode = this.html();

    newCode += "<div class=\"row\">\n";
    newCode += "    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg1-12\" data-side=\""+side+"\">\n"+ oldCode+" </div>\n";
    newCode += "</div>";
    newCode += "<div class=\"toggler\">\n";
    newCode += "    <span class=\"glyphicon glyphicon-chevron-right\">&nbsp;</span> <span class=\"glyphicon glyphicon-chevron-left\">&nbsp;</span>\n";
    newCode += "</div>\n";

    this.html(newCode);

NEW CODE:

    newCode += "<div class=\"row\">\n";
    newCode += "    <div class=\"col-xs-12 col-sm-12 col-md-12 col-lg1-12 panel-content\" data-side=\"" + side + "\"></div>\n";
    newCode += "</div>";
    newCode += "<div class=\"toggler\">\n";
    newCode += "    <span class=\"glyphicon glyphicon-chevron-right\">&nbsp;</span> <span class=\"glyphicon glyphicon-chevron-left\">&nbsp;</span>\n";
    newCode += "</div>\n";

    var wrapper = $(newCode);

    // copy the children to the wrapper.
    $.each(this.children(), function () {
        $('.panel-content', wrapper).append(this);
    });

    // Empty the element and then append the wrapper code.
    $(this).empty();
    $(this).append(wrapper);

    if (autoClose) {
        $(this).find(".toggler").trigger("click");
    }

    if (autoClose) {
        $(this).find(".toggler").trigger("click");
    }

Use on multiple page site

Hi,
I really like this BootSideMenu, it's one of the best I've seen. It does everything I'd like it to except that it's built for a one page site. I'm trying to use it on a multi-page site with the correct tags staying selected but not getting it. Been trying to add show/hide active class which it will work correctly after I'm on the page and click another link. I'd like the correct tag to be selected when I navigate to its respective page. Could you please help by providing some code to guide me along?

Regards.

Do side menu support custom height and length?

The side menu seems too long for me, can I modify its height and length

Remote control methods don't work

I believe Remote control methods are still not working. Calling .open or .close doesn't work. Come to find out it doesn't work in the example either: https://andrealombardo.github.io/BootSideMenu/examples/11-remote-control.html
The error when calling the method: "Uncaught TypeError: $(...).BootSideMenu(...).close is not a function"
Hope you can give me an idea of how to fix this since I love this BootsideMenu. It fits my needs perfectly.

Originally posted by @igorski88 in #24 (comment)

BootSideMenu is not working with angularjs

When i use angularjs controller inside bootsidemenu div then it is not working.
I want to load content for bootsidemenu from angularjs controller.
It is not recognising any angularjs code, and when i look into console of browser the angular code is commented. Can anyone please provide me a solution?

An error

I use BootSideMenu in my project, and the error is as follow, how could I solve it?

angular.js:12221
TypeError: $(...).BootSideMenu is not a function
at HTMLDocument.eval (eval at (http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js:2:2620), :3:18)
at j (http://localhost:8081/SurveyTemplate/templates/4/assets/js/jquery.min.js:2:27136)
at Object.k.add as done
at n.fn.ready (http://localhost:8081/SurveyTemplate/templates/4/assets/js/jquery.min.js:2:29551)
at eval (eval at (http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js:2:2620), :2:15)
at eval (native)
at http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js:2:2620
at Function.m.extend.globalEval (http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js:2:2631)
at m.fn.extend.domManip (http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js:3:22994)
at m.fn.extend.append (http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js:3:20507)

Content Overlay?

Hi Andrea
Is there any possibility to have a (dark) content overlay while showing the BootSideMenu?

Greetings!
Bianca

Chosen Drop down not working

Hi,
I have downloaded your code & it worked perfect & all my filter condition are now on sidemenu.
but i observed that my Chosen Dropdown & chosed listbox does not work under sidemenu.

can you please guide me what is fix for that.

I did update your awesome work to a bower component

Hi Andrea Lombardo,
Thank you very much for your awesome work.
I did fork your work then update it for easy to reuse with bower.
Thanks to that, and here the repository result
I keep it with an MIT license and absolutely you're the author.
Thanks and happy coding!

I am not able to use angular ng-repeat directive in it

I am using anuglar ng-repeat to show list of item in UL format but i am not able to do it. So please look to this matter.

Question about width of the Sidebar

Dear Andrea,
i would like to use your BootSideMenu, since it exactly fits what i need. However i was not able to control the width of the expanded sidebar. In you test.html this is nicely set to approx 1/4th of the screen. In my case, the expanded sidebar always goes over 2/3 of the screen. I would need exactly 1/2 of the screen. How can i control the width of the sidebar?

Menu is open when loading the page first time

Hi Andrea,

Hope you are doing good.

The menu slider is open the first time I open the the menu and later it stays closed. But I would like it to be closed initially too. How is it possible to achieve this. I am not really good at JavaScript so need your help.

Thank you very much.

Does Bootsidemenu support submenu?

This plugin is cool. User interface is simple and flexible. Are there these feature in this plugin?

• Multi-level submenu (already found it, Nice!)
• Auto push body content when use large screen and push body content off when use small screen
• Assign arrow position from top, the arrow position always slightly move in mobile device when scrolling up and down, it's better if there is option to solve this problem
• The method to show, hide or toggle menu, that can be called from button or link
  ( already found the method #9 )

Thank you BootSideMenu

Add package.json

Please, can you add package.json file to your repo?
Regards

Auto close when you click outside the menu

Hi Andrea,

Wonderful update loved every bit of it.

Just wanted to know if it is possible to click outside the menu slider which would auto close the menu?

Regards,
Vivek

Open/Close menu programmatically

Is there any way to expose open/close/toggle functionality through a method/function ?

Toggle sidebar via separate link?

Quick question: is there a way to toggle the sidebar (or just open it) via a separate link on the page? I'm trying to include an icon that will open it that is grouped with other icons, for users who may not notice the toggle on the side.

License and Usage terms

you're script is really good and planning to include this script on a commercial website. What's your license terms? thanks :)

autoClose:false inoperative

The Selector does not actually select...

This is not a problem with only 1 menu but if you want to use multiples it becomes a problem...

For example if you make both a left and right side menu. the last instance overrides all previous ones...

This seems to be due to the design of the plugin frame work. This post better explains what I mean:
https://stackoverflow.com/a/22976877/1815624

This other post has helped me:
https://stackoverflow.com/a/24359224/1815624

disappearing Toggler

When you change the width of the window button disappears. This code how to remedy:

(function ( $ ) {


    var delay = (function() {
        var timers = new Map();
        return function(callback, ms, key) {
            var timer = 0;

            if(!key){
                key = 'default';
            }

            timer = timers.get(key);
            clearTimeout(timer);        
            timer = setTimeout(callback, ms);
            timers.set(key, timer);
        };
    })();

    $.fn.BootSideMenu = function( options ) {

        ....

        $( window ).resize(
            $.proxy(function(event) {
                var container = $(this);
                var listaClassi = $(container[0]).attr('class').split(/\s+/); //IE9 Fix - Thanks Nicolas Renaud
                var side = getSide(listaClassi);
                var containerWidth = container.width();
                var status = container.attr('data-status');

                delay(function() {
                    doSet(container, containerWidth, side, status);
                }, 700, container[0]);
            }, this)
        );
    };

    ....

    function doSet(container, containerWidth, sidebarSide, sidebarStatus){
        if(sidebarStatus=="closed"){
            if(sidebarSide=="left"){
                container.animate({
                    left:-(containerWidth+2)
                });
            }else if(sidebarSide=="right"){
                container.animate({
                    right:- (containerWidth +2)
                });
            }
        }
    }

}( jQuery ));

jQuery Datepicker not working within BootSideMenu

Hi Andrea
I am currently integrating BootSideMenu for a flight reservation system. Within the BootSideMenu you can filter bookings by date (from ... to). I am using jQuery Datepicker as my calendar. But unfortunatly the calendar does not show up when I click the textbox. The field is recognized as the trigger field, as it has already received the class "hasDatepicker" dynamically on pageload. Just the calendar does not show up. I already tried different settings for z-index, but no success.

Do you have any idea on this?
Thanks for your help!

Bianca