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.0/dt-GlobalNavigationMenu.js"></script>
    

Once the library has been included, all you have to do is call the following javascript method:

    
        insertServicesMenuAt( CONTAINER_ID, CURRENT_SERVICE_CODE, SERVICES_LIST );
    

With the parameters being:

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

Example

Step 1 - Adding the container for the link list

We add a container where we want the list of links to appear:

    
        <div id="services-menu-container" class="hidden">
            <div id="services-menu"></div>
        </div>
        <div id="services-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:

    
        <div id="navbar-services">
            <a id="navbar-services-menu" class="navbar-services-menu" href="javascript:void(0);" onclick="toggleMenu()">
                <span class="navbar-services-menu__title">Service</span>
                <div class="navbar-services-menu__detail">
                <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>
    

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.

    
        this.currentService = 'DCC';
        this.servicesList = ['CAM', 'MH', 'MS', 'CLC', 'DCC'];
        
        this.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%';
            }
        };
    

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

                &__detail {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }

                &__select-icon {
                    align-self: flex-end;
                    transition: all linear 150ms;
                }
                
                &__current_service {
                    color: #333;
                    font-size: 13px;
                    font-weight: 600;
                    -webkit-font-smoothing: antialiased;
                }
            }
        }