LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular 4 and AngularJS UI Components


Menu / Vertical Orientation


This sample shows how to create vertical or side menu. By default Menu is arranged in horizontal layout, where root items appear in one line. By setting the displayMode property to 'vertical', the layout of the menu will change and will appear as vertical menu.

In this sample, the following property is used:

  • displayMode - specifies how menu items are displayed

<!DOCTYPE html>

<html>

<head>

<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" show-dropdown-icon="true"></iui-menu>

</div>

</body>

</html>

angular

.module("appModule", ["integralui"])

.controller("appCtrl", function($scope){

$scope.menuName = "menuSample";

$scope.defaultIcon = 'icons-medium empty';

 

$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" }

];

});

.iui-menu

{

width: 200px;

}

.icons-medium

{

background-image: url(../resources/icons-x24.png);

background-repeat: no-repeat;

display: inline-block;

margin: 0;

overflow: hidden;

padding: 0 !important;

width: 24px;

height: 24px;

vertical-align: middle;

}

.iui-menu-block

{

padding: 5px;

cursor: pointer;

}

.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;

}

.clock-full

{

background-position: -192px -96px;

}