Skip to content

Instantly share code, notes, and snippets.

@HoangLong22

HoangLong22/angularjs-nganimate-sliding-side-menu.markdown

Created September 25, 2020 09:01
Show Gist options
  • Save HoangLong22/34a2219cf96c258560e7512e964c7620 to your computer and use it in GitHub Desktop.
Save HoangLong22/34a2219cf96c258560e7512e964c7620 to your computer and use it in GitHub Desktop.
Download ZIP
AngularJS ngAnimate sliding side menu
Raw
angularjs-nganimate-sliding-side-menu.markdown

AngularJS ngAnimate sliding side menu

Quick demo of a sliding side menu using AngularJS' ngAnimate module. Click the icon or outside the menu to close it.

A Pen by Rich on CodePen.

License.

Raw
index.html
<body ng-app="menu" ng-controller="mainCtrl" ng-mouseup="elsewhrClicks($event)" class="ng-cloak">
<div class="navbar">
<div id="nav-toggle" ng-click="toggleNav = !toggleNav; animate = !animate" ng-class="{'active': animate}">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<div class="content"></div>
<div id="mobile-nav-menu" ng-show="toggleNav">
<ul ng-click="close()">
<li><a ui-sref="#">Home<i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
<li><a ui-sref="#">About<i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
<li><a ui-sref="#">News<i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
<li><a ui-sref="#">Login<i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
<li><a ui-sref="#">Contact&nbsp;Us<i class="fa fa-chevron-right" aria-hidden="true"></i></a></li>
</ul>
</div>
</body>
Raw
script.js
var menu = angular.module("menu",["ngAnimate"]);
menu.controller("mainCtrl", function($scope) {
//Mobile menu default = hidden
$scope.toggleNav = false;
//Hamburger icon default
$scope.animate = false;
//Closes mobile menu when opening new views
$scope.close = function(){
$scope.toggleNav = false;
$scope.animate = false;
}
$scope.elsewhrClicks = function($event){
var menu = $('#mobile-nav-menu'),
menuIcon = $('#nav-toggle');
if(!menuIcon.is($event.target) && menuIcon.has($event.target).length === 0) {
if(!menu.is($event.target) && $scope.toggleNav == true) {
$scope.close();
}
}
};
});
Raw
scripts
<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/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.0/angular-animate.js"></script>
Raw
style.scss
@import "bourbon";
$mainColor: #ff8328;
$accentColor: whitesmoke;
$navColor: #222;
$menuBorder: 1px solid rgba(34, 34, 34, 0.3);
$liBorder: 1px solid rgba(65,65,65,0.1);
body {
color: #3c3b3b;
background-color: whitesmoke;
background-size: cover;
margin: 0;
padding: 0;
font-family: 'Lato', 'sans-serif';
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
overflow-y: hidden;
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
a {
text-decoration: none;
}
.content {
background: whitesmoke;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.navbar {
background: #555;
width: 100%;
height: 60px;
position: absolute;
top: 0;
left: 0;
}
/*Mobile Menu*/
.mobile {
color: white;
float: left;
width: 30px;
height: 36px;
font-size: 24px;
margin-top: 0px;
margin-left: 0;
}
#nav-toggle {
width: 30px;
height: 25px;
margin-left: 15px;
top: 20px;
float: left;
position: absolute;
display: block;
padding-top: 20px;
cursor: pointer;
@include transition(0.2s ease-in-out);
span {
cursor: pointer;
border-radius: 1px;
height: 2px;
width: 24px;
background: $accentColor;
position: absolute;
display: block;
opacity: 1;
@include transition(0.2s ease-in-out);
}
span:nth-child(1) {
top: 1px;
}
span:nth-child(2), span:nth-child(3) {
top: 9px;
}
span:nth-child(4) {
top: 17px;
}
&.active span:nth-child(1) {
top: 9px;
opacity: 0;
height: 0;
}
&.active span:nth-child(2) {
@include transform(rotate(45deg));
}
&.active span:nth-child(3) {
@include transform(rotate(-45deg));
}
&.active span:nth-child(4) {
top: 10px;
opacity: 0;
height: 0;
}
}
#mobile-nav-menu {
float: left;
width: 270px;
background: white;
font-size: 19px;
margin-top: 60px;
padding: 0;
position: absolute;
overflow: hidden;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
border-right: $menuBorder;
border-bottom: $menuBorder;
cursor: pointer;
ul {
padding-left: 0;
height: 100vh;
margin-top: 0;
}
li {
border-top: 1px solid #222;
list-style: none;
width: 100%;
height: 49px;
border-top: $liBorder;
text-align: left;
font-weight: lighter;
&:hover {
opacity: 0.75;
background: #f5f8f9;
}
}
li a {
color: $navColor;
height: 100%;
margin-left: 0;
display: block;
padding: 15px 0 10px 35px;
}
li:last-of-type {
border-bottom: $liBorder;
}
.fa-chevron-right {
float: right;
font-size: 14px;
color: #c0bebe;
margin: 7px 30px;
}
}
//Animate menu slide-in/out
.ng-hide-remove {
@include animation(0.5s slideIn ease);
}
.ng-hide-add {
@include animation(0.5s slideOut ease);
display:block!important;
}
@keyframes slideIn {
0% {left: -270px;}
100% {left: 0px;}
}
@keyframes slideOut {
0% {left: 0px;}
100% {left: -270px;}
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Lato:100i,300,300i,400,400i,700" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment