Copied to clipboard

Flag this post as spam?

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


  • Phil Crowe 192 posts 256 karma points
    Mar 17, 2010 @ 10:49
    Phil Crowe
    0

    Navigation Menu with Drop Down

    Hi, Im pretty new to xslt. Im trying to use it to create the main navigation along the top of my site. The navigation bar uses Jquery. It displays all of the nodes under the homepage node and then when you hover over one of these links a drop down menu appears beneath it with all of the child nodes for that page. Pretty common navigation bar.

    My problem is I cant get XSLT to recognise the child nodes as a separate UL list under the top level nodes. Currently Its putting the 2nd node in the top level underneath the 1st node of the top level as oppose to the child nodes displaying underneath each of the parent nodes in the top level.

    Sorry if thats confusing, finding it difficult to explain, my xslt code is below:

    -----------------------------------------------------------------------------------------------------------------------

    <?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" 

    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:variable name="level" select="1"/>

        <xsl:variable name="level2" select="2"/>

        <xsl:variable name="lcletters">abcdefghijklmnopqrstuvwxyz</xsl:variable>

        <xsl:variable name="ucletters">ABCDEFGHIJKLMNOPQRSTUVWXYZ</xsl:variable>

      <xsl:template match="/">

     

        <!-- The fun starts here -->

        <div id="top-nav">

     

          <ul id="menu">

            <li>

              <a href="/index.html">HOME <span class="breaker">|</span>

            </a>

            </li>

            <xsl:for-each select="$currentPage/ancestor-or-self::node[@level=$level]/node [string(data [@alias='umbracoNaviHide']) != '1']">

     

     

            <li>

              <a href="{umbraco.library:NiceUrl(@id)}">

                <xsl:value-of select="@nodeName"/>

              </a>

              <ul>

     

                <xsl:for-each select="$currentPage/ancestor-or-self::node [@level=$level2]/node [string(data [@alias='umbracoNaviHide']) != '1']">

                  <li>

                    <a href="{umbraco.library:NiceUrl(@id)}">

                      <xsl:value-of select="@nodeName"/>

                    </a>

                  </li>

                </xsl:for-each>

     

              </ul>

            </li>

            </xsl:for-each>

          </ul>

        </div>

     

     

     

     

     

      </xsl:template>

     

    </xsl:stylesheet>

    -------------------------------------------------------------------------------------------------------------

     

  • dandrayne 1138 posts 2262 karma points
    Mar 17, 2010 @ 11:24
    dandrayne
    0

    You should create a new xslt file and select the "sitemap" template - it should get you much closer to where you want to be.  If you'd rather write it yourself, you need to look at a recursive template, but the sitemap xslt file will help you get your head around what is happening.

    Dan

  • Phil Crowe 192 posts 256 karma points
    Mar 17, 2010 @ 14:17
    Phil Crowe
    0

    Thanks Dan,

    Your suggestion is pretty much working apart from the drop down is only working on the homepage. Any thoughts to why this might be the case??

    sorry if this is something really dumb, like i said, im new to xslt

    ----------------------------------------------------------------------------------------------

    <?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" 

    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"/>

     

    <!-- update this variable on how deep your site map should be -->

    <xsl:variable name="maxLevelForSitemap" select="4"/>

     

    <xsl:template match="/">

     

    <div id="top-nav">        

    <div id="premenu">

              <a href="/">

                HOME</a> &nbsp;

     

     

    </div>

    <xsl:call-template name="drawNodes">  

    <xsl:with-param name="parent" select="$currentPage/ancestor-or-self::node [@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="menu">

     

     

    <xsl:for-each select="$parent/node [string(./data [@alias='umbracoNaviHide']) != '1' and @level &lt;= $maxLevelForSitemap]"> 

    <li>  

    <a href="{umbraco.library:NiceUrl(@id)}">

    <xsl:value-of select="@nodeName"/></a>  

    <xsl:if test="count(./node [string(./data [@alias='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>

    </ul>

    </xsl:if>

    </xsl:template>

    </xsl:stylesheet>

  • Phil Crowe 192 posts 256 karma points
    Mar 17, 2010 @ 16:38
    Phil Crowe
    0

    Can anyone help. I've tried all sorts but cant work this out.

  • dandrayne 1138 posts 2262 karma points
    Mar 17, 2010 @ 16:46
    dandrayne
    0

    Is the macro placed on all templates, or just on the homepage?

    Dan

  • Phil Crowe 192 posts 256 karma points
    Mar 17, 2010 @ 17:03
    Phil Crowe
    0

    its on all templates. 

  • dandrayne 1138 posts 2262 karma points
    Mar 17, 2010 @ 17:10
    dandrayne
    0

    Hmm.  Without seeing your site it's hard to see what is going wrong here, but starting with an install of something like http://our.umbraco.org/projects/business-website-starter-pack will allow you to see code that solves problems you are likely to encounter.

    There doesn't seem to be much of anything wrong with your xslt (quick glance).  Is the submenu rendered on all pages? Or is only the dropdown code not operating ont he subpages?  i.e. if you go to a subpage and disable css can you see the menu with subpages included?

  • Phil Crowe 192 posts 256 karma points
    Mar 17, 2010 @ 17:16
    Phil Crowe
    0

    So in short 

    homepage - working correctly

    nodes under homepage - shows just the first level nodes but the drop down with the 2nd level nodes isnt showing

    next level of nodes - same again, shows just the first level nodes but the drop down with the 2nd level nodes isnt showing

     

  • Phil Crowe 192 posts 256 karma points
    Mar 17, 2010 @ 17:35
    Phil Crowe
    0

    it does seem to be a css issue. when i turn off srtyling the links are there! 

  • dandrayne 1138 posts 2262 karma points
    Mar 17, 2010 @ 17:47
    dandrayne
    0

    Are the paths to your css etc working ok? i.e. using absolute paths

    <link rel="bleh" href="/css/sheet.css" />

    Dan

Please Sign in or register to post replies

Write your reply to:

Draft