Navigation menu using Angular Directive

Developer
Victor Yan
Size
2,391 Kb
Views
8,096
  1. Navigation menu using Angular Directive Previews
  2. Navigation menu using Angular Directive HTML Codes
  3. Navigation menu using Angular Directive CSS Codes

How do I make an navigation menu using angular directive?

What is a navigation menu using angular directive? How do you make a navigation menu using angular directive? This script and codes were developed by Victor Yan on 05 January 2023, Thursday.

Navigation menu using Angular Directive Previews
IQ Test

Navigation menu using Angular Directive - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Navigation menu using Angular Directive</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Adding the ng-app declaration to initialize AngularJS -->
<div id="main" ng-app>	<!-- The navigation menu will get the value of the "active" variable as a class. The $event.preventDefault() stops the page from jumping when a link is clicked. -->	<nav class="{{active}}" ng-click="$event.preventDefault()">	<!-- When a link in the menu is clicked, we set the active variable -->	<a href="#" class="home" ng-click="active='home'">Home</a>	<a href="#" class="projects" ng-click="active='projects'">Projects</a>	<a href="#" class="services" ng-click="active='services'">Services</a>	<a href="#" class="contact" ng-click="active='contact'">Contact</a>	</nav>	<!-- ng-show will show an element if the value in the quotes is truthful, while ng-hide does the opposite. Because the active variable is not set initially, this will cause the first paragraph to be visible. -->	<p ng-hide="active">Please click a menu item</p>	<p ng-show="active">You chose <b>{{active}}</b></p> <div style="margin-top: 20px;">Provided by <a onclick="window.open('https://www.tipsoftheday.com.au')">Tips of the day</a></div>
</div> <script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js'></script>
</body>
</html>

Navigation menu using Angular Directive - Script Codes CSS Codes

*{	margin:0;	padding:0;
}
body{	font:15px/1.3 'Open Sans', sans-serif;	color: #5e5b64;	text-align:center;
}
a, a:visited {	outline:none;	color:#389dc1;
}
a:hover{	text-decoration:none;
}
section, footer, header, aside, nav{	display: block;
}
/*-------------------------	The menu
--------------------------*/
nav{	display:inline-block;	margin:60px auto 45px;	background-color:#5597b4;	box-shadow:0 1px 1px #ccc;	border-radius:2px;
}
nav a{	display:inline-block;	padding: 18px 30px;	color:#fff !important;	font-weight:bold;	font-size:16px;	text-decoration:none !important;	line-height:1;	text-transform: uppercase;	background-color:transparent;	-webkit-transition:background-color 0.25s;	-moz-transition:background-color 0.25s;	transition:background-color 0.25s;
}
nav a:first-child{	border-radius:2px 0 0 2px;
}
nav a:last-child{	border-radius:0 2px 2px 0;
}
nav.home .home,
nav.projects .projects,
nav.services .services,
nav.contact .contact{	background-color:#e35885;
}
p{	font-size:22px;	font-weight:bold;	color:#7d9098;
}
p b{	color:#ffffff;	display:inline-block;	padding:5px 10px;	background-color:#c4d7e0;	border-radius:2px;	text-transform:uppercase;	font-size:18px;
}
Navigation menu using Angular Directive - Script Codes
Navigation menu using Angular Directive - Script Codes
Home Page Home
Developer Victor Yan
Username tipsoftheday
Uploaded January 05, 2023
Rating 3
Size 2,391 Kb
Views 8,096
Do you need developer help for Navigation menu using Angular Directive?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Victor Yan (tipsoftheday) Script Codes
Name
Create inline help tips for your site with a bit of CSS
Detect Enter Key Pressed Using jQuery event
TodoMVC using AngularJS
Tooltip using plain Javascript
HTML 5 Session Storage Example
TodoMVC using jQuery
Using Javascript to calculate age
QUnit example to verify calculate age function
HTML 5 Canvas Example
Bootstrap 3 Explained
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!