Integration without Atlas
The first thing you need to do to integrate the Global Navigation Menu is to load the library by adding the following to your page header:
<script src="http://assets.ctl.io/dt-GlobalNavigationMenu/1.0.2/dt-GlobalNavigationMenu.js"></script>
Integrating Services Menu
To display the Services menu all you have to do is call the following javascript method:
insertServicesMenuAt( CONTAINER_ID, CURRENT_SERVICE_CODE, SERVICES_LIST );
With the parameters being:
| Parameter | value |
|---|---|
CONTAINER_ID |
Id of the container where we want to display the list of service links.
"services-menu"
|
CURRENT_SERVICE_CODE
|
Code of the service that is currently active. You can find the supported services here
'CAM'
|
SERVICES_LIST |
Array of Service codes that we want to be visible on the menu. You can find the supported services here
['CAM', 'MH', 'MS', 'CLC', 'DCC']
|
Integrating Sites Menu
To display the Sites menu all you have to do is call the following javascript method:
insertSitesMenuAt( CONTAINER_ID, CURRENT_SITE_CODE, SITES_LIST );
With the parameters being:
| Parameter | value |
|---|---|
CONTAINER_ID |
Id of the container where we want to display the list of site links.
"sites-menu"
|
CURRENT_SITE_CODE
|
Code of the site that is currently active. You can find the supported sites here
'MAN'
|
SITES_LIST |
Array of Site codes that we want to be visible on the menu. You can find the supported sites here
['MAN', 'OPT', 'MON', 'CAP', 'IMG']
|
Example
The code above is the very minimum requirement to get the menu working on your project. However, most of the time you will want to have a clickable menu item for the user to be able to show/hide the links menu. It is entirely up to you how to implement this, but we have added a complete example as a reference.
Step 1 - Adding the container for the link list
We add a container where we want the list of links to appear (we will add one for the Services menu and one for the Sites menu, but you might want to share the same container on your project):
<!-- For Services Menu -->
<div id="services-menu-container" class="hidden">
<div id="services-menu"></div>
</div>
<div id="services-menu-fade" class="hidden"></div>
<!-- For Sites Menu -->
<div id="sites-menu-container" class="hidden">
<div id="sites-menu"></div>
</div>
<div id="sites-menu-fade" class="hidden"></div>
Step 2 - Adding an option on our navigation menu for the user to show/hide the list of links
This is how our menu option looks like:
<!-- Services Menu Option -->
<div id="navbar-services">
<a id="navbar-services-menu" class="navbar-services-menu" href="javascript:void(0);" onclick="toggleMenu()">
<span id="navbar-services-menu__title" class="navbar-services-menu__title no-service">Service</span>
<div id="navbar-services-menu__detail" class="navbar-services-menu__detail no-service">
<span id="navbar-services-menu__current_service" class="navbar-services-menu__current_service"></span>
<svg class="navbar-services-menu__select-icon cyclops-icon"><use xlink:href='#icon-caret-down'></svg>
</div>
</a>
</div>
<!-- Sites Menu Option -->
<div id="navbar-sites">
<a id="navbar-sites-menu" class="navbar-sites-menu" href="javascript:void(0);" onclick="toggleSitesMenu()">
<span id="navbar-sites-menu__title" class="navbar-sites-menu__title no-site">Site</span>
<div id="navbar-sites-menu__detail" class="navbar-sites-menu__detail no-site">
<span id="navbar-sites-menu__current_site" class="navbar-sites-menu__current_site"></span>
<svg class="navbar-sites-menu__select-icon cyclops-icon"><use xlink:href='#icon-caret-down'></svg>
</div>
</a>
</div>
Step 3 - Triggering the show/hide of the list of links
On the code above, note the call to toggleMenu() when the user clicks on navbar-services-menu,
this will trigger showing and hiding the Global Navigation Menu.
Our implementation of toggleMenu() has some code to add a little animation and handles showing and hiding different elements when the user triggers the click action.
var currentServiceName = '';
var currentService;
var servicesList = ['CAM', 'MH', 'MS', 'CLC', 'DCC'];
toggleMenu = function() {
var servicesMenuContainer, servicesMenuFade, servicesMenuItem;
servicesMenuContainer = document.getElementById('services-menu-container');
servicesMenuFade = document.getElementById('services-menu-fade');
servicesMenuItem = document.getElementById('navbar-services-menu');
servicesMenuContainer.classList.toggle('hidden');
servicesMenuFade.classList.toggle('hidden');
servicesMenuItem.classList.toggle('open');
if (!servicesMenuContainer.classList.contains('hidden')) {
insertServicesMenuAt('services-menu', this.currentService, this.servicesList);
servicesMenuFade.style.height = '100%';
}
};
setServicesList = function(displayList) {
return this.servicesList = displayList;
};
setCurrentService = function(service) {
var navbarServicesMenuCurrentService;
this.currentService = service;
servicesMenuTitle = document.getElementById('navbar-services-menu__title');
servicesMenuDetail = document.getElementById('navbar-services-menu__detail');
if (this.currentService === '') {
servicesMenuTitle.classList.add('no-service');
servicesMenuDetail.classList.add('no-service');
} else {
servicesMenuTitle.classList.remove('no-service');
servicesMenuDetail.classList.remove('no-service');
}
this.currentServiceName = (function() {
switch (false) {
case service !== 'CAM':
return 'Cloud Application Manager';
case service !== 'MH':
return 'Managed Hosting';
case service !== 'MS':
return 'Managed Security';
case service !== 'CLC':
return 'Public Cloud';
case service !== 'DCC':
return 'Private Cloud';
case service !== '':
return 'Services';
}
})();
navbarServicesMenuCurrentService = document.getElementById('navbar-services-menu__current_service');
navbarServicesMenuCurrentService.textContent = this.currentServiceName;
};
if (!this.currentService) {
setCurrentService('');
}
window.setCurrentService = setCurrentService;
window.setServicesList = setServicesList;
Step 4 - Style accordingly
We use the following less file to style the menu option:
#services-menu-container {
position: relative;
&.hidden {
display: none;
}
#services-menu {
position: absolute;
z-index: 1000;
width: 100%;
top: 1px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
}
}
#services-menu-fade {
opacity:0.5;
background-color:black;
position:fixed;
width:100%;
height:100%;
top:0px;
left:0px;
z-index:900;
&.hidden {
display: none;
}
}
#navbar-services {
display: flex;
flex-grow: 1;
.navbar-services-menu {
font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
display: flex;
flex-direction: column;
height: 45px;
text-decoration: none;
border-radius: 5px;
padding: 3px 8px 8px 8px;
margin-top: 3px;
&.open {
background: #EEEEEE;
box-shadow: 0 2px 2px #DCDCDC inset;
.navbar-services-menu__select-icon {
transform: rotate(180deg);
}
}
&__title {
font-size: 11px;
color: #9B9B9B;
&.no-service {
display: none;
}
}
&__detail {
width: max-content;
display: flex;
align-items: center;
justify-content: space-between;
&.no-service {
height: 100%;
padding-top: 3px;
}
}
&__select-icon {
transition: all linear 150ms;
}
&__current_service {
color: #333;
font-size: 16px;
font-weight: 500;
-webkit-font-smoothing: antialiased;
}
}
}