Skip to content

Navigation Sets#

Theme Component

Description#

Navigation Sets allow you to create custom navigation structures to control different parts of your Miva Merchant store. Currently Miva has a built in category tree, and a navigation bar. With Navigation Sets, you can define your own navigational structures to be used anywhere. Examples include footer navigation, custom content page navigation or even replacing the built in navbar and category tree.

Each Navigation Set has its own Template to control the layout. By default it will output a nested ul/li structure to allow for easy styling. Included in ready themes is a built in stylesheet with 4 layouts. Each layout provides different styles for the type of navigation menu you would like to use. The stylesheet automatically gets added to the store under CSS list when readythemes is activated.

/* ----  These are the styles required to make the various navigation elements display and function correctly. ---- */
.navigation-set,
.navigation-set *,
.navigation-set *:before,
.navigation-set *:after {
    /* Apply a natural box layout model to all "navigation-set" elements */
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.navigation-set {
    margin: 0 auto;
    padding: 0;
    text-align: left;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.navigation-set li {
    display: inline-block;
    font-size: 16px;
    height: 2em;
    line-height: 2;
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    text-align: left;
    white-space: nowrap;
}
.navigation-set li a {
    color: #005596;
    display: block;
    padding: 0 16px;
    text-decoration: none;
}
.navigation-set li:hover > a {
    background: #666;
    color: #7fdbff;
}

/* ------------------------ first sub-level ------------------------ */
.navigation-set li ul {
    display: none;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    min-width: 100%;
    padding: 0;
    position: absolute;
    left: 0;
    z-index: 999;
}
.navigation-set li:hover ul {
    background: #ccc;
    display: block;
}
.navigation-set li ul li {
    display: block;
    position: relative;
}

/* ------------------------ second and subsequent sub-levels ------------------------ */
.navigation-set li:hover ul ul {
    display: none;
}
.navigation-set li ul li ul {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
}
.navigation-set li ul li:hover > ul {
    display: block;
}

/* ------------------------ horizontal-mega-menu ------------------------ */
.navigation-set.horizontal-mega-menu li ul li {
    display: inline-block;
    height: auto;
    vertical-align: top;
}
.navigation-set.horizontal-mega-menu li ul li ul {
    display: block;
    position: relative;
    top: auto;
    left: auto;
}
.navigation-set.horizontal-mega-menu li ul li ul li {
    display: block;
}

/* ------------------------ vertical-fly-out ------------------------ */
.vertical-fly-out li {
    display: block;
}
.vertical-fly-out li ul {
    top: 0;
    left: 100%;
}

/* ------------------------ single-navigation-column ------------------------ */
.single-navigation-column {
    display: inline-block;
    padding-right: 32px;
    vertical-align: top;
}
.single-navigation-column li {
    display: block;
    font-size: 14px;
    height: auto;
    line-height: 1.75;
}
.single-navigation-column .single-navigation-title {
    font-size: 16px;
    font-weight: 700;
    height: 2em;
    line-height: 2;
    margin-bottom: 4px;
    text-transform: uppercase;
}
.single-navigation-column li a {
    padding: 0;
}
.single-navigation-column li:hover > a {
    background: transparent;
    color: #7fdbff;
}

The goal of these built in menu styles for the theme developer to use as a starting point and customize for their specific theme.

Below is an example of a navigational set structure that can be created within the admin. It supports up to 3 levels deep (parent plus two sub cats) A nav item can be just text or contain a link to a product, page, category or custom external page.

Here is the HTML code output by the navigation set item:

<div class="navigation-element test-nav">
    <ul class="navigation-set horizontal-drop-down">
        <li class="level-1">
            Home
            <ul>
                <li class="level-2">
                    sub-cat1
                    <ul>
                        <li class="level-3">sub-cat2</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="level-1">About Us</li>
        <li class="level-1">Contact Us</li>
    </ul>
</div>

CSS Classes#

  • Each Navigation Set will be contained in a div with a class of “navigation-element” plus a class of the code of the navigation set
  • The first ul will have a class of “navigation-set” plus a class of the layout chosen in the admin. The four layout classes are: horizontal-drop-down, horizontal-mega-menu, vertical-fly-out or single-navigation-column
  • The li for each level will have a class of “level-X” where X is the 1, 2, or 3 depending on the level of the navigation item

Default Navigation Set Template#

<div class="navigation-element &mvte:readytheme:code;">
<mvt:if expr="NOT ISNULL l.settings:readytheme:navigationitems">
<ul class="navigation-set &mvte:readytheme:layout;">
<mvt:foreach iterator="navigationitem" array="readytheme:navigationitems">
    <li class="level-1">&mvt:navigationitem:link;
    <mvt:if expr="NOT ISNULL l.settings:navigationitem:items">
    <ul>
    <mvt:foreach iterator="navigationitem_level2" array="navigationitem:items">
        <li class="level-2">&mvt:navigationitem_level2:link;
        <mvt:if expr="NOT ISNULL l.settings:navigationitem_level2:items">
            <ul>
            <mvt:foreach iterator="navigationitem_level3" array="navigationitem_level2:items">
                <li class="level-3">&mvt:navigationitem_level3:link;</li>
            </mvt:foreach>
            </ul>
        </mvt:if>
        </li>
    </mvt:foreach>
    </ul>
    </mvt:if>
    </li>
</mvt:foreach>
</ul>
</mvt:if>
</div>