# How to disable side menu when sliding over a div? **URL:** \ **Category:** ionic-v1\ **Created:** [April 23, 2014, 7:32pm UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308 "2014-04-23T19:32:57Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![zersaad](https://avatars.discourse-cdn.com/v4/letter/z/7c8e57/32.png) [@zersaad](https://forum.ionicframework.com/u/zersaad)\ **Post date:** [April 23, 2014, 7:32pm UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308/1 "2014-04-23T19:32:57Z")
Well my question seems a bit not clear, i have built a basic app with left and right side menus then i tryed to use this slider [http://www.idangero.us/sliders/swiper/](http://www.idangero.us/sliders/swiper/) but when i try to slide over the container the entire ion view slides with it to show the side menus, is there any way to disable the slide top open side menus on some divs so that i can slide across the items in that div without showing sliding the entire menu ? and sorry for my english, it’s neither my first or second language ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [April 24, 2014, 1:42pm UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308/2 "2014-04-24T13:42:55Z")
Is there any way you could use the built in ionic slide-box? you can use that and it’s set up to prevent any accidental menu dragging 😄 [http://ionicframework.com/docs/api/directive/ionSlideBox/](http://ionicframework.com/docs/api/directive/ionSlideBox/) ---
**Author:** ![zersaad](https://avatars.discourse-cdn.com/v4/letter/z/7c8e57/32.png) [@zersaad](https://forum.ionicframework.com/u/zersaad)\ **Post date:** [April 24, 2014, 2:12pm UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308/3 "2014-04-24T14:12:30Z")
i would love to but how can i style it because it takes full screen by default and i only want it on a specific height with some other styles applied to it ? i couldn’t find on the docs or demos a way to do that ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [April 24, 2014, 2:19pm UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308/4 "2014-04-24T14:19:57Z")
actually the slider only takes up as much area as the content inside it. But it you need to, you can apply styles to it by using the class `.slider` > **[Starter Template: 1.0.0-beta.1](https://codepen.io/mhartington/pen/KcCsF)** > > A barebones starter template for Ionic development... ---
**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\ **Post date:** [April 28, 2014, 11:23am UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308/5 "2014-04-28T11:23:50Z")
You can disable the sidemenu by using `drag-content="false"`. [http://ionicframework.com/docs/api/directive/ionSideMenuContent/](http://ionicframework.com/docs/api/directive/ionSideMenuContent/) So, implement that and for the view that has the slide box, disable the drag on the content section. ---
**Author:** ![zersaad](https://avatars.discourse-cdn.com/v4/letter/z/7c8e57/32.png) [@zersaad](https://forum.ionicframework.com/u/zersaad)\ **Post date:** [April 28, 2014, 2:56pm UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308/6 "2014-04-28T14:56:18Z")
Thank you so much for the replies i like ion slidebox it’s smoother in every way so i’ll go with @mhartington 's option, and by the way i really love the framework great job guys ---
**Author:** ![fredericogalvao](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/fredericogalvao/32/7391_2.png) [@fredericogalvao](https://forum.ionicframework.com/u/fredericogalvao)\ **Post date:** [April 29, 2014, 1:41pm UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308/7 "2014-04-29T13:41:22Z")
I’ve been using **ion-slide-box** since beta1 and since then it cannot prevent the swipe gesture to also open the side menu. Is there anything else I have to do to enable that, @mhartington ? ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [April 29, 2014, 1:50pm UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308/8 "2014-04-29T13:50:06Z")
How do you have your markup set up? Do you mind posting a sample ---
**Author:** ![mbesto](https://avatars.discourse-cdn.com/v4/letter/m/a183cd/32.png) [@mbesto](https://forum.ionicframework.com/u/mbesto)\ **Post date:** [April 29, 2014, 11:05pm UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308/9 "2014-04-29T23:05:45Z")
I have the same issue! Any assistance would be appreciated. EDIT: See my code below. What happens is when you swipe on Slide 2 it opens the menu up. Basically the app is set up like this structure: Slider page: ``` Slide 1 Slide 2 ``` Menu: ```
``` ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [April 30, 2014, 1:34am UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308/10 "2014-04-30T01:34:25Z")
@fredericogalvao and @mbesto, I put this codepen to help with your issues. Basically I’m setting up my slide-box like so ``` ``` Then adding some css to make the slide box take up some space. ``` .slider{ position: absolute !important; top: 0; bottom: 50%; left: 0; right: 0; } ``` This should help resolve your issues. ---
**Author:** ![mbesto](https://avatars.discourse-cdn.com/v4/letter/m/a183cd/32.png) [@mbesto](https://forum.ionicframework.com/u/mbesto)\ **Post date:** [April 30, 2014, 1:59am UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308/11 "2014-04-30T01:59:15Z")
Doesn’t work: [http://recordit.co/UAXHiXBsgg](http://recordit.co/UAXHiXBsgg) and now breaks the view of it. As I understand it `` adds the `.slider` class. So the problem with your fix is that the `bottom: 50%` breaks the slider into half: (the dots are supposed to be on the bottom) ![](https://sea1.discourse-cdn.com/ionicframework/uploads/default/606/355554e62b518cfd.png) ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [April 30, 2014, 2:12am UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308/12 "2014-04-30T02:12:09Z")
Well the bottom value was just an example, you can use a value of 0 for your case and it will work. ``` .slider{ position: absolute !important; top: 0; bottom: 0; left: 0; right: 0; } ``` ---
**Author:** ![fredericogalvao](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/fredericogalvao/32/7391_2.png) [@fredericogalvao](https://forum.ionicframework.com/u/fredericogalvao)\ **Post date:** [May 1, 2014, 2:51am UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308/13 "2014-05-01T02:51:02Z")
Actually, I found the issue in my case to be something else after I went back to test what I was doing because there was no fundamental difference between what I already had implemented and what you suggested, @mhartington . The slider works as expected on my Moto G (4.4.2) and on a Galaxy Nexus (4.3), and the failing environment is Ripple. I don’t know why it fails on Ripple, but I confirmed that it works as expected on pure browser (codepen) and on pure cordova (running the application), and only fails when emulated through Ripple (it works when emulated directly through Chrome Device Emulation). I’ve tested this case on Ripple using Chrome@Linux, Chrome@MacOS, Safari@MacOS and Firefox@Linux, and Firefox was the only one that worked as expected. ---
**Author:** ![Shams](https://avatars.discourse-cdn.com/v4/letter/s/e99b99/32.png) [@Shams](https://forum.ionicframework.com/u/Shams)\ **Post date:** [October 20, 2014, 10:54am UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308/14 "2014-10-20T10:54:06Z")
> [@Calendee](#): > > You can disable the sidemenu by using drag-content=“false”. > > [ion-side-menu-content - Directive in module ionic - Ionic Framework](http://ionicframework.com/docs/api/directive/ionSideMenuContent/) > > So, implement that and for the view that has the slide box, disable the drag on the content section. can you give me an example ? how can I disable the drag JUST on the content section ?? I Know I must add attribute {{drag-content=“false”}} to the ion-side-menu-content it doesn’t work when I add it to the ion-view ---
**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\ **Post date:** [October 20, 2014, 12:06pm UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308/15 "2014-10-20T12:06:43Z")
See this example ; [http://codepen.io/calendee/pen/deibl?editors=101](http://codepen.io/calendee/pen/deibl?editors=101) It allows you to enable or disable the `drag-content` in each controller using the `$root.canDrag` property. ---
**Author:** ![Shams](https://avatars.discourse-cdn.com/v4/letter/s/e99b99/32.png) [@Shams](https://forum.ionicframework.com/u/Shams)\ **Post date:** [October 20, 2014, 1:03pm UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308/16 "2014-10-20T13:03:37Z")
Many thanks for the prompt reply. ---
**Author:** ![Shams](https://avatars.discourse-cdn.com/v4/letter/s/e99b99/32.png) [@Shams](https://forum.ionicframework.com/u/Shams)\ **Post date:** [October 22, 2014, 9:41am UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308/17 "2014-10-22T09:41:57Z")
Many thanks again Mr. @Calendee I’m Very sorry for this inconvenience when I applied your way, I was able to disable drag content on all page within ion-nav-bar and then I tried to give ion-nav-bar a specific controller and apply $scope.$root.canDrag = true; on it, but it doesn’t work. still can’t drag content from ion-nav-bar only… What is the reason ?? Can I apply drag content on ion-nav-bar and disable it on the rest of my page ?? ---
**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\ **Post date:** [October 22, 2014, 9:58am UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308/18 "2014-10-22T09:58:48Z")
I think you’ll need to setup a CodePen sample. It’s pretty hard to troubleshoot it without something to work with. Fork my sample, modify it with your changes, and let me know. ---
**Author:** ![Shams](https://avatars.discourse-cdn.com/v4/letter/s/e99b99/32.png) [@Shams](https://forum.ionicframework.com/u/Shams)\ **Post date:** [October 22, 2014, 11:12am UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308/19 "2014-10-22T11:12:47Z")
this Codepen [http://codepen.io/anon/pen/Kqxpk?editors=101](http://codepen.io/anon/pen/Kqxpk?editors=101) I need to disable Drag Content in all Page1 and all Page2 {{ EXCEPT on “Nav Bar” or ion-nav-bar within each page}} and swipe between them In other words: if the user try to drag side menu when he is on the Nav Bar, he can do this, but if he try to drag side menu when he is on the rest of the page, he can’t ---
**Author:** ![Calendee](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/calendee/32/13656_2.png) [@Calendee](https://forum.ionicframework.com/u/Calendee)\ **Post date:** [October 22, 2014, 12:02pm UTC](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308/20 "2014-10-22T12:02:08Z")
Ah… I see what you mean. Out of the box, I don’t think Ionic supports ability to allow drag to open depending on what you’re dragging. I’ve put together a sample that can make this work. It’s not perfect and could use some fine tuning. > **[NavBar Drag with Side Menu Disabled](https://codepen.io/calendee/pen/ncdgq?editors=101)** > > Go to page 2. This page has side-menu dragging disabled. You can't drag the content open. However, you can swipe the navbar to drag the content open... On page 2 where side menu content is disabled, you can swipe on the Navbar to get the sidemenu to open. The directive for this is `navBarSwipe`. navBarSwipe uses the `swipe` gesture because it’s pretty smooth. I’ve commented out the `drag` gesture. You could change the directive to use the drag. However, it’s a bit glitchy. You’d need to spend some time fine tuning it - maybe with a debounce or distance detection. [Next page](https://forum.ionicframework.com/t/how-to-disable-side-menu-when-sliding-over-a-div/3308.md?page=2)