Advanced User Interface Controls and Components
Created: 15 March 2016
In order to create dark colored Context Menu in AngularJS, we need to change the settings for built-in CSS classes. The IntegralUI Context Menu directive comes with predefined CSS classes that determine the appearance and layout of most parts of the menu: header, items, separators, markers etc. You can customize the context menu by simply overriding these styles.
Similar: ContextMenu Component for Angular 2
In above demo, we have a context menu that uses dark colors for its header, menu items and separators. Even the expand marker for sub menus is changed so that it matches with the dark colored menu.
At first, we will change the general context menu CSS styles. We have two CSS classes:
In our example, we only need to change the background color of the context menu from white to darker color and make it appear flat without borders.
angular
.module("appModule", ["integralui"])
.controller("appCtrl", function($scope){
// ContextMenu data source
$scope.data = [
{ id: 1, text: "Context Menu", type: "header" },
{
id: 2,
text: "New",
icon: "icons-medium new-document",
items: [
{ id: 21, pid: 1, text: "Project", icon: "icons-medium solution" },
{ id: 22, pid: 1, text: "Window" }
]
},
{ id: 3, text: "Open" },
{ id: 4, text: "Save As...", icon: "icons-medium save" },
{ id: 5, text: "Save All" },
{ id: 6, type: "separator" },
{
id: 7,
text: "Social",
icon: "icons-medium people",
items: [
{ id: 71, pid: 1, text: "Facebook", icon: "icons-medium facebook" },
{ id: 72, pid: 1, text: "Google Plus", icon: "icons-medium google-plus" },
{ id: 73, pid: 1, text: "Twitter", icon: "icons-medium twitter" }
]
},
{ id: 8, text: "Favorites" },
{ id: 9, type: "separator" },
{ id: 10, text: "Page Setup" },
{ id: 11, text: "Print" },
];
// Settings for ContextMenu
$scope.menuOptions = {
itemIcon: 'icons-medium empty',
items: $scope.data
}
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/integralui.contextmenu.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.contextmenu.min.js"></script>
</head>
<body>
<div ng-app="appModule" ng-controller="appCtrl">
<div class="block" iui-contextmenu="menuOptions">
<span>Right click to open the context menu</span>
</div>
</div>
</body>
</html>
/* Context Menu */
.iui-contextmenu
{
background-color: #252525;
}
.iui-contextmenu-block
{
background-color: #252525;
border: 0;
border-radius: 0;
padding: 0;
}
Note To see the default settings for all CSS styles for the Context Menu directive, check out the intergalui.contextmenu.css style sheet located in /css subfolder.
There are three types of menu items:
The header and separator have a different CSS class:
/* Context Menu Header */
.iui-contextmenu-item-header
{
background: black;
border: 0;
border-radius: 0;
padding: 10px 7px;
text-align: center;
}
/* Context Menu Separator */
.iui-contextmenu-item-separator
{
background-color: #363636;
}
In similar way, the menu items appearance is governed by few CSS styles for each state of the item: normal, hovered and selected.
In our case, we will use different colors for root menu items and submenus. The root menu will appear in darker color and when hovered, the background color will change to black, and the submenu will have a lighter color and when hovered, the text color will change to blue.
/* Context Menu Items and SubItems */
.iui-contextmenu-item
{
background-color: transparent;
border-color: transparent;
border-radius: 0;
padding: 5px 10px 5px 7px;
color: #d5d5d5;
width: 150px;
}
.iui-contextmenu-item-selected
{
background-color: black !important;
border-color: black !important;
color: white;
}
/* Context SubMenu */
.iui-contextmenu-item > ul
{
background-color: #484848;
border-color: #323232;
border-radius: 0;
padding: 0;
}
.iui-contextmenu-item > ul .iui-contextmenu-item-selected
{
background-color: transparent !important;
border-color: transparent !important;
color: #0080cd;
}
Because we have a dark colored menu, some of the icons for menu items need to be light colored. For this purpose, we are using icons in white color that are perfectly fit for this example.
/* Context Menu Icons */
.icons-medium
{
background-image: url(../resources/icons-x24-white.png);
background-repeat: no-repeat;
display: inline-block;
overflow: hidden;
padding: 0 !important;
margin: 0 7px 0 0;
width: 24px;
height: 24px;
vertical-align: middle;
}
.solution
{
background-position: 0 -24px;
}
.new-document
{
background-position: 0 -96px;
}
.save
{
background-position: -72px -96px;
}
.people
{
background-position: -120px -72px;
}
{
background-position: -216px 0;
}
{
background-position: -216px -24px;
}
.google-plus
{
background-position: -216px -48px;
}
Note These icons are part of the icons-x24-white.png.
Finally, menu items that have submenus when closed, display an expand marker on their right side. When menu item opens and the submenu is shown, this expand marker is hidden and replaced by a marker attach to the submenu block.
By default this expand marker is small for this example, we will double its size and make it to look like it is merged with the submenu window.
/* Context Menu Expand Marker */
.iui-contextmenu-marker-expand-right::before
{
border: 6px solid #484848;
border-color: transparent transparent transparent #484848;
top: 30%;
}
.iui-contextmenu-marker-left::before
{
border: 8px solid #484848;
border-color: transparent #323232 transparent transparent;
top: 11px;
left: -17px;
}
.iui-contextmenu-marker-left::after
{
border: 8px solid #484848;
border-color: transparent #484848 transparent transparent;
top: 12px;
left: -16px;
}
Also, the position of expand marker and the submenu is changed so that submenu is positioned right beside the root menu. Expand marker appears as it is positioned on the right side of the menu item.
IntegralUI Context Menu directive for AngularJS comes with CSS style sheet that contains many CSS classes that determine the appearance and layout of each part of the context menu: block, header, item, separators, markers etc. By modifying these CSS styles, we can create a dark colored context menu. This can be very useful in your applications where you need to show dark menus.