Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • David Loosley 13 posts 33 karma points
    Feb 16, 2012 @ 09:20
    David Loosley
    0

    Unordered List Menus

    I’m a newbie to Umbraco and just gone through the CWS tutorial (very impressed so far) – So I decided to take one of our websites (what I thought would be a simple one) and set it up using Umbraco.

    The first problem I have encountered is the menu structure. It is a simple two level menu but some of the nodes are not linked to a page. For example in the sample HTML below “Expertise” and “Systems” are not linked.

    <ul id='mainMenu'>

        <li><a href='/index.aspx' title='Home'>Home</a></li>

        <li><a href='/proposition.aspx' title='Proposition'>Proposition</a></li>

        <li><a href="#">Expertise</a>

            <ul class="noJS">

            <li><a href="/treasury.aspx">Treasury and Liquidity</a></li>

            <li><a href="/risk.aspx">Risk Management</a></li>

            <li><a href="/rating.aspx">Rating Advisory</a></li>

            <li><a href="/operations.aspx">Operations</a></li>

            </ul>

        </li>

        <li><a href="/regulatorynetwork.aspx">Network</a></li>

        <li><a href="#">Systems</a>

            <ul class="noJS">

            <li><a href="/systems.aspx">System Implementation</a></li>

            <li><a href="/software.aspx">Software</a></li>

            </ul>

        </li>

        <li><a href="/support.aspx">Support</a></li>

        <li><a href='/contact_us.aspx' title='Contact us'>Contact us</a></li>

        <li><a href='/career.aspx' title='Career'>Career</a></li>

    </ul>

     

    The question is how can I reproduce this structure using macros in Umbraco?

    TIA

    David

  • Tom Fulton 2030 posts 4996 karma points c-trib
    Feb 16, 2012 @ 14:30
    Tom Fulton
    1

    Hi David,

    I suppose you need to decide how you want to determine if a node should be "linked" or not.  You could do this by checking for a certain document type (ie "Container"), a property on the document (ie checkbox "disableLink") or maybe just the fact that it has children?  Either way once you decide how to determine this, you can account for that easily in your XSLT.

    Quick example...

    <a href="#">
      <xsl:if test="not(disableLink = 1)"><xsl:attribute name="href"><xsl:value-of select="umbraco.library:NiceUrl(@id)"/></xsl:attribute></xsl:if>
      <xsl:value-of select="@nodeName"/>
    </a>

    Hope this helps,
    Tom

  • Chriztian Steinmeier 2750 posts 8456 karma points MVP 6x admin c-trib
    Feb 16, 2012 @ 14:54
    Chriztian Steinmeier
    1

    Hi David,

    Create a Macro called "Navigation" - just use the "Clean" template.

    Replace the XSLT generated with this and you're off to a good start:

    <?xml version="1.0" encoding="utf-8" ?>
    <xsl:stylesheet
        version="1.0"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
        xmlns:umb="urn:umbraco.library"
        exclude-result-prefixes="umb"
    >
    
        <xsl:output method="xml" indent="yes" omit-xml-declaration="yes" />
    
        <xsl:param name="currentPage" />
        <xsl:variable name="siteRoot" select="$currentPage/ancestor-or-self::*[@level = 1]" />
    
        <xsl:template match="/">
            <ul id="mainMenu">
                <li><a href="/" title="Home">Home</a></li>
                <xsl:apply-templates select="$siteRoot/*[@isDoc][not(umbracoNaviHide = 1)]" />
            </ul>
        </xsl:template>
    
        <xsl:template match="*[@isDoc]">
            <xsl:variable name="childNodes" select="*[@isDoc][not(umbracoNaviHide = 1)]" />
            <li>
                <a href="{umb:NiceUrl(@id)}" title="{@nodeName}">
                    <xsl:if test="$childNodes">
                        <xsl:attribute name="href">#</xsl:attribute><!-- Override href -->
                    </xsl:if>
                    <xsl:value-of select="@nodeName" />
                </a>
                <xsl:if test="$childNodes">
                    <ul class="noJS">
                        <xsl:apply-templates select="$childNodes" />
                    </ul>
                </xsl:if>
            </li>
        </xsl:template>
    
    </xsl:stylesheet>
    
    Let me know if you need me to explain some of it... 

    /Chriztian

  • Chriztian Steinmeier 2750 posts 8456 karma points MVP 6x admin c-trib
    Feb 16, 2012 @ 14:57
    Chriztian Steinmeier
    0

    Ooops - Tom, didn't see your reply before posting mine :)

    /Chriztian

  • Tom Fulton 2030 posts 4996 karma points c-trib
    Feb 16, 2012 @ 14:57
    Tom Fulton
    0

    Well I'm glad you did, yours is a bit more informative :)  Didn't have time to do that myself!

  • David Loosley 13 posts 33 karma points
    Feb 16, 2012 @ 15:11
    David Loosley
    0

    Thanks Tom - soon as I posted it I thought of creating a placeholder menu item using a specific document type.

     

    And thanks Chriztian - wasn't expecting someone to write the code - cheers :0)

Please Sign in or register to post replies

Write your reply to:

Draft