Copied to clipboard

Flag this post as spam?

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


  • Carl 15 posts 36 karma points
    Feb 08, 2011 @ 00:44
    Carl
    0

    Sitemap, subnav css XSLT

    We have a small but annoying issue. Using the built in sitemap xslt for umbraco I setup our site navigation with hover drop down menu for sub-pages. Works great, but...

    Problem:

    I do not want the sub-navigation to use the same css class as main navigation. Matter of fact, I don't want the sub-navigation to use any css. I only want the main navigation to use id="nav" class="c". I tried a few variations, but it seems to create errors during validation.

    Thank you for your insight and help.

    <?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:tagsLib="urn:tagsLib" xmlns:BlogLibrary="urn:BlogLibrary" xmlns:PS.XSLTsearch="urn:PS.XSLTsearch"
      exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets tagsLib BlogLibrary 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="nav"><xsl:for-each select="$parent/* [@isDoc and string(umbracoNaviHide) != '1' and @level &lt;= $maxLevelForSitemap]">
    <li>  
    <xsl:if test="@id = $currentPage/@id">
    <xsl:attribute name="class">selected</xsl:attribute>
    </xsl:if>
    <a href="{umbraco.library:NiceUrl(@id)}"><span class="c"><span><xsl:value-of select="@nodeName"/></span></span></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>
    </ul>
    </xsl:if>
    </xsl:template>
    </xsl:stylesheet>

  • Chris Houston 535 posts 980 karma points MVP admin c-trib
    Feb 08, 2011 @ 01:07
    Chris Houston
    0

    Hi Carl,

    If you look at the way this works it is calling drawNodes and then drawNodes is recursively calling itself, so having the ID on the UI is actually not a good idea as you will have multiple UI elements with the same ID, hence your problem.

    The best way to address this is to write you CSS addressing the top level DIV with the ID "sitemap"

    I.e.

    div#sitemap ul
    {
       background-color:#f00;
    }
    div#sitemap ul li ul
    {
       background-color:#0f0;
    }

    So in the above example, your top level navigation would have a red background and the second level would have a green background.

    Cheers,

    Chris

  • Carl 15 posts 36 karma points
    Feb 08, 2011 @ 02:43
    Carl
    0

    Thanks Chis,

    I reviewed the css file and found the following is whats causing the unwanted presentation when hovering over the sub-nav

    #nav a:hover span.c { background:url(../images/bg-nav-hover.gif) no-repeat; }
    #nav a:hover span.c span { height:27px; background:url(../images/bg-nav-hover.gif)

    Is there any way to rewrite the XSLT to under which drawnodes should be called?

     

    Thanks again

  • Chris Houston 535 posts 980 karma points MVP admin c-trib
    Feb 08, 2011 @ 02:51
    Chris Houston
    0

    Hi Carl,

    As I pointed out above, don't try and address the navigation using your #nav ID, I suggest you actually remove that completely and I would suggest you change your CSS to:

    #sitemap ul li a:hover span.c
    {
    height:27px;
    background:url('/images/bg-nav-hover.gif');
    }

    I am also not sure why you have the nested span elements, to me it looks like you are over complicating things a bit when they probably don't need to be so complex :)

    Cheers,

    Chris

Please Sign in or register to post replies

Write your reply to:

Draft