LIDOR SYSTEMS

Advanced User Interface Controls and Components

Dark Colored Angular Context Menu

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.

Right click to open the context menu
ContextMenu directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

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.

Change General Context Menu CSS Styles

At first, we will change the general context menu CSS styles. We have two CSS classes:

  • iui-contextmenu - determines the appearance of the context menu in general
  • iui-contextmenu-block - determines the appearance main block of the context menu

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.

Custom Context Menu Header and Separator

There are three types of menu items:

  • header - inactive menu item that shows a label, used to divide menu items in groups
  • item - default menu item that can contain icon, label and custom content
  • separator - inactive menu item that sows only a horizontal line, used to create sections

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;

}

Change Context Menu Item Appearance

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;

}

Apply Custom Icons for Menu Items

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;

}

.facebook

{

background-position: -216px 0;

}

.twitter

{

background-position: -216px -24px;

}

.google-plus

{

background-position: -216px -48px;

}

Note These icons are part of the icons-x24-white.png.

Replace Expand Markers

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.

Conclusion

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.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.