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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies