Reuse components to customize your site

Horizontal navigation

This component is meant to be used in a custom header or footer to achieve horizontal listings of links. Media queries have already been created to adjust the margins, padding, and width of this component for different screen sizes.

When grouping a set of related links together, it is recommended to use a list (<ul> or <ol>) element inside a <nav> element to maintain semantic HTML. Semantic HTML means to create HTML that reinforces the meaning of the content in a page rather than how it looks.

// A responsive horizontal navigation
<nav class="elm-nav my-custom-class">
    <div class="elm-nav-container">
        <ol>
            <li><a href="#">Link one</a></li>
            <li><a href="#">Link two</a></li>
            <li><a href="#">Link three</a></li>
            <li><a href="#">Link four</a></li>
        </ol>
    </div>
</nav>

Be sure to add an additional class name into the .elm-nav container so you can add custom styling to your navigation from the control panel.

Drop-down menus

One of the most common features of a custom header is to add navigation links that contain drop-downs menus. CXone Expert Responsive has this functionality built in if you use the proper HTML.

1. Link one
2. Link two
3. Link three

The scripting behind this functionality is already in the product. You only need to add the following <a> and <ol> to get your drop-down functioning.

<a class="mt-dropdown-link" href="#" title="Drop-down link">Drop-down link</a>
<ol class="mt-dropdown">
    <li>
        <a href="#" title="Link one">Link one</a>
    </li>
    <li>
        <a href="#" title="Link two">Link two</a>
    </li>
    <li>
        <a href="#" title="Link three">Link three</a>
    </li>
</ol>

Container styles

Creating a specific container style is as simple as adding a class name to a <div>. Combining these styles with the container classes used for padding and margin and you've got an instant container.

// Highlight color container
<div class="mt-container-highlight">
    <a href="#">A link</a> and some text.
</div>

// Medium grey container
<div class="mt-container-primary">
    <a href="#">A link</a> and some text.
</div>

// Light grey container
<div class="mt-container-secondary">
    <a href="#">A link</a> and some text.
</div>

// Dark grey container
<div class="mt-container-tertiary">
    <a href="#">A link</a> and some text.
</div>

Containers with padding

Padding for containers is based on the font size of your site. This is measured in em's to be truly responsive. The padding will change when your font size does. So if your default font is 16px, then your padding for .mt-container-double will be 32px.

You will notice that the .mt-container-primary class is being used so you can see the container.

<div class="mt-container-primary mt-container-padding-half">
    This container only has half a character width of padding.
</div>

<div class="mt-container-primary mt-container-padding-one"> 
    This container has one full character width of padding. 
</div>

<div class="mt-container-primary mt-container-padding-one-half"> 
    This container has a one and a half character width of padding. 
</div>

<div class="mt-container-primary mt-container-padding-double"> 
    This container has twice a character width of padding. 
</div>

Containers with margins

Using margin container styles works the same as using padding container styles except for one minor difference. The margin will only apply to the top and bottom of the container.

Like the previous padding examples, these containers also have .mt-container-primary added to them so you can see the containers. 

<div class="mt-container-primary mt-container-margin-half"> 
    A half character width of margin above and below this container.
</div>

<div class="mt-container-primary mt-container-margin-one">
    A one character width of margin above and below this container.
</div>
<div class="mt-container-primary mt-container-margin-one-half">
    A one and a half character width of margin above and below this container.
</div>

<div class="mt-container-primary mt-container-margin-double">
    A double character width of margin above and below this container.
</div>