Skip to main content

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

Comments

Popular posts from this blog

Using the Source Property

For each of the properties in your template you can set a source for it, this isn’t always used but can improve user experience drastically when done throughout a site. The source field comes in to play whenever you are using any of the following fields: Droplink, Droplist, Droptree, File, Grouped Droplink, Grouped Droplist, Image, Multilist, Treelist, Rich text field and a number of others. There are various ways of setting these up to achieve different results – but in general you are using the source to limit the set of items that can be used, and this requirement can also help you determine what kind of field to use. For example, if you have a Set of items all split down into sub folders and want the content editor to make use of the tree, you could use a TreeList or Drop Tree, but if you just want a set of items without the opportunity to see where those items are – multilists or droplinks are the way to go. For Images you’re generally just specifying where to look for and put t…

Links as Items Redux!

Previously I had posted on how to set up items in your content tree to act as external links to other pages (for use with Navigation mainly – for example if you have a blog elsewhere but still want it listed in the main navigation). However, Ivan Buzyka pointed out some issues with the simple implementation so I added creating a better redirect to my ‘to do’ list for the blog. The time has come! Let’s pretend we are modifying an existing site, we don’t want to change the navigation so that won’t be covered here – we just want to update our layout to work a little more universally. Our new items need to be able to link to an internal, external or Media item reliably for display in our navigation. Our template will consist of similar things to last time: Link: General Link Nav Title: Text -> standard values: $name In Navigation: Checkbox ->standard values: checked Create the template, add in standard values for it with the above settings and now we can create our Layout which sho…

Web Forms for Marketers: Send Email

To have the save action for your form actually send email, you will need to change one of the settings, otherwise you will receive this error whenever submitting the form: We experience a technical difficulty while processing your request. Your data may not have been correctly saved.Also in your log (/data/logs/newest log file) you will see this error after the form has been submitted:Exception: System.Net.WebException
Message: The remote name could not be resolved: 'example.host'
Source: System
at System.Net.ServicePoint.GetConnection(PooledStream PooledStream, Object owner, Boolean async, IPAddress& address, Socket& abortSocket, Socket& abortSocket6, Int32 timeout)
at System.Net.PooledStream.Activate(Object owningObject, Boolean async, Int32 timeout, GeneralAsyncDelegate asyncCallback)
at System.Net.PooledStream.Activate(Object owningObject, GeneralAsyncDelegate asyncCallback)
at System.Net.ConnectionPool.GetConnection(Object owningObject, GeneralAsyncDeleg…