Copied to clipboard

Flag this post as spam?

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


This forum is in read only mode, you can no longer reply
  • Stephen Davidson 216 posts 392 karma points
    Jun 17, 2012 @ 13:57
    Stephen Davidson
    0

    Specify a unique class for each menu item

    Is there a way i can write a top navigation XSLT so that each li that is created gets a unique ID like the following..

    <ul>

                        <li class="link1"><a href="#">Home page</a></li>

                        <li class="link2" ><a href="#">Services</a></li>

                        <li class="link3" ><a href="#">Insulation Grants</a></li>

                        <li class="link4" ><a href="#">Solar PV</a></li>

                        <li class="link5" ><a href="#">The Green deal</a></li>

                        <li class="link6" ><a href="#">Book Appointment</a></li>

                        <li class="link7" ><a href="#">About us</a></li>

     

                    </ul>

  • Dan Okkels Brendstrup 101 posts 197 karma points
    Jun 17, 2012 @ 14:40
    Dan Okkels Brendstrup
    2

    Yes, quite easily. If you simply want to append an integer, as in your example, you can do it with the position() function. Say you want to link to all nodes of the doctype 'Page' that are not hidden:

    <ul> 
    <xsl:apply-templates select="Page[not(umbracoNaviHide = 1)]"/>
    </ul>

    <xsl:template match="Page">
    <li class="link{position()}">
    <a href="{umbraco.library:NiceUrl(@id)}">
    <xsl:value-of select="@nodeName"/>
    </a>
    </li>
    </xsl:template>
  • Stephen Davidson 216 posts 392 karma points
    Jun 17, 2012 @ 15:29
    Stephen Davidson
    0

    Thanks Dan, i had got this wokring using losts of if's but of course your method makes much more sense now!

    S

  • Laurence Gillian 600 posts 1219 karma points
    Jun 17, 2012 @ 20:45
    Laurence Gillian
    0

    It's worth noting using a position might be a bad idea in the real world, as if someone sorts the nodes the position will update accordingly.

    What's the markup/desired result? Maybe we can do something super nice (:

    @Dan - H5UR - links in forum posts! no very many people do this, but it's really helpful (: 

  • Stephen Davidson 216 posts 392 karma points
    Jun 17, 2012 @ 21:41
    Stephen Davidson
    0

    Thanks Uniquelau, here is another link in a forum post!

    http://dev.esiscotland.co.uk/

    I take you point but it does not matter in this instance...as long as the colours remain the same it works for me. I tested sorting the nodes in a different and it still goes from Green to red in the correct way.

    S

  • Dan Okkels Brendstrup 101 posts 197 karma points
    Jun 17, 2012 @ 21:49
    Dan Okkels Brendstrup
    0

    @Laurence: Thanks! Just a link to MDN for now, but pretty soon we'll have Umbraco4Docs up and running as the perfect resource to link to for things like that :)

    And good point about position()-based classnames being fragile — and rather devoid of semantic meaning. In many cases, @urlName would be more semantic (albeit still fragile, if someone renames the node):

    <xsl:template match="/">
      <ul>
        <xsl:apply-templates select="$currentPage/ancestor-or-self::Frontpage/*[@isDoc and not(umbracoNaviHide = 1)]"/>
      </ul>
    </xsl:template>
    <xsl:template match="*[@isDoc]">
      <li class="{@urlName}">
        <a href="{umbraco.library:NiceUrl(@id)}">
          <xsl:value-of select="@nodeName"/>
        </a>
      </li>
    </xsl:template>
    Although yeah, when the classnames are for rainbow-coloring as in Stephen's case, position() is the best solution.
  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jun 17, 2012 @ 22:04
    Jan Skovgaard
    0

    With the @nodeName approach I guess that the most ideal approach would be to use an RegEx extension to ensure that potential special characters, space etc. is removed as well, right?

    Edit: It's ideal to use @urlName, since that special chars etc. are already handled.

    /Jan

  • Jan Skovgaard 11280 posts 23678 karma points MVP 11x admin c-trib
    Jun 17, 2012 @ 22:08
    Jan Skovgaard
    0

    Baaah, strike that...all that stuff is already handled by the settings in umbracoSettings.config in the /config folder. #h5is.

    /Jan

  • Dan Okkels Brendstrup 101 posts 197 karma points
    Jun 17, 2012 @ 22:26
    Dan Okkels Brendstrup
    0

    @Jan: Heh, #h5youdonotsuckyoujusttypefasterthanyouthink :)

    But yes, since @urlName is an URLified version of @nodeName, it is perfect for id and class attributes in the HTML output. Especially in HTML5, which has lifted the earlier restrictions on the id attribute.

  • Laurence Gillian 600 posts 1219 karma points
    Jun 20, 2012 @ 18:42
    Laurence Gillian
    0

    Maybe the ideal semantically correct solution would be to create a variable...

    <xsl:variable name="colours" select="green,blue,pink,red" />

    And then select the correct colour using position() mod totalCount

    I'll have a think, and post something back (: Lau

Please Sign in or register to post replies

Write your reply to:

Draft