show and hide menu - bootstrap responsive

mikha
mikha used Ask the Experts™
on
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;
      ......
}
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

Commented:
Hi Mikha,

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

Regards,
Chinmay.
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
<div class='container-fluid' > 
   <div class='sideMenu d-none d-md-block'>.........</div>
   <div class='mainContent'>......</div>
</div>

Open in new window

Working sample here
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);
}


});
CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
@jcgd, he is using Bootstrap which provides these styles out of the box.
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.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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.

Author

Commented:
@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.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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?

Author

Commented:
@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.
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial