Geek Answers Handbook

Applying background for ionic side menus

I fool myself with ionic and angular.js and wondered how to correctly apply background styles to side menus. I have a color background image and content fields hovering over the background image. My intention is to open the menu on the left or right, the background remains fixed and only the content is moved.

The left screenshot will show my result. The wallpaper is tied to each representation of the contents of the menu, because otherwise it will be transparent to reveal the underlying content. The right screenshot is a simple html layout to illustrate the end result.

Does anyone have any suggestions?

Illustration

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="css/style.css" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>
    <!-- your app js -->
    <script src="js/app.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/services.js"></script>
  </head>
  <body ng-app="starter" animation="slide-left-right-ios7">
    <ion-header-bar align-title="left" class="bar-positive">
  <div class="buttons">
    <button class="button" ng-click="doSomething()">Left Button</button>
  </div>
  <h1 class="title">Title!</h1>
  <div class="buttons">
    <button class="button">Right Button</button>
  </div>
</ion-header-bar>

    <ion-side-menus class="sideMenus">

      <ion-side-menu-content class="custom">
        <h1>bdafs1</h1>   
      </ion-side-menu-content>

      <ion-side-menu side="left" class="custom">
        <h1>bdafs2</h1>
      </ion-side-menu>

    </ion-side-menus>
  </body>
</html>
+4
1

, , .

body        {
    background: url(http://i.imgur.com/hgzVvzN.jpg);
    background-attachment:fixed;
    background-position: center;
}

.pane, .menu, .view, .list, .item       {
    background: transparent;
}
+5

More articles:


All Articles