Menu directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
Created: 28 August 2015
Usually menus appear horizontally, with their submenus shown below their root menus. IntegralUI Menu directive for AngularJS comes with built-in feature that allows you to create a vertical menu where submenus appear on left or right side depending on whether left-to-right or right-to-left (RTL) layout is applied.
Similar: Menu Component for Angular 2
As above demo shows, we have several root menu items with icons and a line separator between each item. This menu is created by simply setting the data structure and changing the displayMode to 'vertical'.
angular
.module("appModule", ["integralui"])
.controller("appCtrl", function($scope){
// The name of the Side Menu used as unique identifier
$scope.menuName = "menuSample";
// For menu items without specified icon we will use a default one
$scope.defaultIcon = 'icons-medium empty';
// By default RTL in Menu is disabled
$scope.rtl = false;
// A tree structure that represents the content of our Side Menu
$scope.data = [
{
id: 1,
text: "Books",
icon: "icons-medium library",
items: [
{ id: 11, pid: 1, text: "Art" },
{
id: 12,
pid: 1,
text: "Business",
icon: "icons-medium people",
items: [
{ id: 121, pid: 12, text: "Economics" },
{
id: 122,
pid: 12,
text: "Investing",
icon: "icons-medium economics",
items: [
{ id: 1221, pid: 122, text: "Bonds" },
{ id: 1222, pid: 122, text: "Options" },
{ id: 1223, pid: 122, text: "Stocks" }
]
},
{ id: 123, pid: 12, text: "Management" },
{ id: 124, pid: 12, text: "Small Business" }
]
},
{ id: 13, pid: 1, text: "Health", icon: "icons-medium heart" },
{ id: 14, pid: 1, text: "Literature" },
{
id: 15,
pid: 1,
text: "Science",
items: [
{ id: 151, pid: 15, text: "Astronomy" },
{ id: 152, pid: 15, text: "Mathematics" },
{ id: 153, pid: 15, text: "Evolution" },
{ id: 154, pid: 15, text: "Nature" }
]
}
]
},
{ id: 2, text: "Computers" },
{
id: 3,
text: "Electronics",
items: [
{ id: 31, pid: 3, text: "Camera", icon: "icons-medium camera" },
{ id: 32, pid: 3, text: "Cell Phones" },
{ id: 33, pid: 3, text: "Video Game Consoles" }
]
},
{
id: 4,
text: "Music",
icon: "icons-medium album",
items: [
{ id: 41, pid: 4, text: "Blues" },
{ id: 42, pid: 4, text: "Classic Rock" },
{ id: 43, pid: 4, text: "Pop" },
{ id: 44, pid: 4, text: "Jazz" }
]
},
{
id: 5,
text: "Software",
icon: "icons-medium software",
items: [
{ id: 51, pid: 5, text: "Games" },
{ id: 52, pid: 5, text: "Operating Systems" },
{ id: 53, pid: 5, text: "Network & Servers" },
{ id: 54, pid: 5, text: "Security" }
]
},
{
id: 6,
text: "Sports",
icon: "icons-medium sports",
items: [
{ id: 61, pid: 6, text: "Baseball" },
{ id: 62, pid: 6, text: "Martial Arts" },
{ id: 63, pid: 6, text: "Running" },
{
id: 64,
pid: 6,
text: "Tennis",
items: [
{ id: 641, pid: 64, text: "Accessories" },
{ id: 642, pid: 64, text: "Balls" },
{ id: 643, pid: 64, text: "Racquets" }
]
}
]
},
{ id: 7, text: "Video Games" },
{ id: 8, text: "Watches", icon: "icons-medium clock-full" }
];
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.css" />
<link rel="stylesheet" href="css/integralui.menu.css" />
<link rel="stylesheet" href="css/themes/theme-flat-blue.css" />
<script type="text/javascript" src="external/angular.min.js"></script>
<script type="text/javascript" src="js/angular.integralui.min.js"></script>
<script type="text/javascript" src="js/angular.integralui.menu.min.js"></script>
</head>
<body>
<div ng-app="appModule" ng-controller="appCtrl">
<iui-menu name="{{menuName}}" items="data" item-icon="defaultIcon" display-mode="vertical" open-on-hover="true" rtl="rtl"></iui-menu>
</div>
</body>
</html>
/* Icons Settings */
.icons-medium
{
background-image: url(../resources/icons-x24.png);
background-repeat: no-repeat;
display: inline-block;
overflow: hidden;
padding: 0 !important;
margin: 0;
width: 24px;
height: 24px;
vertical-align: middle;
}
.library
{
background-position: 0 -72px;
}
.economics
{
background-position: -24px -72px;
}
.software
{
background-position: -48px -72px;
}
.sports
{
background-position: -96px -72px;
}
.people
{
background-position: -120px -72px;
}
.heart
{
background-position: -168px -72px;
}
.album
{
background-position: -144px -48px;
}
.camera
{
background-position: -168px -48px;
}
.clock-full
{
background-position: -192px -96px;
}
/* Vertical Menu Directive Settings */
.iui-menu-block
{
padding: 5px;
cursor: pointer;
width: 200px;
}
.iui-menu-item-root-vertical
{
border-bottom: thin solid #6080aa;
margin: 0;
padding: 6px 3px;
}
.iui-menu-item-root-vertical:last-child
{
border-bottom: thin solid transparent;
}
.iui-menu-item-root-hovered
{
border: thin solid transparent;
border-bottom: thin solid #6080aa;
border-radius: 0;
}
.iui-menu-item-root-content, .iui-menu-item-content
{
margin: 0 7px;
}
.iui-menu-item
{
width: 200px;
}
Each menu item can have a submenu, created in your app code or loaded on demand from a JSON file. By default, submenus appear with click on parent menu, and/or hovering over other child menus.
Appearance, layout and size of all menus are handled by customizable CSS styles that are changeable in your app settings. For example, each vertical menu has its width set to 200px and has only bottom border set, except for the last root menu item. Furthermore, we are using a blue theme, showing different color when menu is in normal or hovered state.
By modifying the attributes of these CSS classes, you can create a different menu that better suites your application requirements. For example, by increasing the space between menu items or using larger icons.
By default RTL is disabled, and in order to activate it, the rtl property value needs to be set to true. In order to activate RTL layout, we need to use the rtl attribute of the Menu directive (HTML marked in bold):
// Vertical Menu with RTL layout
$scope.rtl = true;
<iui-menu name="{{menuName}}" items="data" rtl="rtl"></iui-menu>
The complete sample code used in this demo is also included in IntegralUI Studio for Web product package.