Copied to clipboard

Flag this post as spam?

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


  • Matthew Jarvis 129 posts 129 karma points
    Oct 13, 2011 @ 19:35
    Matthew Jarvis
    0

    Menu navigation help

    I currently have the following menu on my website

    This is my XSLT for the above

     

     <xsl:template match="*">

    <xsl:if test="umbraco.library:HasAccess(@id, @path) = true()">
          <li>
            <a title="{nodeName}">
              <xsl:attribute name="href">
                      <xsl:value-of select="umbraco.library:NiceUrl(@id)" />
              </xsl:attribute>
              <xsl:attribute name="class">level<xsl:value-of select="@level" />
                <xsl:if test="position() = 1"><xsl:text> first</xsl:text></xsl:if>
                <xsl:if test="position() = last()"><xsl:text> </xsl:text>last</xsl:if>
                <xsl:if test="$currentPage/ancestor::*/@id = current()/@id"><xsl:text> </xsl:text>expanded</xsl:if>
                <xsl:if test="@id = $currentPage/@id"><xsl:text> </xsl:text>current</xsl:if>
                <xsl:if test="count(./*[string(umbracoNaviHide) != '1']) &gt; 0"><xsl:text> </xsl:text>parent</xsl:if>
                </xsl:attribute>
             
                 -<xsl:value-of select="umbraco.library:Item(@id, 'pageName')"/> <xsl:if test="count(./*[@isDoc]) &gt; 0"> </xsl:if>
               
            </a>
            <xsl:if test="count(./*[string(umbracoNaviHide) != '1']) &gt; 0">
              <xsl:if test="$currentPage/ancestor-or-self::*/@id = current()/@id">
                <ul>
                  <xsl:apply-templates select="./*[@isDoc and string(umbracoNaviHide) != '1']" />
                </ul>
              </xsl:if>
            </xsl:if>
      </li>
      </xsl:if>
      </xsl:template>

             
       The web designer however I had to design templates for me, designed the below which I hope to implement

    Which was made possible through the following HTML

    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">The College</a></li>
    <li class="current"><a href="#">Courses</a>
    <ul>
                <li class="current"><a href="#">- Work based learning</a></li>
                <li ><a href="#">- Course X</a></li>
                <li ><a href="#">- Course Y</a></li>
    </ul>
    </li>
    <li><a href="#">Community Learning</a></li>
    <li><a href="#">Student Life</a></li>
    <li><a href="#">News & Events</a></li>
    <li><a href="#">Centre Training</a></li>
    </ul>    

     

    What I'm really struggling to implement is where I should put the element

    <li class="current">

    in my XSLT

    Any guidance would be much appreciated

     

     

     

     

  • Fuji Kusaka 2203 posts 4220 karma points
    Oct 13, 2011 @ 19:42
    Fuji Kusaka
    0

    Hey Matthew, you could do something like

    <li>
    <xsl:attribute name="class">                    
           <xsl:if test="$currentPage/ancestor-or-self::*[@isDoc]/@id = current()/@id">
                   <xsl:text>current</xsl:text>
              </xsl:if>
            </xsl:attribute>

           
    <atitle="{nodeName}">
              <xsl:attributename="href">
                      <xsl:value-ofselect="umbraco.library:NiceUrl(@id)"/>
              </xsl:attribute>
              <xsl:attributename="class">level<xsl:value-ofselect="@level"/>
                <xsl:iftest="position() = 1"><xsl:text>first</xsl:text></xsl:if>
                <xsl:iftest="position() = last()"><xsl:text></xsl:text>last</xsl:if>
                <xsl:iftest="$currentPage/ancestor::*/@id = current()/@id"><xsl:text></xsl:text>expanded</xsl:if>
                <xsl:iftest="@id = $currentPage/@id"><xsl:text></xsl:text>current</xsl:if>
                <xsl:iftest="count(./*[string(umbracoNaviHide) != '1']) &gt; 0"><xsl:text></xsl:text>parent</xsl:if>
                </xsl:attribute>
             
                 -<xsl:value-ofselect="umbraco.library:Item(@id, 'pageName')"/><xsl:iftest="count(./*[@isDoc]) &gt; 0"></xsl:if>
               
            </a>
            <xsl:iftest="count(./*[string(umbracoNaviHide) != '1']) &gt; 0">
              <xsl:iftest="$currentPage/ancestor-or-self::*/@id = current()/@id">
                <ul>
                  <xsl:apply-templatesselect="./*[@isDoc and string(umbracoNaviHide) != '1']"/>
                </ul>
              </xsl:if>
            </xsl:if>
      </li>

     

    hope this helps

     

  • Rodion Novoselov 694 posts 859 karma points
    Oct 13, 2011 @ 19:56
    Rodion Novoselov
    0

    Since (http://www.w3.org/TR/xpath/#booleans)

    "If both objects to be compared are node-sets, then the comparison will be true if 
    and only if there is a node in the first node-set and a node in the second node-set
    such that the result of performing the comparison on the string-values of the two
    nodes is true." 

    the following snipped should work:

    <xsl:if test="descendant-or-self::*/@id = $currentPage/@id">
       <xsl:text>current</xsl:text>
    </xsl:test>

     

  • Matthew Jarvis 129 posts 129 karma points
    Oct 13, 2011 @ 20:26
    Matthew Jarvis
    0

    Great help thanks both, Fuji your code generates this

    This is almost exactly achieving the example I posted above from the designer apart from Test 2  is also appearing indented when it should be inline with Test.

    One other thing I would like is to have a '-' appear before the start of any sub nodes, where should this go?

    Rodion - have included your code, thanks

  • Fuji Kusaka 2203 posts 4220 karma points
    Oct 13, 2011 @ 20:32
    Fuji Kusaka
    0

     Good if you got it working, Looks like you already added " - " in your previous post..

     

    <a title="{nodeName}">
              <xsl:attributename="href">
                      <xsl:value-ofselect="umbraco.library:NiceUrl(@id)"/>
              </xsl:attribute>
              <xsl:attributename="class">level<xsl:value-ofselect="@level"/>
                <xsl:iftest="position() = 1"><xsl:text>first</xsl:text></xsl:if>
                <xsl:iftest="position() = last()"><xsl:text></xsl:text>last</xsl:if>
                <xsl:iftest="$currentPage/ancestor::*/@id = current()/@id"><xsl:text></xsl:text>expanded</xsl:if>
                <xsl:iftest="@id = $currentPage/@id"><xsl:text></xsl:text>current</xsl:if>
                <xsl:iftest="count(./*[string(umbracoNaviHide) != '1']) &gt; 0"><xsl:text></xsl:text>parent</xsl:if>
                </xsl:attribute>
             
                 - <xsl:value-ofselect="umbraco.library:Item(@id, 'pageName')"/><xsl:iftest="count(./*[@isDoc]) &gt; 0"></xsl:if>
               
            </a>
  • Matthew Jarvis 129 posts 129 karma points
    Oct 13, 2011 @ 20:38
    Matthew Jarvis
    0

    Unfortunately the "-" at the moment are appearing on every node instead of just any sub nodes (as it was in my original XSLT)  Also if you could advise on the Test 2 indention inline with Test on the post above that would be great

  • Fuji Kusaka 2203 posts 4220 karma points
    Oct 13, 2011 @ 20:51
    Fuji Kusaka
    0

     Can you try changing your XLST to something like this?

    I havent tested it but it should get you working. You are getting the " - " since you are calling the same template on top

    <xsl:attributename="class">                    
           <xsl:iftest="$currentPage/ancestor-or-self::*[@isDoc]/@id = current()/@id">
                   <xsl:text>current</xsl:text>
              </xsl:if>
            </xsl:attribute>

           
    <atitle="{nodeName}">
              <xsl:attributename="href">
                      <xsl:value-ofselect="umbraco.library:NiceUrl(@id)"/>
              </xsl:attribute>
              <xsl:attributename="class">level<xsl:value-ofselect="@level"/>
                <xsl:iftest="position() = 1"><xsl:text>first</xsl:text></xsl:if>
                <xsl:iftest="position() = last()"><xsl:text></xsl:text>last</xsl:if>
                <xsl:iftest="$currentPage/ancestor::*/@id = current()/@id"><xsl:text></xsl:text>expanded</xsl:if>
                <xsl:iftest="@id = $currentPage/@id"><xsl:text></xsl:text>current</xsl:if>
                <xsl:iftest="count(./*[string(umbracoNaviHide) != '1']) &gt; 0"><xsl:text></xsl:text>parent</xsl:if>
                </xsl:attribute>
             
                <xsl:value-of select="@nodeName"/>
               
            </a>

          <xsl:if test="*[@isDoc][not(umbracoNaviHide = 1)]">
                  <ul>
                     <li>
                       <xsl:for-each select="./* [@isDoc  and string(testHide) != '1']">                           
                           -
    <a href="{umbraco.library:NiceUrl(@id)}" ><xsl:value-of select="@nodeName"/></a>                   
                      </xsl:for-each>    
                    </li>
                  </ul>
                  
                </xsl:if>

         



  • Rodion Novoselov 694 posts 859 karma points
    Oct 13, 2011 @ 21:11
    Rodion Novoselov
    0

    I suppose you can add <xsl:if ... for your '-' based on level:

    <xsl:if test="@level = 2">
    <xsl:text>-</xsl:text>
    </xsl:if>

    However, probably it would be a purer solution to decorate menu items with '-' by CSS, especially taking that your already assing 'levelN' classes to them. 

  • Matthew Jarvis 129 posts 129 karma points
    Oct 13, 2011 @ 21:13
    Matthew Jarvis
    0

    Latest update using your code

     

    In an upshot the "-" are only appearing now on sub nodes but some how the NavHide values are not getting picked up, its seems close!

  • Fuji Kusaka 2203 posts 4220 karma points
    Oct 13, 2011 @ 21:23
    Fuji Kusaka
    0

     Matthew my mistake change this

    <xsl:for-eachselect="./* [@isDoc  and string(testHide) != '1']">                           
           -
    <ahref="{umbraco.library:NiceUrl(@id)}"><xsl:value-ofselect="@nodeName"/></a>                    
     </xsl:for-each>
     

    to this

     

     <xsl:for-eachselect="./* [@isDoc  and string(umbracoNaviHide) != '1']">                           
               -
    <ahref="{umbraco.library:NiceUrl(@id)}"><xsl:value-ofselect="@nodeName"/></a>                    
       </xsl:for-each> 
  • Matthew Jarvis 129 posts 129 karma points
    Oct 13, 2011 @ 21:33
    Matthew Jarvis
    0

    Unfortunately that hasnt made a difference

    my current XSLT is:-

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

    <xsl:template match="/">
      <xsl:apply-templates select="$currentPage/ancestor-or-self::* [@isDoc and @level=$level]/* [@isDoc and string(umbracoNaviHide) != '1']"/>
    </xsl:template>
        
          <xsl:template match="*">

    <xsl:if test="umbraco.library:HasAccess(@id, @path) = true()">
          <li>
    <xsl:attribute name="class">                    
          <xsl:if test="descendant-or-self::*/@id = $currentPage/@id">
       <xsl:text>current</xsl:text>
    </xsl:if>
            </xsl:attribute>
            <a title="{nodeName}">
              <xsl:attribute name="href">
                      <xsl:value-of select="umbraco.library:NiceUrl(@id)"/>
              </xsl:attribute>
              <xsl:attribute name="class">level<xsl:value-of select="@level"/>
                <xsl:if test="position() = 1"><xsl:text>first</xsl:text></xsl:if>
                <xsl:if test="position() = last()"><xsl:text></xsl:text>last</xsl:if>
                <xsl:if test="$currentPage/ancestor::*/@id = current()/@id"><xsl:text></xsl:text>expanded</xsl:if>
                <xsl:if test="@id = $currentPage/@id"><xsl:text></xsl:text>current</xsl:if>
                <xsl:if test="count(./*[string(umbracoNaviHide) != '1']) &gt; 0"><xsl:text></xsl:text>parent</xsl:if>
                </xsl:attribute>
              
                <xsl:value-of select="@nodeName"/>
                
            </a>

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

         
      </li>
      </xsl:if>
      </xsl:template>

    </xsl:stylesheet>

     

    The current navigation can be viewed at http://web3.ystrad-mynach.ac.uk/the-college

    I'm sure it is really close,

     

     


  • Fuji Kusaka 2203 posts 4220 karma points
    Oct 13, 2011 @ 21:40
    Fuji Kusaka
    0

     matthew from the link you posted  - Test - Test 2 should be underneath - Test instead of having both on the same line right?

     

    <xsl:iftest="*[@isDoc][not(umbracoNaviHide = 1)]">
                  <ul>
                   
                        <xsl:for-eachselect="./* [@isDoc  and string(umbracoNaviHide) != '1']">                          
                <li>- <ahref="{umbraco.library:NiceUrl(@id)}"><xsl:value-ofselect="@nodeName"/></a></li>                   
        </xsl:for-each>                 
                  </ul>             
    </xsl:if>

     

  • Matthew Jarvis 129 posts 129 karma points
    Oct 13, 2011 @ 21:42
    Matthew Jarvis
    0

    Just updated with the code above and voila..... the '-' is now appearing correctly although...... UmbracoNaviHide is still not kicking in correctly

    Plus all subnodes from underneath other nodes are now appearing http://web3.ystrad-mynach.ac.uk/the-college/test/

  • Fuji Kusaka 2203 posts 4220 karma points
    Oct 13, 2011 @ 21:48
    Fuji Kusaka
    0

    Am not sure why this not not firing the UmbracoNaviHide here. Instead of

    *[@isDoc][not(umbracoNaviHide = 1)]

    change it to

    [@isDoc  and string(umbracoNaviHide) != '1']
  • Matthew Jarvis 129 posts 129 karma points
    Oct 13, 2011 @ 21:52
    Matthew Jarvis
    0

    Big apologies, i've just realised why, some of the nodes are of document tpyes that havent got NaviHide set up yet.  Just ran a test by hiding a page where it is set up and it works fine.  Clocking off for the night now.

    Will try tomorrow again by setting NaviHide on the other document types and hopefully I will report good news.

    Massive thank you for your efforts, much appreciated

  • Fuji Kusaka 2203 posts 4220 karma points
    Oct 13, 2011 @ 22:02
    Fuji Kusaka
    0

    No worries....

  • Matthew Jarvis 129 posts 129 karma points
    Oct 14, 2011 @ 11:25
    Matthew Jarvis
    0

    Fuji, after working again on the navigation this morning and enabling NaviHide on the pages that should be hidden, the navigation still wasnt achiving what I hoped it would with all sub menu's (that had naviHide as false) still appearing.

    I've since made amends to how the navigation will work, I have a top menu bar anyway, with this one being a side navigation i've changed the level to '2' as users will use the top navigation bar for main navigation with this one simply displaying the nodes contained underneath the top level.

    This is a screen shot of what I now currently have

    With my XSLT as:-

     

    <xsl:stylesheet
      version="1.0"
      xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
      xmlns:msxml="urn:schemas-microsoft-com:xslt"
      xmlns:umbraco.library="urn:umbraco.library" xmlns:Exslt.ExsltCommon="urn:Exslt.ExsltCommon" xmlns:Exslt.ExsltDatesAndTimes="urn:Exslt.ExsltDatesAndTimes" xmlns:Exslt.ExsltMath="urn:Exslt.ExsltMath" xmlns:Exslt.ExsltRegularExpressions="urn:Exslt.ExsltRegularExpressions" xmlns:Exslt.ExsltStrings="urn:Exslt.ExsltStrings" xmlns:Exslt.ExsltSets="urn:Exslt.ExsltSets"
      exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets">


    <xsl:output method="xml" omit-xml-declaration="yes" />

    <xsl:param name="currentPage"/>

    <!-- Input the documenttype you want here -->
    <!-- Typically '1' for topnavigtaion and '2' for 2nd level -->
    <!-- Use div elements around this macro combined with css -->
    <!-- for styling the navigation -->
    <xsl:variable name="level" select="2"/>

    <xsl:template match="/">
      <xsl:apply-templates select="$currentPage/ancestor-or-self::* [@isDoc and @level=$level]/* [@isDoc and string(umbracoNaviHide) != '1']"/>
    </xsl:template>
        
          <xsl:template match="*">

    <xsl:if test="umbraco.library:HasAccess(@id, @path) = true()">
          <li>
            
            <xsl:attribute name="class">                    
           <xsl:if test="$currentPage/ancestor-or-self::*[@isDoc]/@id = current()/@id">
                   <xsl:text>current</xsl:text>
              </xsl:if>
            </xsl:attribute>

            
            
            <a title="{nodeName}">
              <xsl:attribute name="href">
                      <xsl:value-of select="umbraco.library:NiceUrl(@id)" />
              </xsl:attribute>
              <xsl:attribute name="class">level<xsl:value-of select="@level" />
                <xsl:if test="position() = 1"><xsl:text> first</xsl:text></xsl:if>
                <xsl:if test="position() = last()"><xsl:text> </xsl:text>last</xsl:if>
                <xsl:if test="$currentPage/ancestor::*/@id = current()/@id"><xsl:text> </xsl:text>expanded</xsl:if>
                <xsl:if test="@id = $currentPage/@id"><xsl:text> </xsl:text>current</xsl:if>
                <xsl:if test="count(./*[string(umbracoNaviHide) != '1']) &gt; 0"><xsl:text> </xsl:text>parent</xsl:if>
                </xsl:attribute>
             
                 <xsl:value-of select="umbraco.library:Item(@id, 'pageName')"/> <xsl:if test="count(./*[@isDoc]) &gt; 0"> </xsl:if>
               
            </a>
            <xsl:if test="count(./*[string(umbracoNaviHide) != '1']) &gt; 0">
              <xsl:if test="$currentPage/ancestor-or-self::*/@id = current()/@id">
                <ul>
                  <xsl:apply-templates select="./*[@isDoc and string(umbracoNaviHide) != '1']" />
                </ul>
              </xsl:if>
            </xsl:if>
          </li>
      </xsl:if>
      </xsl:template>

    </xsl:stylesheet>

     

    On my image above, i am currently on the 'Underneath about page' the styling on this item and its parent is correct. 

    However what is incorrect is that the links found 'Underneath about page' -Success,Facilties,Virtual Tour should be positioned in the same place as where the About link is as (the far left) as Success,Facilties,Virtual Tour pages are a level up from the 'Underneath about page'.

    Hoping this is easy to solve, thanks for your massive help so far

  • Fuji Kusaka 2203 posts 4220 karma points
    Oct 14, 2011 @ 16:39
    Fuji Kusaka
    0

    Hey Matthew,

    Sorry for late reply, have you been able solved the navigation?..

  • Matthew Jarvis 129 posts 129 karma points
    Oct 18, 2011 @ 12:15
    Matthew Jarvis
    0

    Hi Fuji, no still havent found a solution.  As you can see in my last post, all I require is for the indent to be correct for same level nodes etc.  If you could help me out that would be great

Please Sign in or register to post replies

Write your reply to:

Draft