Keep side bar open?

1

There’s a way to keep the side bar open while I click over the items and refresh my view, I’m thinking about to make a tablet app and seems to be a great idea, ( try to emulate android fragments ).

1 Like
2

You could do something like this for tablet layouts. It will keep the side-menu open while on larger screens.

@media (min-width: 767px) {
  .menu-content {
    -webkit-transform: translate3d(270px, 0px, 0px) !important;
    width: calc(100% - 270px) !important;
  } 
  
  .bar-header button.ion-navicon {
    display: none;
  }
}
5 Likes
3

pretty nice example thanks a lot man.

1 Like
4

@mhartington: Could you include this into Ionic? I think this a must for tablet apps.

5

Will keep this mind, I’ll let the devs know

6

I’ve been trying to use your trick to create a 3-state side menu to no avail.

The behavior I’m looking for is visible in Google Drive’s iOS app, which IMO is ideal for any app using a side menu:

  • On small screens, the side menu is always hidden until you open it.
  • On larger screens, the side menu shows only icons until you open it. Then, it shows icons + text.

What I have observed:

  • If I use your css, the navicon is hidden, and the menu is fixed in place.
  • If I take out the line to hide the navbar icon, the navbar icon is not functional (even though the code executes).
  • If I switch from setting “-webkit-transform” to “left” in the css, it looks like I want initially and now the navbar button functions, but it’s messed up when the menu opens. The extra width is added to the menu width, showing a gutter on the right of the menu.

To get around this, do you advise trying to override the behavior using a controller? Add another layer to the DOM? Any other ideas?

See http://www.bpsedtech.org/wp-content/uploads/2012/09/photo-11.png to see Google’s icon + text menus.

Thanks!

7
  • Not seeing this on my end.
  • As far as navicon, do you mean the menu-toggle?
  • The reason webkit-transform is used is because this mimics the menu-toggle function. When you toggle the menu, it is transformed to this. If you apply this css, then the menu can’t toggle.

Right now, I’d hold off. Split pane support is coming and being worked on.

8

Thank you so much for responding so quickly, Mike – you totally rock!

I’m sorry I wasn’t more clear; here is what I’m trying to achieve:

Thanks again,
-Claudia

9

Try this one out.

Note that is uses css calc, which has very limited support on android

1 Like
10

This for me appears to pull out the right side nav. I’m sorry I’m not seeing the pattern to make this do the same for the left side nav. Could you help me better understand? Thanks for everything you’ve already done.

11

I’m not sure I understand your issue, could you provide a codepen to illustrate the issue the issue you have?

12

I was referring to your css snippet in your very first response to this thread. How would that be modified to do the same for the left side nav.

13

So that bit of css does work if you have a menu on the left side.

So it may be an issue with your code. Could you please provide a codepen.

14

Is there anyway to adjust the @media css to work with a 100% web app via in the browser from a computer? When I inspect on chrome and select device as a laptop this no longer works. Only works if I select a phone or tablet that has min-width of 600px. Is there a specific way to target laptops / desktops as well so you could use on a website?

15

Going to reply to myself in case others have this issue. I had to remove some tags from my side bar for it to display correctly. Some CSS gets changed when you view the device as a ‘laptop’ and hides the side bar completely even when you force it open with CSS. Removing and some solved the problem for me.

16

Hi,

This is a very nice solution, but it doesn’t work if you have both left and right menus.
If i make the screen bigger, i have both the menus displayed togheter.
Any suggestions?

thanks

17

Hello,

Is there a way to do this, but only keep header of the sidemenu always open?

Thanks in advance

18

how can we achieve responsive sidebar open/close on Ionic 2 RC0 ?

2 Likes
19

Was this ever achieved in RC ?