Skip to content

Instantly share code, notes, and snippets.

@mhulse

mhulse/close.svg

Created June 7, 2016 18:49
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mhulse/0fc916ffd04682ee017f1993f19cafeb to your computer and use it in GitHub Desktop.
Save mhulse/0fc916ffd04682ee017f1993f19cafeb to your computer and use it in GitHub Desktop.
Download ZIP
A cleaned-up Angular page slide navigation example (https://github.com/dpiccone/ng-pageslide)
Display the source blob
Display the rendered blob
Raw
close.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Raw
index.html
<!doctype html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.1.1/normalize.min.css">
<style>
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
-khtml-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 100%; }
body { min-height: 100%; }
html,
body { overflow-x: hidden; }
html { overflow-y: scroll; }
body.ng-pageslide-body-open {
position: fixed;
width: 100%;
top:0;
left: 0;
height: 100%;
overflow-y: hidden;
z-index: 10;
}
body.ng-pageslide-body-open::before {
content: '.';
display: block;
position: absolute;
top: 0;
background-color: rgb(0,0,0);
left: 0;
right: 0;
bottom: 0;
z-index: 1;
opacity: 0.5;
transition: opacity 1s;
}
body.ng-pageslide-body-closed::before {
transition: opacity 1s;
opacity: 0;
content: '.';
display: block;
position: absolute;
top: 0;
background-color: rgb(0,0,0);
left: 0;
right: 0;
bottom: 0;
z-index: 1;
pointer-events: none;
}
.ng-pageslide {
background: #eee;
position: relative;
}
.wrapper { padding: 20px; }
.wrapper.wrapper-scroll {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow-y: scroll;
}
.menu-item {
border: 1px solid #ddd;
background: #fff;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
cursor: hand;
border-radius: 3px;
box-shadow: 0 0 5px rgba(0, 0, 0, .9);
}
.menu-item img { display: block; }
.shadow { box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.shadow::after {
content: "";
opacity: 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
-webkit-transition: opacity .6s cubic-bezier(.165, .84, .44, 1);
-khtml-transition: opacity .6s cubic-bezier(.165, .84, .44, 1);
-moz-transition: opacity .6s cubic-bezier(.165, .84, .44, 1);
-ms-transition: opacity .6s cubic-bezier(.165, .84, .44, 1);
-o-transition: opacity .6s cubic-bezier(.165, .84, .44, 1);
transition: opacity .6s cubic-bezier(.165, .84, .44, 1);
}
.shadow:hover::after { opacity: 1; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="./angular-pageslide-directive.min.js"></script>
<script>
var app = angular.module('app', ['pageslide-directive']);
app.controller('pageslideCtrl', ['$scope', function($scope) {
$scope.checked = false;
$scope.toggle = function() {
$scope.checked = ( ! $scope.checked)
}
}]);
</script>
</head>
<body ng-app="app">
<div ng-controller="pageslideCtrl">
<div ng-click="toggle()" class="menu-item shadow" aria-hidden="true">
<img src="menu.svg">
</div>
<pageslide ps-open="checked" ps-key-listener="true" ps-body-class="true">
<div class="wrapper wrapper-scroll">
<div ng-click="toggle()" class="menu-item shadow" aria-hidden="true">
<img src="close.svg">
</div>
<h3>Other</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet odio id ex dignissim lobortis et venenatis nunc. In fermentum porta ipsum in gravida. Curabitur nisl elit, imperdiet eu eleifend eget, malesuada eu nunc. Cras vestibulum felis id eros hendrerit, et maximus odio gravida. Quisque vestibulum convallis justo, a fermentum neque. Maecenas gravida nisi non erat consequat gravida. Duis sit amet semper lorem.</p>
<p>Donec eget lectus et erat rhoncus pellentesque eu in risus. Duis hendrerit sollicitudin dolor sed dictum. Ut quis volutpat metus. Praesent et pretium magna. Suspendisse purus justo, pretium a est sed, fringilla molestie magna. Donec mollis nulla id iaculis vulputate. Donec erat elit, pretium ac vestibulum quis, malesuada in est. Aliquam feugiat vel mauris et sagittis. Nunc auctor non leo et molestie. Aliquam elementum est vel pulvinar auctor. Integer viverra dui mi, vel rhoncus lacus ornare in. Mauris maximus nibh et vestibulum consectetur. Phasellus vel nisl a velit pharetra tempor in at sem. Nulla sed felis quis mi lacinia porttitor. Vestibulum molestie risus id leo imperdiet, faucibus rutrum lectus bibendum.</p>
<p>Vestibulum consequat tellus quis erat blandit dignissim. Morbi in mauris finibus ante auctor mattis sed eu nunc. Cras blandit justo a erat consectetur ullamcorper. Pellentesque tellus dui, convallis et augue a, accumsan blandit metus. Praesent eu leo dui. Cras a erat sed ex feugiat rhoncus eu vel lorem. Donec venenatis nisl est, in sodales urna tempus vel. Fusce tincidunt gravida risus, sit amet placerat neque facilisis non. Proin non lacinia ex.</p>
<p>Donec eleifend urna ut ipsum dignissim, lobortis fermentum metus vestibulum. Aenean vitae porta libero, et sollicitudin orci. Phasellus sed tristique neque, at luctus neque. Praesent egestas erat lectus, nec commodo velit facilisis vel. Etiam rhoncus sed nulla vitae tristique. Donec blandit placerat velit, sit amet vehicula quam. Praesent nec diam erat. Mauris sed auctor nisl, sed imperdiet nulla. Etiam mi arcu, viverra ut ante sit amet, hendrerit convallis elit. Donec ac odio ut risus consequat pulvinar. Etiam fermentum enim nec dignissim dapibus.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sodales, enim sit amet fermentum consequat, leo sem finibus diam, eu viverra tortor diam a turpis. Curabitur ac ipsum eget ligula malesuada iaculis eu ac erat. Proin eleifend purus blandit leo vestibulum congue. Proin id urna ac purus volutpat iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris eget iaculis leo. Sed quis finibus ligula, euismod aliquam leo. Quisque sem lacus, iaculis ut consectetur ut, mattis a tortor. Nullam sem lacus, lobortis vel pulvinar a, egestas commodo urna. Ut dignissim nibh nec ullamcorper hendrerit. Ut et libero eu quam pharetra dignissim eget nec odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vel neque in urna lacinia dictum. Cras blandit commodo tortor, sit amet finibus eros vestibulum ac.</p>
</div>
</pageslide>
</div>
<h1>Logo</h1>
<div class="wrapper">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sit amet odio id ex dignissim lobortis et venenatis nunc. In fermentum porta ipsum in gravida. Curabitur nisl elit, imperdiet eu eleifend eget, malesuada eu nunc. Cras vestibulum felis id eros hendrerit, et maximus odio gravida. Quisque vestibulum convallis justo, a fermentum neque. Maecenas gravida nisi non erat consequat gravida. Duis sit amet semper lorem.</p>
<p>Donec eget lectus et erat rhoncus pellentesque eu in risus. Duis hendrerit sollicitudin dolor sed dictum. Ut quis volutpat metus. Praesent et pretium magna. Suspendisse purus justo, pretium a est sed, fringilla molestie magna. Donec mollis nulla id iaculis vulputate. Donec erat elit, pretium ac vestibulum quis, malesuada in est. Aliquam feugiat vel mauris et sagittis. Nunc auctor non leo et molestie. Aliquam elementum est vel pulvinar auctor. Integer viverra dui mi, vel rhoncus lacus ornare in. Mauris maximus nibh et vestibulum consectetur. Phasellus vel nisl a velit pharetra tempor in at sem. Nulla sed felis quis mi lacinia porttitor. Vestibulum molestie risus id leo imperdiet, faucibus rutrum lectus bibendum.</p>
<p>Vestibulum consequat tellus quis erat blandit dignissim. Morbi in mauris finibus ante auctor mattis sed eu nunc. Cras blandit justo a erat consectetur ullamcorper. Pellentesque tellus dui, convallis et augue a, accumsan blandit metus. Praesent eu leo dui. Cras a erat sed ex feugiat rhoncus eu vel lorem. Donec venenatis nisl est, in sodales urna tempus vel. Fusce tincidunt gravida risus, sit amet placerat neque facilisis non. Proin non lacinia ex.</p>
<p>Donec eleifend urna ut ipsum dignissim, lobortis fermentum metus vestibulum. Aenean vitae porta libero, et sollicitudin orci. Phasellus sed tristique neque, at luctus neque. Praesent egestas erat lectus, nec commodo velit facilisis vel. Etiam rhoncus sed nulla vitae tristique. Donec blandit placerat velit, sit amet vehicula quam. Praesent nec diam erat. Mauris sed auctor nisl, sed imperdiet nulla. Etiam mi arcu, viverra ut ante sit amet, hendrerit convallis elit. Donec ac odio ut risus consequat pulvinar. Etiam fermentum enim nec dignissim dapibus.</p>
<p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam sodales, enim sit amet fermentum consequat, leo sem finibus diam, eu viverra tortor diam a turpis. Curabitur ac ipsum eget ligula malesuada iaculis eu ac erat. Proin eleifend purus blandit leo vestibulum congue. Proin id urna ac purus volutpat iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris eget iaculis leo. Sed quis finibus ligula, euismod aliquam leo. Quisque sem lacus, iaculis ut consectetur ut, mattis a tortor. Nullam sem lacus, lobortis vel pulvinar a, egestas commodo urna. Ut dignissim nibh nec ullamcorper hendrerit. Ut et libero eu quam pharetra dignissim eget nec odio. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed vel neque in urna lacinia dictum. Cras blandit commodo tortor, sit amet finibus eros vestibulum ac.</p>
</div>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
menu.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment