I have successfully implemented a sliding side menu in my angularjs+bootstrap3 app using CSS. However, I am facing an issue where the content on the right side does not follow the menu when it slides out of view.
Here is the desired effect that I am aiming for:
In the example provided, clicking the button with three horizontal lines toggles the menu to the side and moves the content along with it towards the left.
style.css
.sidebart {
-moz-transition: left .1s;
-webkit-transition: left .1s;
-o-transition: left .1s;
transition: left .1s;
width: 210px;
height:100%;
background-color:#2a3542;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
}
.slide-outt {
-moz-transition: left 1s;
-webkit-transition: left 1s;
-o-transition: left 1s;
transition: left 1s;
left: -210px;
}
partial.html
<div ng-controller="myCtrl">
<button class="btn btn-default collapse-button" ng-click="click()">Toggle collapse</button>
<div id="sidebar" class="sidebart" ng-class="{'slide-outt':boolChangeClass}">
<!-- sidebar menu start-->
<ul class="sidebar-menu" id="nav-accordion">
<li>
<a href="#/customer">
<i class="fa fa-user"></i>
<span>Customers</span>
</a>
</li>
<li>
<a href="#/order">
<i class="fa fa-tasks"></i>
<span>Orders</span>
</a>
</li
</div>
controller.js
function myCtrl($scope) {
$scope.click = function() {
$scope.boolChangeClass = !$scope.boolChangeClass;
//$scope.$apply();
};
}