Copied to clipboard

Flag this post as spam?

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


  • Shiraj 47 posts 125 karma points
    Aug 12, 2013 @ 04:24
    Shiraj
    0

    Adding classes to xslt menu

    Hi,

    This is my XSLT top navigation menu

      <xsl:template match="/">

    <xsl:variable name="level" select="1"/>
    <xsl:variable name="dropDown" select="2"/>
       
       

    <!-- The fun starts here -->
    <ul id="menyn">
     

      <li >
           <xsl:attribute name="class">
             <xsl:if test="$currentPage/@level=$level">
              <xsl:text>current</xsl:text>
              </xsl:if>
         </xsl:attribute>
          <a href="/">    
             <xsl:value-of select="$currentPage/ancestor-or-self::*/@nodeName"/>
          </a> 
     </li>
     
      <xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level]/* [@isDoc and string(umbracoNaviHide) != '1'][not(self::RF-Slide)]"> 
      <li >
         <xsl:attribute name="class">
             <xsl:if test="$currentPage/@id=@id">
              <xsl:text>current</xsl:text>
              </xsl:if>
         </xsl:attribute>
       
       
        <a href="{umbraco.library:NiceUrl(@id)}"><xsl:value-of select="@nodeName"/></a>   
        <!-- Drop Down Menu -->
        <xsl:if test="count(./* [@isDoc and string(umbracoNaviHide) != '1']) &gt; 0">
           <ul>
             <xsl:for-each select="./* [@isDoc and string(umbracoNaviHide) != '1']">
                 <li>
                  
                    <xsl:attribute name="class">
                       <xsl:if test="$currentPage/descendant::* [@level=1]">                   
                        <xsl:text>current</xsl:text>
                      </xsl:if>
                    </xsl:attribute>
                  
                   <a href="{umbraco.library:NiceUrl(@id)}" ><xsl:value-of select="@nodeName"/></a></li>
             </xsl:for-each>
           </ul>
        </xsl:if>
        <!-- End of Drop Down Menu -->
       
      </li>
      </xsl:for-each>
     
    </ul>
    </xsl:template>
        <!-- Never output these -->
        <xsl:template match="*[umbracoNaviHide = 1]" />

    It generates a menu with drop down.I need to add a css clsss name to <li> tag.Currently it doesnt genrate a class.Here is the illustration whatI need

    <ul id="menyn">
      <li class="current">
        <a href="/" class="Need-A-Class-Name-Here>Home</a>
      </li>
      <li class="Need-A-Class-Name-Here">
        <a href="/page.aspx">about</a>
        <ul>

    Thanks

     

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Aug 12, 2013 @ 08:07
    Dennis Aaen
    0

    Hi Shiraj,

    Try this one. I have moved the attribute inside the if statement.

    <xsl:template match="/">

      <xsl:variable name="level" select="1"/>
      <xsl:variable name="dropDown" select="2"/>



      <!-- The fun starts here -->
      <ul id="menyn">


        <li>
            <xsl:if test="$currentPage/@level=$level">
              <xsl:attribute name="class">
              <xsl:text>current</xsl:text>
              </xsl:attribute>
            </xsl:if>
         
          <a href="/">
            <xsl:value-of select="$currentPage/ancestor-or-self::*/@nodeName"/>
          </a>
        </li>

        <xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level]/* [@isDoc and string(umbracoNaviHide) != '1'][not(self::RF-Slide)]">
          <li>
            <xsl:if test="$currentPage/@id=@id">
              <xsl:attribute name="class">
                <xsl:text>current</xsl:text>
              </xsl:attribute>
              </xsl:if>
           


            <a href="{umbraco.library:NiceUrl(@id)}">
              <xsl:value-of select="@nodeName"/>
            </a>
            <!-- Drop Down Menu -->
            <xsl:if test="count(./* [@isDoc and string(umbracoNaviHide) != '1']) &gt; 0">
              <ul>
                <xsl:for-each select="./* [@isDoc and string(umbracoNaviHide) != '1']">
                  <li>
                    <xsl:if test="$currentPage/descendant::* [@level=1]">
                    <xsl:attribute name="class">
                   
                        <xsl:text>current</xsl:text>
                     
                    </xsl:attribute>
                    </xsl:if>

                    <a href="{umbraco.library:NiceUrl(@id)}" >
                      <xsl:value-of select="@nodeName"/>
                    </a>
                  </li>
                </xsl:for-each>
              </ul>
            </xsl:if>
            <!-- End of Drop Down Menu -->

          </li>
        </xsl:for-each>

    /Dennis

  • Shiraj 47 posts 125 karma points
    Aug 12, 2013 @ 11:05
    Shiraj
    0

    Hi Dennis,

    Thanks for the answer but its not adding the class.It looks like this now.It doenst have class names for li and a

    <ul id="menyn"><li class="current"><a href="/">Home</a></li><li><a href="/about.aspx">About</a><ul><li><a href="">Personale</a></li>
  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Aug 12, 2013 @ 11:13
    Dennis Aaen
    0

    Hi,

    Ok so what you want is this:

    <ulid="menyn"><liclass="current"><aclass="current" href="/">Home</a></li><li><ahref="/about.aspx">About</a><ul><li><ahref="">Personale</a></li></ul>

    Right or is it all the a tags that has to have a class?

    Looking forward to hear from you

    /Dennis

  • Shiraj 47 posts 125 karma points
    Aug 12, 2013 @ 11:27
    Shiraj
    0

    Thanks Dennis you are allwyas helping me :)

    I actually need to implement this menu

    http://cssmenumaker.com/menu/opera-drop-down-menu

    and ul list like this

    <ul>
       <li><a href='#'><span>Home</span></a></li>
       <li class='has-sub '><a href='#'><span>Products</span></a>
          <ul>
             <li class='has-sub '><a href='#'><span>Product 1</span></a>
                <ul>
                   <li><a href='#'><span>Sub Product</span></a></li>
                   <li><a href='#'><span>Sub Product</span></a></li>
                </ul>
             </li>
             <li class='has-sub '><a href='#'><span>Product 2</span></a>
                <ul>
                   <li><a href='#'><span>Sub Product</span></a></li>
                   <li><a href='#'><span>Sub Product</span></a></li>
                </ul>
             </li>
          </ul>
       </li>
       <li><a href='#'><span>About</span></a></li>
       <li><a href='#'><span>Contact</span></a></li>
    </ul>

    So I need to know how can I add class to li like this <li class='has-sub '>

    and in any case if I need to add a class for a tag (optional)

    Thanks

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Aug 12, 2013 @ 11:49
    Dennis Aaen
    100

    From the top of my mind I think this should do it for you, but I havn´t tested it

    <xsl:template match="/">

      <xsl:variable name="level" select="1"/>
      <xsl:variable name="dropDown" select="2"/>

      <!-- The fun starts here -->
      <ul id="menyn">

        <li>
          <a href="/">
            <xsl:value-of select="$currentPage/ancestor-or-self::*/@nodeName"/>
          </a>
        </li>

        <xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level]/* [@isDoc and string(umbracoNaviHide) != '1'][not(self::RF-Slide)]">
          <li>
            <xsl:if test="count(./* [@isDoc and string(umbracoNaviHide) != '1']) &gt; 0">
              <xsl:attribute name="class">
                has-sub
              </xsl:attribute>
            </xsl:if>

            <a href="{umbraco.library:NiceUrl(@id)}">
              <xsl:value-of select="@nodeName"/>
            </a>
            <!-- Drop Down Menu -->
            <xsl:if test="count(./* [@isDoc and string(umbracoNaviHide) != '1']) &gt; 0">
              <ul>
                <xsl:for-each select="./* [@isDoc and string(umbracoNaviHide) != '1']">
                  <li>
                    <a href="{umbraco.library:NiceUrl(@id)}" >
                      <xsl:value-of select="@nodeName"/>
                    </a>
                  </li>
                </xsl:for-each>
              </ul>
            </xsl:if>
            <!-- End of Drop Down Menu -->

          </li>
        </xsl:for-each>

    /Dennis

  • Shiraj 47 posts 125 karma points
    Aug 12, 2013 @ 12:06
    Shiraj
    0

    Thansk Dennis,

    Here how shows now.How can we remove this " &#xD;&#xA;"

    <ul id="menyn"><li><a href="/">Homea>li><li class="&#xD;&#xA; has-sub&#xD;&#xA; "><a href="/about.aspx">Abouta><ul>
  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Aug 12, 2013 @ 12:13
    Dennis Aaen
    0

    Okay is it correct that about page has subpages?

    Try to make the attribute like this in one line. then the &#xD;&#xA; should go away from your markup

    <xsl:iftest="count(./* [@isDoc and string(umbracoNaviHide) != '1']) &gt; 0"><xsl:attributename="class">has-sub</xsl:attribute></xsl:if>

    /Dennis

  • Shiraj 47 posts 125 karma points
    Aug 12, 2013 @ 17:56
    Shiraj
    0

    Hi Dennis,

    Sorry for the late reply but its working :)

    Thanks again

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    Aug 12, 2013 @ 18:20
    Dennis Aaen
    0

    Okay glad that I could help.

    I think you should mark this as solved, so others with the same or similar issue can see what's work for you.

    /Dennis

  • Shiraj 47 posts 125 karma points
    Aug 12, 2013 @ 18:41
    Shiraj
    0

    Done :)

Please Sign in or register to post replies

Write your reply to:

Draft