Copied to clipboard

Flag this post as spam?

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


  • Rachel Skuse 88 posts 118 karma points
    Feb 19, 2010 @ 12:25
    Rachel Skuse
    0

    Is it possible to specify a class for first and last navigation item?

    Hi,

    Essentially, my navigation looks like this...

          <ul id="mainNav">
            <li><a href="#" class="main" id="mainNavLeft">Home</a></li>
            <li><a href="#" class="main">Range Cooking</a>
                <ul>

                    <li><a href="#" >Example level 1 item 1 ></a>
                        <ul>
                            <li><a href="#">Example L2 item 1</a></li>
                            <li><a href="#">Example L2 item 2</a></li>
                            <li><a href="#">Example L2 item 3</a></li>
                            <li><a href="#">Example L2 item 4</a></li>

                            <li><a href="#">Example L2 item 5</a></li>
                            <li><a href="#">Example L2 item 6</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Example level 1 item 2</a></li>
                    <li><a href="#">Example level 1 item 3</a></li>
                    <li><a href="#">Example level 1 item 4 ></a>

                        <ul>
                            <li><a href="#">Example L2 item 1</a></li>
                            <li><a href="#">Example L2 item 2</a></li>
                            <li><a href="#">Example L2 item 3</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Example level 1 item 5</a></li>

                    <li><a href="#">Example level 1 item 6</a></li>
                </ul>
            </li>
            <li><a href="#" class="main">Built-In Cookers</a></li>
            <li><a href="#" class="main">Refrigeration</a></li>
            <li><a href="#" class="main">Dishwashers</a></li>
            <li><a href="#" class="main">Sinks &amp; Taps</a></li>

            <li><a href="#" class="main">Cookware</a></li>
            <li><a href="#" class="main">Essential Living</a></li>
            <li><a href="#" class="main">About Us</a></li>
            <li><a href="#" class="main" id="mainNavRight">Contact Us</a></li>
          </ul>

     

    A background image is specified in the css and the first and last items differ (mainNavLeft and mainNavRight). Is it possible to specify these in the xslt file? I assume I can using an if statement but I'm not sure how to target the specic item?

    Thanks,

    Rachel

  • Dirk De Grave 4541 posts 6021 karma points MVP 3x admin c-trib
    Feb 19, 2010 @ 12:44
    Dirk De Grave
    2

    Rachel,

    you can use position() = 1 and position() = last() to get these items from a set of iterated nodes

    <xsl:for-each select="$currentPage/node">
    <xsl:if test="position() = 1">...</xsl:if>
    <xsl:if test="position() = last()">...</xls:if>
    </xsl:for-each>

    Hope this helps.

    Regards,

    /Dirk

  • Rachel Skuse 88 posts 118 karma points
    Feb 19, 2010 @ 15:14
    Rachel Skuse
    0

    Hi Dirk, thank you for your response.

    I am trying the following but it is not displaying anything on my page...

    <ul id="mainNav">
    <xsl:for-each select="$currentPage/node [string(data [@alias='umbracoNaviHide']) != '1']">
        <xsl:if test="position() = 1">
            <li><a href="{umbraco.library:NiceUrl(@id)}" class="main" id="mainNavLeft"><xsl:value-of select="@nodeName"/></a></li>
        </xsl:if>
        <li><a href="{umbraco.library:NiceUrl(@id)}" class="main"><xsl:value-of select="@nodeName"/></a></li>
        <xsl:if test="position() = last()">
                <li><a href="{umbraco.library:NiceUrl(@id)}" class="main" id="mainNavRight"><xsl:value-of select="@nodeName"/></a></li>
        </xsl:if>
    </xsl:for-each>
    </ul>

    Do I need to add an if statement to the list items that will be in the middle of the navigation?

    Thanks,

    Rachel

  • Kenneth Solberg 227 posts 418 karma points
    Feb 19, 2010 @ 15:30
    Kenneth Solberg
    102

    Try this:

    <ul id="mainNav">
    <xsl:for-each select="$currentPage/node [string(data [@alias='umbracoNaviHide']) != '1']">
    <li>
      <a href="{umbraco.library:NiceUrl(@id)}" class="main">
        <xsl:choose>
          <xsl:when test="position() = 1">
            <xsl:attribute name="id">
              <xsl:text>mainNavLeft</xsl:text>
            </xsl:attribute>
          </xsl:when>
          <xsl:when test="position() = last()">
            <xsl:attribute name="id">
              <xsl:text>mainNavRight</xsl:text>
            </xsl:attribute>
          </xsl:when>
        </xsl:choose>
        <xsl:value-of select="@nodeName" />
      </a>
    </li>
    </xsl:for-each>
    </ul>
  • Seth Niemuth 275 posts 397 karma points
    Feb 19, 2010 @ 15:31
    Seth Niemuth
    0

    Rachel,

    That code should be displaying things, the if statements shouldn't matter as to whether the middle list items get displayed.

    You need to do a choose rather than an if as with yours right now the first and last elements will have two li's in your current code (as that middle li will always appear even if you show extras for the first and last):

    <ul id="mainNav">
    <xsl:for-each select="$currentPage/node [string(data [@alias='umbracoNaviHide']) != '1']">
    <xsl:choose>
        <xsl:when test="position() = 1">
            <li><a href="{umbraco.library:NiceUrl(@id)}" class="main" id="mainNavLeft"><xsl:value-of select="@nodeName"/></a></li>
        </xsl:when>
    
        <xsl:when test="position() = last()">
                <li><a href="{umbraco.library:NiceUrl(@id)}" class="main" id="mainNavRight"><xsl:value-of select="@nodeName"/></a></li>
        </xsl:when>
    
    <xsl:otherwise>
       <li><a href="{umbraco.library:NiceUrl(@id)}" class="main"><xsl:value-of select="@nodeName"/></a></li>
    </xsl:otherwise>
    
    </xsl:choose>
    </xsl:for-each>
    </ul>

  • dandrayne 1138 posts 2262 karma points
    Feb 19, 2010 @ 15:31
    dandrayne
    0

    Hi Rachel

    Using the code above, your nav items will be written out twice on the first and last times, as it will write the middle list item as well as whatever is true for the if conditions.  Also, using $currentPage/node will only give output when the current page has children, so this would work e.g. for your homepage but not for any child pages.

    Something like the following might be better.  I've put only the id definitions into the if statements to avoid duplication

    <ul id="mainNav">
    <xsl:for-each select="$currentPage/ancestor-or-self::node[@nodeTypeAlias='Homepage']/node [string(data [@alias='umbracoNaviHide']) != '1']">#
    <li>
    <a href="{umbraco.library:NiceUrl(@id)}" class="main">
    <xsl:attribute name="id">
    <xsl:if test="position() = 1">
    <xsl:text>mainNavLeft</xsl:text>
    </xsl:if>
    <xsl:if test="position() = last()">
    <xsl:text>mainNavRight</xsl:text>
    </xsl:if>
    </xsl:attribute>
    <xsl:value-of select="@nodeName"/>
    </a>
    </li>
    </xsl:for-each>
    </ul>

    Dan

  • dandrayne 1138 posts 2262 karma points
    Feb 19, 2010 @ 15:32
    dandrayne
    0

    Wow, a smorgasbord of useful answers!

  • Dirk De Grave 4541 posts 6021 karma points MVP 3x admin c-trib
    Feb 19, 2010 @ 15:35
    Dirk De Grave
    1

    hmm, not displaying anything.. time for some extra checks...

    what if you just use

    <xsl:for-each select="$currentPage/node [string(data [@alias='umbracoNaviHide']) != '1']">
    <xsl:value-of select="@nodeName"/>
    </xsl:for-each>

    Does that display anything. If not, then your select in for loop doesn't generate results.

    On the other hand, maybe be better to swith to another construct

    <xsl:for-each select="$currentPage/node [string(data [@alias='umbracoNaviHide']) != '1']">
    <xsl:choose>
    <xsl:when test="position() = 1">...</xsl:when>
    <xsl:when test="position() = last()">...</xls:when>
    <xsl:otherwise>...</xls:otherwise>
    </xsl:choose>
    </xsl:for-each>

    (your construct currently will output first and last items twice)

    Cheers,

    /Dirk

  • Kenneth Solberg 227 posts 418 karma points
    Feb 19, 2010 @ 15:35
    Kenneth Solberg
    0

    Hehe, yeah - fast responses for sure! @dandrayne: that approach will leave an empty id attribute on all anchors except first and last.

  • Dirk De Grave 4541 posts 6021 karma points MVP 3x admin c-trib
    Feb 19, 2010 @ 15:36
    Dirk De Grave
    0

    Sure lots of useful and even better answers... wow, what a community...

  • Rachel Skuse 88 posts 118 karma points
    Feb 19, 2010 @ 16:34
    Rachel Skuse
    0

    Woo hoo - thanks guys! I've used the code Kenneth posted and it works perfectly.

    Now I just need to try and get my 2nd level navigation to work - I may be back....!!

    Cheers,

    Rachel

  • Stephen Davidson 216 posts 392 karma points
    Jun 17, 2012 @ 13:56
    Stephen Davidson
    0

    Great thread I'm trying to do something similar expect i want each item on my Nav li to get a unique class so the XLST output like this...or is there a way i can pick up the loop number?

    <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:49
    Dan Okkels Brendstrup
    0

    @Stephen: See my answer in the other thread — but yes, position() will give you the "loop number" for the active element.

  • Jan Skovgaard 11280 posts 23678 karma points MVP 10x admin c-trib
    Jun 17, 2012 @ 14:50
    Jan Skovgaard
    0

    Hi Stephen

    I believe there is already an answer for you in the post you created about the subject yourself here: http://our.umbraco.org/forum/developers/xslt/32594-Specify-a-unique-class-for-each-menu-item?p=0#comment119732 :)

    Please don't do double posting, since it can become quite confusing at a later stage. I understand that you appreciate a quick answer and fortunately most times people actually are quite quick at getting back to you - if not it's sometimes very efficient to write about your issue on twitter using the #umbraco hashtag.

    Cheers,

    Jan

  • Stephen Davidson 216 posts 392 karma points
    Jun 17, 2012 @ 15:31
    Stephen Davidson
    0

    Sorry Jan, just thought this was a relavent subject matter...knuckles rapped and acknowledged! :-)

    S

Please Sign in or register to post replies

Write your reply to:

Draft