Copied to clipboard

Flag this post as spam?

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


  • Andrei Yazik 24 posts 44 karma points
    Jan 25, 2011 @ 17:11
    Andrei Yazik
    0

    XSLT Collapsible and expandable submenu

    Hi everyone,

    I'm creating a submenu where I want the items that have subitems to be expandable, and the only item I want to be expanded that is currently selected or if one of it's subitems selected. The item becomes expanded when the <xsl:if test="$currentPage/@id = current()/@id"> becomes true.

    Actually my problem is in checking whether the current item belongs to

    the item that should be expanded. I tried to use

    current()/descendant-or-self::node[@id = $currentPage/@id]

    but that did not help.

    Could you help me please?

    Here is the full version of my XSLT code:

    <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp " "> ]>
    <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"/>
      <xsl:param name="level" select="1"/>
      <xsl:param name="strCSS" select="5"/>
      <xsl:variable name="stopLevel" select="/macro/maxDepth"/>
      <xsl:variable name="mystartNodeId" select="/macro/startNodeId"/>
      <xsl:variable name="cssClass" select="/macro/NavigationCSSClass"/>
      <xsl:variable name="cssID" select="/macro/NavigationCSSId"/>
        <xsl:variable name="boolImageLink" select="/macro/navImageLink"/>
       <xsl:variable name="IDSelectorPrefix" select="/macro/IDPrefix"/>
       <xsl:variable name="disableNav" select="/macro/disableNav"/>
      <xsl:variable name="ancestorNode" select = "$currentPage/ancestor-or-self::* [@isDoc and @level=2]"/>
       <xsl:template match="/"><xsl:call-template name="menu">
         <xsl:with-param name="level" select="$level"/>
         </xsl:call-template></xsl:template>
      <xsl:template name="menu">
       <xsl:param name="level"/>
      
       <xsl:if test="string($cssClass)">    
         <xsl:attribute name="class">      
           <xsl:value-of select="$cssClass"/> level_{$level}      
           <xsl:if test="$disableNav = 1"> disabled</xsl:if>    
         </xsl:attribute>  </xsl:if>  
      <xsl:if test="$cssID!= ''">
       <xsl:attribute name="id"> <xsl:value-of select="$cssID"/>
       </xsl:attribute></xsl:if>
      <div>
      <xsl:if test="count($ancestorNode/* [@isDoc and string(umbracoNaviHide) != '1']) &gt; '0'">
         <xsl:for-each select="$ancestorNode/* [@isDoc and string(umbracoNaviHide) != '1']">
           <div style="padding-left:{$strCSS}px">
             <xsl:attribute name="class">menuItem
               <xsl:if test="$currentPage/@id = current()/@id"> selected</xsl:if>
               <xsl:if test="count(current()/* [@isDoc and string(umbracoNaviHide) != '1']) &gt; '0'"> expandable</xsl:if>
             </xsl:attribute>
             <div>
               <xsl:attribute name="class">inner</xsl:attribute>
               <div>
                 <xsl:attribute name="class">theText 
                 </xsl:attribute>
                 <a href="{umbraco.library:NiceUrl(@id)}">
                    <xsl:value-of select="@nodeName"/>
                 </a>
                 <xsl:if test="count(current()/* [@isDoc and string(umbracoNaviHide) != '1']) &gt; '0'">
                    <xsl:if test="$currentPage/@id = current()/@id or current()/descendant-or-self::node[@id = $currentPage/@id]">
                       <xsl:call-template name="submenu">
                       <xsl:with-param name="strCSS">
                       <xsl:value-of select="$strCSS+10" />
                       </xsl:with-param>
                       </xsl:call-template>
                    </xsl:if>
                  </xsl:if>
               </div>
             </div>
           </div>       
         </xsl:for-each>
       </xsl:if>
             </div>
       </xsl:template>
      
       <xsl:template name="submenu">
         <xsl:param name="strCSS"/>
           <xsl:for-each select="current()/* [@isDoc and string(umbracoNaviHide) != '1']">
             <div style="padding-left:{$strCSS}px">
               <xsl:attribute name="class">menuItem
                  <xsl:if test="$currentPage/@id = current()/@id"> selected</xsl:if>
                  <xsl:if test="count(current()/* [@isDoc and string(umbracoNaviHide) != '1']) &gt; '0'"> expandable</xsl:if>
               </xsl:attribute>
               <div>
                  <xsl:attribute name="class">inner</xsl:attribute>
                  <div>
                    <xsl:attribute name="class">theText 
                    </xsl:attribute>
                  <a href="{umbraco.library:NiceUrl(@id)}">
                    <xsl:value-of select="@nodeName"/>
                  </a>
                </div>
               </div>
             </div>
               <xsl:if test="count(current()/* [@isDoc and string(umbracoNaviHide) != '1']) &gt; '0'">
                 <xsl:if test="$currentPage/@id = current()/@id or current()/descendant-or-self::node[@id = $currentPage/@id]">
                 <xsl:call-template name="submenu">
                   <xsl:with-param name="strCSS">
                  <xsl:value-of select="$strCSS+10" />
                </xsl:with-param>
                 </xsl:call-template>
                   </xsl:if>
               </xsl:if>
           </xsl:for-each>
       </xsl:template>
      </xsl:stylesheet>

    Best Regards,

    Andrei Yazik


  • Jan Skovgaard 11264 posts 23592 karma points MVP 8x admin c-trib
    Jan 25, 2011 @ 21:24
    Jan Skovgaard
    0

    Hi Andrei

    I think that what you should do is make sure all the levels of the navigation gets listed

    Then you should design it using CSS and then finally add the collapsible effect using JavasScript (For instance a plugin or something based on jQuery) to achieve the expandle/collapsible effect.

    You can't achieve the effect using XSLT only if I understand your question correctly.

    Cheers

    /Jan

  • Bo Damgaard Mortensen 719 posts 1207 karma points
    Jan 26, 2011 @ 22:26
    Bo Damgaard Mortensen
    0

    Like Jan said, you should be using the XSLT to output the menu content and then use javascript for creating the actual expand/collapse menu. I digged this up for you:

    http://plugins.jquery.com/project/mbMenu

    ... and a demo of it in action:

    http://pupunzi.com/#mb.components/mb._menu/menu.html

     

    All the best,

    Bo

  • Andrei Yazik 24 posts 44 karma points
    Feb 02, 2011 @ 12:21
    Andrei Yazik
    0

    Thanks everyone for your answers! 

Please Sign in or register to post replies

Write your reply to:

Draft