Announcement

Collapse
No announcement yet.

Adding image to the navigation fly-out on DiVino Ready Theme

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Adding image to the navigation fly-out on DiVino Ready Theme

    My fly-out looks sparse if I don't add images. How would I adjust the code to insert an image below the navigation item/link. Could there be a conditional for if the link was for a category, to use the category tree image? Do I have to worry how this would affect mobile-viewing? Mobile doesn't seem to use the fly-out.

    I'm looking to do this on both parent and child navigation links. The DiVino documentation shows how to do this on the parent only. Above or below the links would be a small image that represents the category.


    Code:
    <mvt:if expr="l.settings:navigation_version EQ 'mobile'">
        <ul id="js-navigation-set" class="navigation-set horizontal-drop-down">
            <mvt:foreach iterator="navigationitem" array="readytheme:navigationitems">
                <li class="level-1">
                    <mvt:if expr="NOT ISNULL l.settings:navigationitem:items">
                        <span class="parent">&mvt:navigationitem:link;</span>
                        <ul>
                            <mvt:foreach iterator="navigationitem_level2" array="navigationitem:items">
                                <li class="level-2">
                                    <mvt:if expr="NOT ISNULL l.settings:navigationitem_level2:items">
                                        <span class="parent">&mvt:navigationitem_level2:link;</span>
                                        <ul>
                                            <mvt:foreach iterator="navigationitem_level3" array="navigationitem_level2:items">
                                                <li class="level-3"><span>&mvt:navigationitem_level3:link;</span></li>
                                            </mvt:foreach>
                                        </ul>
                                        <span data-name="&mvt:navigationitem_level2:name;" data-rt-icon="d" class="next"></span>
                                    <mvt:else>
                                        <span>&mvt:navigationitem_level2:link;</span>
                                    </mvt:if>
                                </li>
                            </mvt:foreach>
                        </ul>
                        <span data-name="&mvt:navigationitem:name;" data-rt-icon="d" class="next"></span>
                    <mvt:else>
                        <span>&mvt:navigationitem:link;</span>
                    </mvt:if>
                </li>
            </mvt:foreach>
            <mvt:item name="readytheme" param="navigationset( 'navigation_main' )" />
        </ul>
        <mvt:assign name="l.settings:navigation_version" value="0" />
    <mvt:exit />
    </mvt:if>
    <div class="row" id="js-all-categories-nav">
        <div class="column one-fourth nav-group-2">
            <mvt:foreach iterator="navigationitem" array="readytheme:navigationitems">
                <mvt:assign name="l.settings:navigationitem:link_href" value="gettoken( l.settings:navigationitem:link, asciichar(34), 2 )" />
                <a href="&mvte:navigationitem:link_href;" target="&mvt:navigationitem:link_targ;" class="nav-item-2" data-navigationitem-id="&mvte:navigationitem:id;" data-link-type="&mvt:navigationitem:link_targ;">&mvt:navigationitem:name;</a>
            </mvt:foreach>
        </div>
        <div class="column three-fourths nav-group-3">
            <mvt:foreach iterator="navigationitem" array="readytheme:navigationitems">
                <mvt:if expr="NOT ISNULL l.settings:navigationitem:items">
                    <div class="nav-item-3 nav-group-4" data-navigationitem-id="&mvte:navigationitem:id;">
                        <div class="column three-fourths nav-item-4 nav-item-4--left">
                            <mvt:foreach iterator="navigationitem_level2" array="navigationitem:items">
                                <div class="nav-group-5">
                                    <h4 class="nav-heading-5">
                                        <mvt:assign name="l.settings:navigationitem_level2:link_href" value="gettoken( l.settings:navigationitem_level2:link, asciichar(34), 2 )" />
                                        <a href="&mvte:navigationitem_level2:link_href;" target="&mvt:navigationitem_level2:link_targ;" class="nav-item-5" data-link-type="&mvt:navigationitem_level2:link_targ;">&mvt:navigationitem_level2:name;</a>
                                    </h4>
                                    <mvt:if expr="NOT ISNULL l.settings:navigationitem_level2:items">
                                        <mvt:foreach iterator="navigationitem_level3" array="navigationitem_level2:items">
                                            <mvt:assign name="l.settings:navigationitem_level3:link_href" value="gettoken( l.settings:navigationitem_level3:link, asciichar(34), 2 )" />
                                            <a href="&mvte:navigationitem_level3:link_href;" target="&mvt:navigationitem_level3:link_targ;" class="nav-item-5" data-link-type="&mvt:navigationitem_level3:link_targ;">&mvt:navigationitem_level3:name;</a>
                                        </mvt:foreach>
                                    </mvt:if>
                                </div>
                            </mvt:foreach>
                        </div>
                        <mvt:if expr="l.settings:navigationitem:link_type EQ 'C'">
                            <mvt:item name="customfields" param="Read_Category_Code(l.settings:navigationitem:link_dest, 'category_menu_image', l.settings:navigationitem:cf:category_menu_image)" />
                            <mvt:if expr="l.settings:navigationitem:cf:category_menu_image">
                                <div class="column one-fourth nav-item-4 nav-item-4--right">
                                    <a href="&mvte:navigationitem:link_href;"><img src="&mvt:navigationitem:cf:category_menu_image;" alt="&mvte:navigationitem:name;"></a>
                                </div>
                            </mvt:if>
                        </mvt:if>
                    </div>
                </mvt:if>
            </mvt:foreach>
        </div>
    </div>
    Last edited by gomblue; 05-20-16, 12:27 AM. Reason: clarify for both parent and child navigation links
    DiVino Theme

  • Bruce is going to try to help with this.
    DiVino Theme

    Comment

    Working...
    X

    This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

    This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

    Accept