I've been experimenting with ionic and angular.js, trying to figure out the best way to apply background styles to side menus. I currently have a blurred background image with content boxes placed on top of it. My goal is to keep the background fixed while only allowing the content to move when opening the left or right side menu.
The screenshot on the left displays my progress so far. The background image is attached to each content view of the menus to prevent the underlying content from being revealed when set as transparent. The screenshot on the right is a simple HTML mockup showcasing the desired final outcome.
Does anyone have any suggestions?
<!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's 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>