asked on

show and hide menu - bootstrap responsive

I have an asp.net website with bootstrap 4. when the window is resized or hits the medium or small breakpoint, i want to hide the side menu bar. what is the best way to achieve this?

my current layout is ,

<div class='container-fluid' >
<div class='sideMenu'>.........</div>
<div class='mainContent'>......</div>
</div>

---------css--------------
.sideMenu {
width:250px;
border-top: 1px solid blue;
......
}

Chinmay Patel

Hi Mikha,

Please use display property https://getbootstrap.com/docs/4.0/utilities/display/

Regards,
Chinmay.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Juan Carlos

Use this js:

$(window).bind("load resize", function() {

var width = (this.window.innerWidth > 0) ? this.window.innerWidth : this.screen.width;
if (width < 768) {

$('sideMenu').addClass('hidden');

} else {
$('sideMenu').removeClass('hidden);
}

});

Julian Hansen

@jcgd, he is using Bootstrap which provides these styles out of the box.

Juan Carlos

It's another valid alternative to hide the sidemenu. On the other hand, it serves as a base to manipulate the positioning of headers and integrate the sidemenu and the navbar in a single drop-down menu for mobile devices.

Julian Hansen

Using javascript for effects that can be achieved with CSS is not a good idea.
Bootstrap styles already cater to this - you don't need JavaScript.

mikha

ASKER

@thank you all for your comments.

@Julian - I do have another question related to this. once the menu is hidden, I want to be able to hover over the menu area and menu appears , so that i can select something else from the menu. once selected the menu goes back go hiding.
I can post a new question for this , if needed. let me know.

Julian Hansen

You want to hover over a hidden element and have it display? Not sure how that is going to work - do you mean you want to have a menu that can collapse with a button maybe?

mikha

ASKER

@Julian - something like this . in this example it is for a button

https://www.w3schools.com/howto/howto_css_sidenav_buttons.asp

if possible, I want to do it for the side bar menu, when hovered it expands and I can click on it as well.

Julian Hansen

Ok but in that sample the buttons are not totally hidden. In your opening question it appears you want the menu to hide completely - for the solution you want you would need to leave some of the menu visible.

Here is a sample that demonstrates the concept
http://www.marcorpsa.com/ee/t3688.html