<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Horizontal Drawers</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="body" data-ng-app="app">
<div class="horizontal-drawers">
<div class="drawer drawer-one" data-ng-class="{open: active==0}">
<div class="drawer-handle" data-ng-click="setActive(0)">A</div>
<div class="drawer-body" data-ng-class="{open: active==0}">Lorem</div>
</div>
<div class="drawer drawer-two" data-ng-class="{open: active==1}">
<div class="drawer-handle" data-ng-click="setActive(1)">B</div>
<div class="drawer-body" data-ng-class="{open: active==1}">Lorem</div>
</div>
<div class="drawer drawer-three" data-ng-class="{open: active==2}">
<div class="drawer-handle" data-ng-click="setActive(2)">C</div>
<div class="drawer-body" data-ng-class="{open: active==2}">Lorem</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-animate.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
/*Downloaded from https://www.codeseek.co/007design/horizontal-drawers-KWbrWX */
.body {
padding: 10px;
}
.horizontal-drawers {
position: relative;
height: 100px;
width: 100%;
background-color: grey;
}
.horizontal-drawers .drawer {
float: left;
height: 100%;
width: 50px;
transition: width linear .5s;
}
.horizontal-drawers .drawer .drawer-handle {
width: 50px;
height: 100%;
float: left;
}
.horizontal-drawers .drawer .drawer-body {
float: right;
overflow: hidden;
width: calc(100% - 50px);
background-color: purple;
}
.horizontal-drawers .drawer.open {
width: calc(100% - 100px);
}
.horizontal-drawers .drawer.open.open-active {
width: 100%;
}
.horizontal-drawers .drawer-one .drawer-handle {
background-color: red;
}
.horizontal-drawers .drawer-two .drawer-handle {
background-color: green;
}
.horizontal-drawers .drawer-three .drawer-handle {
background-color: blue;
}
/*Downloaded from https://www.codeseek.co/007design/horizontal-drawers-KWbrWX */
angular.module('app', ['ngAnimate'])
.directive('horizontalDrawers',['$timeout', function($timeout) {
return {
restrict: 'C',
scope: true,
link: function(scope, elem) {
scope.active = 0;
var timer;
scope.setActive = function(idx) {
if (timer) {
$timeout.cancel(timer);
timer = null;
} else {
scope.active = idx;
timer = $timeout(function() {
timer = null;
},500);
}
}
}
};
}]);
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
AngularJS
jQuery
v3.1.1
