![]()
What You’ll Learn
How to create a smooth slide-in menu using ngAnimate
Using ng-class for toggling menu visibility
Applying CSS transitions for animations
Enhancing the menu with click events
1️⃣ Setting Up ngAnimate
To enable animations in AngularJS, you need to include ngAnimate.
Step 1: Include AngularJS and ngAnimate
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular-animate.min.js"></script>
Step 2: Create an AngularJS App
var app = angular.module('myApp', ['ngAnimate']);
2️⃣ Creating the Slide-In Menu UI
The menu will slide in from the left when a button is clicked.
HTML Code
<style>
/* Container for the menu */
.menu-container {
position: fixed;
top: 0;
left: -250px; /* Initially hidden */
width: 250px;
height: 100vh;
background-color: #333;
color: white;
transition: left 0.4s ease-in-out;
padding: 20px;
}
/* Menu visible state */
.menu-container.open {
left: 0;
}
/* Close button */
.close-btn {
cursor: pointer;
background-color: red;
color: white;
border: none;
padding: 10px;
margin-bottom: 10px;
width: 100%;
text-align: center;
}
/* Open menu button */
.menu-btn {
position: fixed;
top: 20px;
left: 20px;
background-color: dodgerblue;
color: white;
border: none;
padding: 10px;
cursor: pointer;
}
</style>
<div ng-app="myApp" ng-controller="MenuCtrl">
<!-- Button to open the menu -->
<button class="menu-btn" ng-click="toggleMenu()">☰ Open Menu</button>
<!-- Slide-in Menu -->
<div class="menu-container" ng-class="{'open': isMenuOpen}">
<button class="close-btn" ng-click="toggleMenu()">Close Menu</button>
<h2>Slide-In Menu</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
3️⃣ Adding AngularJS Functionality
Now, we create a controller to handle menu toggling.
JavaScript Code
app.controller('MenuCtrl', function ($scope) {
$scope.isMenuOpen = false;
$scope.toggleMenu = function () {
$scope.isMenuOpen = !$scope.isMenuOpen;
};
});
4️⃣ How It Works
✔ The menu starts hidden (left: -250px).
✔ Clicking the Open Menu button adds the open class, making left: 0.
✔ Clicking the Close Menu button removes the open class, sliding the menu out.
✔ ng-class dynamically toggles the open class based on $scope.isMenuOpen.
5️⃣ Enhancements: Closing Menu on Click Outside
To close the menu when clicking outside, use $document.
Updated JavaScript Code
app.controller('MenuCtrl', function ($scope, $document) {
$scope.isMenuOpen = false;
$scope.toggleMenu = function () {
$scope.isMenuOpen = !$scope.isMenuOpen;
};
// Close menu when clicking outside
$document.on('click', function (event) {
if (!$scope.isMenuOpen) return;
var menu = document.querySelector('.menu-container');
if (!menu.contains(event.target)) {
$scope.$apply(function () {
$scope.isMenuOpen = false;
});
}
});
});
Now, clicking outside the menu will close it! 🎯
