-
Notifications
You must be signed in to change notification settings - Fork 13.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Allow for side menu to be "hidden" #2682
Comments
Adds an optional hide-when-closed attribute to the ion-side-menu directive. If this attribute is set to "true" the side menu will be hidden from the document layout whenever it is closed.
Can this be accomplished with |
Hmm, I'm about as new to angular as to ionic, but had a look at ng-hide. Perhaps it can be made to work, but upon a first try I could not achieve that. Probably because I am of the opinion that ionic is responsible for how the side menu works, so it should also be responsible for hiding it, when that is needed/asked for. So the $ionicSideMenus controller should do the toggling, as it knows when to hide/unhide the menu. However I suspect that the scope that can be manipulated by this controller is not available to the directives that are set on the ion-side-menu element. That element is assigned a controller for which the user-developer writes the code, e.g.:
It's easy enough to add lines like |
Well, you could define your controllers and scope wherever you'd like. The
Not sure that it needs to be in the core if it can be accomplished without hacks. Let me know if this helps. |
Thanks for the idea, that actually works! This solution is I think good enough for now, as it is completely outside Ionic. Long term I think that Ionic could offer a built-in solution as framework-users should not have to deal too much with unexpected side effects (the lurking menu under the content) of a design decision (to only translate the content element). But for now it could be argued that a transparent child of ion-side-menu-content is an edge case, and that the above solution works for that case. Note that this edge case is fairly popular/frequent though; I added a reply to an appropriate message in http://forum.ionicframework.com/t/using-google-maps-cordova-plugin/4456 |
Hey, Personally, I found an elegant solution (right menu) : .menu.menu-right {
transform: translate3d(100%, 0, 0) !important;
-webkit-transition: transform 200ms ease;
transition: transform 200ms ease;
}
.menu-open {
.menu.menu-right {
transform: translate3d(0, 0, 0) !important;
}
} |
sass solution from blckshrk not work well with maps sdk plugin, javascript solution makes a terrible blinking in menú show. I can't understand why show menú layer when menú is hidden, this must be solved in ionic kernel, when menu is hidden, hide it. |
@RicardoBer I agree with you, this isn't perfect with the Google Maps plugin. I was in the same case and I applied the following solution (I mean, this is more a workaround) : $scope.$watch(function () {
return $ionicSideMenuDelegate.isOpen();
}, function (isOpen) {
if (isOpen) {
map.setVisible(false);
} else {
$timeout(function () {
map.refreshLayout();
map.setVisible(true);
}, 200); // animation duration
}
}); Hope this help ! |
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out. |
Some native components may require the Ionic application to have a transparent area, notably the Google Maps plugin. The ionic (left) side menu however is always there "under" the side-menu-content. Opening the menu simply (and elegantly!) works by translating (moving) the content element sideways.
Would it be possible to include an option that allows the side menu to be "hidden", i.e. for it to take up no space in the document layout at all, whenever it is closed ?
A solution might be to set the style.visibility to "hidden" when the menu is closed and to set it back to "visible" right before it is opened. All of this could be under control of a new attribute (option) on the ion-side-menu directive, e.g. "hide-when-closed='true'".
The text was updated successfully, but these errors were encountered: