Request a topic or
contact an Arke consultant
404-812-3123
All posts tagged 'navigation'

Arke Systems Blog

Useful technical and business information straight from Arke.

About the author

Author Name is someone.
E-mail me Send mail

Recent comments

Archive

Authors

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2017

Sitecore: A Simple Single Level Menu with Rounded Edges

After taking some time to figure this out, I thought I’d share my approach to a simple single level menu rendering with rounded edges. Initially, the idea here is very straight forward – create a list, style it, voila! Unfortunately, Round edges and dynamic content make it a little less forgiving.

Here is an Example of what we are trying to achieve:

menubar

Each of these items would be a sub item in the site, all at the same level  under ‘/Sitecore/Content/Site’

In our XSLT  rendering we need to grab the list, and apply the appropriate styles to the appropriate items, notably: The first item needs to have a round corner on the left, the Last item needs to have a round corner on the right, and the inner items need to have borders around them all – and we need to be able to Hover for a different effect.

To do this I did the following:

<xsl:template match="*" mode="main">
  <ul id="MainNav">
    <xsl:for-each select="$SiteContent/item[sc:fld('InTopNav',.) = '1']">
      <xsl:variable name="EdgeClass">
        <xsl:if test="position()='1'">FirstItem</xsl:if>
        <xsl:if test="position() = last()">LastItem</xsl:if>
      </xsl:variable>
      <xsl:if test="position() = last()">
        <li class="preLastItem">
          <span>.</span>
        </li>
      </xsl:if>
      <li class="{$EdgeClass}" >
        <span>
          <sc:link >
            <sc:text field="Nav Title" />
          </sc:link>
        </span>
      </li>
    </xsl:for-each>
  </ul>
</xsl:template>

The above runs through every item which has InTopNav checked in that level (if you had /SiteCore/Content/Site/Home and then all the items under Home, it would be a bit different)

In terms of what happens when this runs:

1. First item is read and link displayed -- given the “FirstItem” class.

2. 2nd item is read -- link is displayed with No class assigned.

N. Last item is read: $EdgeClass is now “LastItem”, list item with a period is displayed followed by the list item for the last link -- given the “LastItem” class.

All that is left is styling the menu: I created extra wide images for the left rounded edge, right rounded edge and the general middle links so that they could overlap and slide around depending on the length of the text and set them as the background images for the links (ie: #Menu li.FirstItem a).


Categories: Sitecore
Posted by Amy Winburn on Tuesday, May 11, 2010 11:09 AM
Permalink | Comments (0) | Post RSSRSS comment feed