Hello,

I am trying to mimic a jquery nav applet I have used before within a Umbraco site using XSLT. I am nearly there but its not working as expected.

The heirarchy I am trying to create is this:

                  <ul id="main-nav">
                    <li><a class="main-link" href="">Home</a>
                      <ul class="sub-links">
                            <li><a href="" title=""><img src="Images/arrow.png" />Item1</a> </li>
                            <li><a href="" title=""><img src="Images/arrow.png" />Item1</a> </li>
                        </ul>
                    </li>
                    <li><a class="main-link" href="">About</a>
                      <ul class="sub-links">
                            <li><a href="" title=""><img src="Images/arrow.png" />Item1</a> </li>
                            <li><a href="" title=""><img src="Images/arrow.png" />Item1</a> </li>
                        </ul>
                    </li>
                    <li><a class="close" title="Click to Collapse" href="#">X</a></li>
                  </ul>

Note the classes for the top ul "Main-nav", the li "main-link" and the second ul "sub-links"

I have a bit of Jquery that opens the slide panel (sub-link-bar) and shows the subordinates

<script type="text/javascript">
   
    $(document).ready(function(){
        $("#main-nav li a.main-link").hover(function(){
            $("#main-nav li a.close").fadeIn();
            $("#main-nav li a.main-link").removeClass("active");            
            $(this).addClass("active");          
            $("#sub-link-bar").animate({
                height: "40px"       
            });
            $(".sub-links").hide();
            $(this).siblings(".sub-links").fadeIn();
        }, function(){});
        $("#main-nav li a.close").hover(function(){
            $("#main-nav li a.main-link").removeClass("active");                      
            $(".sub-links").fadeOut();
            $("#sub-link-bar").animate({
                height: "3px"       
            });  
            $("#main-nav li a.close").fadeOut();
        });
       
       
    });
   
    </script>

HOWEVER!

The bit of XSLT i am using doesn't let me style the second ul as it calculated:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE xsl:stylesheet [ <!ENTITY nbsp "&#x00A0;"> ]>
<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" xmlns:PS.XSLTsearch="urn:PS.XSLTsearch"
  exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets PS.XSLTsearch ">

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

<xsl:param name="currentPage"/>

<!-- update this variable on how deep your site map should be -->
<xsl:variable name="maxLevelForSitemap" select="4"/>

  <xsl:template match="/">

    <div id="sitemap">
      <xsl:call-template name="drawNodes">
        <xsl:with-param name="parent" select="$currentPage/ancestor-or-self::* [@isDoc and @level=1]"/>
      </xsl:call-template>
    </div>
  </xsl:template>

  <xsl:template name="drawNodes">
    <xsl:param name="parent"/>
    <xsl:if test="umbraco.library:IsProtected($parent/@id, $parent/@path) = 0 or (umbraco.library:IsProtected($parent/@id, $parent/@path) = 1 and umbraco.library:IsLoggedOn() = 1)">
     
<ul id="main-nav">

        <xsl:for-each select="$parent/* [@isDoc and string(umbracoNaviHide) != '1' and @level &lt;= $maxLevelForSitemap]">
          <li><a class="main-link" href="{umbraco.library:NiceUrl(@id)}"><xsl:value-of select="@nodeName"/></a>
            <xsl:if test="count(./* [@isDoc and string(umbracoNaviHide) != '1' and @level &lt;= $maxLevelForSitemap]) &gt; 0">
              <xsl:call-template name="drawNodes"><xsl:with-param name="parent" select="."/></xsl:call-template>

              </xsl:if>
    </li>

        </xsl:for-each>
 <li><a class="close" title="Click to Collapse" href="#">X</a></li>

      </ul>

    </xsl:if>
  </xsl:template>
</xsl:stylesheet>

I appreciate that this may be rudimentary XSLT but I am struggling with it.

I did modify the Jquery to look at the li ul nodes and this sort of works:

<script type="text/javascript">
   
    $(document).ready(function(){
        $("#main-nav li a.main-link").hover(function(){
            $("#main-nav li a.close").fadeIn();
            $("#main-nav li a.main-link").removeClass("active");            
            $(this).addClass("active");          
            $("#sub-link-bar").animate({
                height: "100px"       
            });
            $("li ul").hide();
            $(this).siblings("li ul").fadeIn();
        }, function(){});
       
 $("#main-nav li a.close").hover(function(){
            $("#main-nav li a.main-link").removeClass("active");                      
            $("li ul").fadeOut();
            $("#sub-link-bar").animate({
                height: "3px"       
            });  
            $("#main-nav li a.close").fadeOut();
        });
       
       
    });
 
    </script>

However the on:hover does not persist allowing me to select the subordinates.

In a bit of a pickle.

Can anyone help?