Hello readers here we will discuss about angular js menu with angular menu controller. I have created a multi-level menu with a hide-away sub menu, comes from an external source. The sub menu will display when any user click over the menu.
In this example I have used angular directive called ng-style which make ease for dynamic style assignment. I have used it here to position the submenu under the proper parent item. The directive is assigned to the ul element, whenever a parent item is clicked , a function is called, which modifies the scope ‘subLeft’ property, something like this:
$scope.subLeft = {'padding-left':'0px'};
$scope.showSubMenu = function(item,pos) {
// Move submenu based on position of parent
$scope.subLeft = {'padding-left':(80 * pos)+'px'};
// Set activeItem and sublinks to the currectly
// selected item.
$scope.activeItem = item;
$scope.sublinks = item.sublinks;
};
I have used the Angular iterator "index" in place of the sending the element id. As all of my menu items is of the same width while it was an affair or situation when multiplying the index by that width to arrive at the correct positioning.
Under the controller I have made the "items" for menus consisting of item id, title, description, sublinks and URL. Whenever user click on the menu the controller will send the items to the page and the sub menus will appears at its correct position.
Folder structure :-
> css
> style.css
> js
> angular.js
> app.js
index.html
html code for the index.html
<!DOCTYPE html>
<html lang="en" ng-app="menu">
<head>
<meta charset="UTF-8">
<title>Angular Menu</title>
<link rel="stylesheet" href="css/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div class="nav" ng-controller="MenuController">
<ul>
<!-- Iterate over and display main menu items -->
<li class="main btn" ng-repeat="item in items" ng-click="showSubMenu(item,$index)">
<!--<a class="btn" >{{item.title}}</a>-->
{{item.title}}
</li>
</ul>
<div style="clear:both;"></div>
<ul ng-style="subLeft">
<!-- Iterate over and display submenu items -->
<li class="sub" ng-repeat="sublink in sublinks">
<a class="btn fullwidth" ng-href="{{sublink.href}}" target="{{sublink.target}}" >{{sublink.title}}</a>
</li>
</ul>
<div style="clear:both;"></div>
</div>
</body>
</html>
Css code for style.css
body {
font-family: Helvetica,Arial;
font-size: 10pt;
}
.nav{
margin: 0 auto;
width: 419px;
}
ul {
margin:0;
padding:0;
}
li {
margin:0;
padding:0;
list-style: none;
text-align: center;
line-height:27px;
cursor: pointer;
border-radius: 4px;
border:1px solid #bac3ca;
background-color: #eaeaea;
}
li:hover {
background-color: #5e6874;
color: #fff;
}
li:active {
background-color: #5e6874;
color: #fff;
}
.main {
float: left;
margin-top:5px;
width:78px;
}
.sub {
margin:0;
width:120px;
background-color: #5e6874;
}
.sub a{
color: #fff;
}
.sub:hover {
background-color: #5e6874;
}
.sub:hover a{
color: #fff;
}
.sub:active {
background-color: #5e6874;
}
.btn {
color:#847474;
text-decoration: none;
}
.fullwidth {
/* inline-block allows the anchor tag to fill
the entire width of the list item */
display:inline-block;
width:100%;
}
Java script code for app.js file
var app = angular.module("menu",[]);
app.controller("MenuController",function($scope, $http) {
$scope.items = [
{"itemId":1, "title":"Google", "description":"Google Search Engine",
"sublinks":[
{"title":"Google", "href":"http://google.com/", "target":"_blank"},
{"title":"Play", "href":"http://play.google.com/", "target":"_blank"},
{"title":"Plus", "href":"http://plus.google.com/", "target":"_blank" }
]},
{"itemId":2, "title":"Yahoo", "description":"Yahoo Search Engine",
"sublinks":[
{"title":"Yahoo", "href":"http://yahoo.com/", "target":"_blank" },
{"title":"Sports", "href":"http://sports.yahoo.com/", "target":"_blank" },
{"title":"News", "href":"http://news.yahoo.com/", "target":"_blank" }
]},
{"itemId":3, "title":"Bing", "description":"Bing Search Engine",
"sublinks":[
{"title":"Bing", "href":"http://www.bing.com", "target":"_blank" },
{"title":"Entertainment", "href":"http://www.bing.com/entertainment", "target":"_blank" },
{"title":"Videos", "href":"http://www.bing.com/videos/browse?FORM=L8SP7", "target":"_blank" }
]},
{"itemId":4, "title":"Dogpile", "description":"Dogpile Search Engine",
"sublinks":[
{"title":"Dogpile", "href":"http://www.dogpile.com", "target":"_blank"},
{"title":"FAQ", "href":"http://www.dogpile.com/info.dogpl.t6.1/support/Faqs", "target":"_blank"},
{"title":"Contact", "href":"http://m.dogpile.com/support/contactus", "target":"_blank" }
]}
];
// Defaults
$scope.sublinks = null;
$scope.activeItem = null;
// Default submenu left padding to 0
$scope.subLeft = {'padding-left':'0px'};
/*
* Set active item and submenu links
*/
$scope.showSubMenu = function(item,pos) {
// Move submenu based on position of parent
$scope.subLeft = {'padding-left':(80 * pos)+'px'};
// Set activeItem and sublinks to the currectly
// selected item.
$scope.activeItem = item;
$scope.sublinks = item.sublinks;
};
});
For the angular.js you can download it from the officail website " https://angularjs.org/ "
Browser Support :-
Angular support all the major browsers Firefox, chrome, safari, Internet Explolrer.
0 Comment(s)