<html>
<head>
<!-- Menu04cssPrototype #09 Works -->
<meta charset="utf-8" />
<title>AngularJS Dynamic Menu Pure CSS 3 Deep ng-repeat</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="module.js"></script>
<script src="factorymenu.js"></script>
<script src="controller.js"></script>
</head>
<body ng-app="myTable">
<div ng-include="'body.html'"></div>
<p>
Make sure this is covered during menu display.
</p>
</body>
</html>
/*CSS code from:
http://www.cssscript.com/create-a-multi-level-drop-down-menu-with-pure-css
http://www.cssscript.com/demo/create-a-multi-level-drop-down-menu-with-pure-css
*/
ul {
list-style: none;
padding: 0;
margin: 0;
background-color: blue;
}
ul li {
display: block;
position: relative;
float: left;
background-color: blue;
}
/* This hides the dropdowns */
li ul { display: none; }
ul li a {
display: block;
padding-bottom: .05em;
padding-left: 1em;
padding-right: 1em;
padding-top: .05em;
text-decoration: none;
white-space: nowrap;
font-family:Arial;
font-size:small;
color: #fff;
}
ul li a:hover { background-color: orangered; }
/* Display the dropdown */
li:hover > ul {
display: block;
position: absolute;
}
li:hover li { float: none; }
li:hover a { background-color: darkgreen; }
li:hover li a:hover { background-color: darkmagenta }
.main-navigation li ul li { border-top: 0; }
/* Displays second level dropdowns to the right of the first level dropdown */
ul ul ul {
left: 100%;
top: 0;
}
/* Simple clearfix */
ul:before,
ul:after {
content: " "; /* 1 */
display: table; /* 2 */
}
ul:after { clear: both; }
<div ng-controller="MenuCtrl">
<ul class="main-navigation">
<div ng-repeat="TempltMaster in MenuData">
<!--only top menu level (no submenus) Only top level can optionally contain icon -->
<li ng-if="TempltMaster.MenuDetails == undefined" >
<!--NO icon-->
<a href="#" ng-if="TempltMaster.icon == undefined || TempltMaster.icon == ''" ng-click="MenuAction(TempltMaster.Menu_Master_ID, null, null, $event)">
{{TempltMaster.Menu_Master_Name}}
</a>
<!--Contains an icon-->
<a href="#" ng-if="TempltMaster.icon != undefined && TempltMaster.icon != ''" ng-click="MenuAction(TempltMaster.Menu_Master_ID, null, null, $event)">
<img title="{{TempltMaster.Menu_Master_Name}}" ng-src="{{TempltMaster.icon}}" alt="{{TempltMaster.Menu_Master_Name}}" width="15" height="15" border="0">
</a>
</li>
<!--Menus with submenus -->
<li ng-if="TempltMaster.MenuDetails != undefined" >
<a href="#" >
{{TempltMaster.Menu_Master_Name}}
</a>
<ul>
<div ng-repeat="MenuDetail in TempltMaster.MenuDetails">
<!--SubMenu with NO flyout -->
<li ng-if="MenuDetail.MenuTasks == undefined">
<a href="#" ng-click="MenuAction(TempltMaster.Menu_Master_ID, MenuDetail.Menu_Detail_ID, null, $event)">{{MenuDetail.Menu_Detail_Name}}</a>
</li>
<!--SubMenu with YES flyout -->
<li ng-if="MenuDetail.MenuTasks != undefined">
<a href="#">{{MenuDetail.Menu_Detail_Name}}</a>
<ul>
<div ng-repeat="MenuTask in MenuDetail.MenuTasks">
<li><a href="#" ng-click="MenuAction(TempltMaster.Menu_Master_ID, MenuDetail.Menu_Detail_ID, MenuTask.Menu_Task_ID, $event)">{{MenuTask.Menu_Task_Name}}</a></li>
</div>
</ul>
</li>
</div>
</ul>
</li>
</div>
</ul>
</div>
var myTable;
(function () {
myTable = angular.module('myTable', []);
})();
myTable.factory('factMenu', function () {
var MenuData = {};
MenuData.getMenu = function () {
MenuData = [
{
"Menu_Master_ID": 10,
"Menu_Master_Name": "Home",
"icon": "https://i.imgur.com//QkJjWhy.png",
"IsMoreURLDeapth": false, // is this the last item and use this URL_Detail_Actual
"URL_Master_ID": 4060,
"URL_Detail_ID": 5060,
"URL_Detail_Actual": "urlWhatever"
}
,
{
"Menu_Master_ID": 100,
"Menu_Master_Name": "TopOne",
"IsMoreURLDeapth": true, // is this the last item and use this URL_Detail_Actual
"URL_Master_ID": 3000,
"URL_Detail_ID": 5000,
"URL_Detail_Actual": "urlWhatever",
"MenuDetails": [
{
"Menu_Detail_ID": 10000,
"Menu_Detail_Name": "MiddleOne",
"IsMoreURLDeapth": false, // is this the last item and use this URL_Detail_Actual
"URL_Master_ID": 4000,
"URL_Detail_ID": 5000,
"URL_Detail_Actual": "urlWhatever"
}
,
{
"Menu_Detail_ID": 20000,
"Menu_Detail_Name": "MiddleTwo",
"IsMoreURLDeapth": false, // is this the last item and use this URL_Detail_Actual
"URL_Master_ID": 4000,
"URL_Detail_ID": 5000,
"URL_Detail_Actual": "urlWhatever"
}
,
{
"Menu_Detail_ID": 30000,
"Menu_Detail_Name": "MiddleThree Flyout",
"IsMoreURLDeapth": true, // is this the last item and use this URL_Detail_Actual
"URL_Master_ID": 40000,
"URL_Detail_ID": 50000,
"URL_Detail_Actual": "urlWhatever",
"MenuTasks": [{
"Menu_Task_ID": "100",
"Menu_Task_Name": "MenuTaskOne",
"URL_Master_ID": 4000,
"URL_Detail_ID": 5000,
"URL_Detail_Actual": "urlWhatever",
"MenuCrumbs": [{
"Menu_Crumb_ID": "10000",
"Menu_Crumb_Name": "MenuCrumb One",
"URL_Master_ID": 4000,
"URL_Detail_ID": 5000,
"URL_Detail_Actual": "urlWhatever",
}
]
}, {
"Menu_Task_ID": "200",
"Menu_Task_Name": "MenuTaskTwo",
"URL_Master_ID": 4000,
"URL_Detail_ID": 5000,
"URL_Detail_Actual": "urlWhatever",
}
]
}
]
}
,
{
"Menu_Master_ID": 70,
"Menu_Master_Name": "NoSubmenu",
"icon": "",
"IsMoreURLDeapth": false, // is this the last item and use this URL_Detail_Actual
"URL_Master_ID": 7060,
"URL_Detail_ID": 7060,
"URL_Detail_Actual": "urlWhatever"
}
,
{
"Menu_Master_ID": 5,
"Menu_Master_Name": "Logout",
"icon": "https://i.imgur.com//OFISMXW.png",
"IsMoreURLDeapth": false, // is this the last item and use this URL_Detail_Actual
"URL_Master_ID": 4,
"URL_Detail_ID": 6,
"URL_Detail_Actual": "urlWhatever"
}
];
return MenuData;
};
MenuData.getObjctByMenu_Master_ID = function (p_Menu_Master_ID) {
if (p_Menu_Master_ID == null) { return null;}
var templatesNbrRows = Object.keys(MenuData).length;
for (var k = 0; k < templatesNbrRows ; k++) {
if (parseInt(MenuData[k].Menu_Master_ID, 10) == parseInt(p_Menu_Master_ID, 10)) {
return MenuData[k];
}
}
return null;
};
MenuData.getObjctByMenu_Detail_ID = function (p_Menu_Master_ID, p_Menu_Detail_ID) {
if (p_Menu_Master_ID == null || p_Menu_Detail_ID == null) { return null; }
var templatesNbrRows = Object.keys(MenuData).length;
for (var k = 0; k < templatesNbrRows; k++) {
if (parseInt(MenuData[k].Menu_Master_ID, 10) == parseInt(p_Menu_Master_ID, 10)) {
for (var d = 0; d < Object.keys(MenuData[k].MenuDetails).length; d++) {
if (parseInt(MenuData[k].MenuDetails[d].Menu_Detail_ID, 10) == parseInt(p_Menu_Detail_ID, 10)) {
return MenuData[k].MenuDetails[d];
}
}
}
}
return null;
};
MenuData.getObjctByMenu_Task_ID = function (p_Menu_Master_ID, p_Menu_Detail_ID, p_Menu_Task_ID) {
if (p_Menu_Master_ID == null || p_Menu_Detail_ID == null || p_Menu_Task_ID == null) { return null; }
var templatesNbrRows = Object.keys(MenuData).length;
for (var k = 0; k < templatesNbrRows; k++) {
if (parseInt(MenuData[k].Menu_Master_ID, 10) == parseInt(p_Menu_Master_ID, 10)) {
for (var d = 0; d < Object.keys(MenuData[k].MenuDetails).length ; d++) {
if (parseInt(MenuData[k].MenuDetails[d].Menu_Detail_ID, 10) == parseInt(p_Menu_Detail_ID, 10)) {
for (var t = 0; t < Object.keys(MenuData[k].MenuDetails[d].MenuTasks).length ; t++) {
if (parseInt(MenuData[k].MenuDetails[d].MenuTasks[t].Menu_Task_ID, 10) == parseInt(p_Menu_Task_ID, 10)) {
return MenuData[k].MenuDetails[d].MenuTasks[t];
}
}
}
}
}
}
return null;
};
return MenuData;
})
myTable.controller('MenuCtrl', function MenuCtrl($scope, $http, $sce, $timeout, factMenu) {
console.log("should only MenuCtrl once");
$scope.MenuData = factMenu.getMenu();
$scope.MenuAction = function (p_Menu_Master_ID, p_Menu_Detail_ID, p_Menu_Task_ID, p_evnt) {
console.log("MenuAction p_Menu_Master_ID=" + p_Menu_Master_ID);
console.log("MenuAction p_Menu_Detail_ID=" + p_Menu_Detail_ID);
console.log("MenuAction p_Menu_Task_ID=" + p_Menu_Task_ID);
var oMenuMaster = factMenu.getObjctByMenu_Master_ID(p_Menu_Master_ID); // p_Menu_Master_ID=100 p_Menu_Detail_ID=20000
var oMenuDetails = factMenu.getObjctByMenu_Detail_ID(100, p_Menu_Detail_ID); // p_Menu_Master_ID=100 p_Menu_Detail_ID=20000
var oMenuTask = factMenu.getObjctByMenu_Task_ID(p_Menu_Master_ID, p_Menu_Detail_ID, p_Menu_Task_ID);
alert("MenuAction");
};
});