Add 'menu-left-open' and 'menu-right-open' classes

js/controllers/sideMenuController.js

@@ -130,12 +130,21 @@
     },
 
     /**
-     * Open the menu with a given percentage amount.
+     * Open the menu with a given percentage amount and add a corresponding class to the content element.
      * @param {float} percentage The percentage (positive or negative for left/right) to open the menu.
      */
     openPercentage: function(percentage) {
       var p = percentage / 100;
 
+      // Add/remove class 'menu-left-open' or 'menu-right-open' on content element
+      if (this.content && this.content.el) {
+        if (percentage > 0 || percentage < 0) {
+          this.content.el.classList.add('menu-' + ((percentage > 0) ? 'left' : 'right') + '-open');
+        } else {
+          this.content.el.classList.remove('menu-' + ((this.getOpenPercentage() > 0) ? 'left' : 'right') + '-open');
+        }
+      }
+
       if(this.left && percentage >= 0) {
         this.openAmount(this.left.width * p);
       } else if(this.right && percentage < 0) {

js/ext/angular/src/directive/ionicSideMenu.js

@@ -292,6 +292,7 @@ angular.module('ionic.ui.sideMenu', ['ionic.service.gesture', 'ionic.service.vie
         var releaseGesture = $ionicGesture.on('release', dragReleaseFn, $element);
 
         sideMenuCtrl.setContent({
+          el: $element[0],
           onDrag: function(e) {},
           endDrag: function(e) {},
           getTranslateX: function() {

js/ext/angular/test/directive/ionicSideMenu.unit.js

@@ -183,6 +183,10 @@ describe('Ionic Side Menu Directive', function () {
     expect(sideMenuCtrl.left.width).toBe(222);
     expect(sideMenuCtrl.left.el.style.width).toBe('222px');
   });
+
+  it('should publish the content element to it\'s public API', function () {
+    expect(sideMenuCtrl.content.el).toBeTruthy();
+  });
 });
 
 describe('menuToggle directive', function() {