Copied to clipboard

Flag this post as spam?

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


  • Probocop 51 posts 71 karma points
    Jul 20, 2010 @ 11:35
    Probocop
    0

    Active navigation, that stays active in sub-pages?

    I'm having a bit of trouble creating a navigation that applies an active class to the level 1 <li> when on one of it's sub pages. How would I go about doing so?

     

  • Dimitris Tsoukakis 33 posts 59 karma points
    Jul 20, 2010 @ 12:04
    Dimitris Tsoukakis
    0

    You may use the parentId attribute of the currentPage

    <xsl:for-each select="$firstLevelMenuItems">
        <li>
            <xsl:if test="$currentPage/@id=@id or ($currentPage/@parentID=@id)">
                <xsl:attribute name="class">current</xsl:attribute>
            </xsl:if>

            <a href="{umbraco.library:NiceUrl(@id)}">
                <xsl:value-of select="@nodeName" />
            </a>
               
            </xsl:if>
        </li>
    </xsl:for-each>

  • Thomas Höhler 1237 posts 1709 karma points MVP
    Jul 20, 2010 @ 12:05
    Thomas Höhler
    0

    If you are in a for-each loop on the first level you can test the node if one of his descendants is selected via

    <xsl:when test="descendant-or-self::node/@id = $currentPage/@id">
    <xsl:attribute name="class">level1selected</xsl:attribute>
    </xsl:when>

    hth, Thomas

  • Thomas Höhler 1237 posts 1709 karma points MVP
    Jul 20, 2010 @ 12:06
    Thomas Höhler
    0

    BTW: you can test it on every level ;-)

    Thomas

  • Dimitris Tsoukakis 33 posts 59 karma points
    Jul 20, 2010 @ 12:37
    Dimitris Tsoukakis
    0

    Of course not. For lower levels you may use the path attribute

    Try this (not tested)

    <xsl:if test="contains(concat($currentPage/@path,','),concat(',',./@id,','))">
    ...
    </xsl:if>

  • Dimitris Tsoukakis 33 posts 59 karma points
    Jul 20, 2010 @ 13:02
    Dimitris Tsoukakis
    0

    Nice solution Thomas. I hadn't see your previous post and I thought you were asking if my previous solution works on any level.

  • montana 42 posts 63 karma points
    Oct 15, 2010 @ 00:52
    montana
    0

    here's full xslt taken from sitemap that shows 'active' page [for ul/li collapsable site navigation]

    slightly modified from what I'm using- should work fine in most cases also allows for custom 'this point down' menus by setting the xpath on the GetXmlNodeByXPath call

    <?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"
      exclude-result-prefixes="msxml umbraco.library Exslt.ExsltCommon Exslt.ExsltDatesAndTimes Exslt.ExsltMath Exslt.ExsltRegularExpressions Exslt.ExsltStrings Exslt.ExsltSets tagsLib ">

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

        <xsl:param name="currentPage"/>

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

        <xsl:variable name="source" select="umbraco.library:GetXmlNodeByXPath('/root') [string(umbracoNaviHide)!='1']" />

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

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

        <xsl:template match="/">
            <ul class="nav_list">
                <xsl:call-template name="drawNodes">
                    <xsl:with-param name="parent" select="$source"/>
                </xsl:call-template>
            </ul>
        </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)">
                <xsl:for-each select="$parent/* [@isDoc and @level &lt;= $maxLevelForSitemap and string(umbracoNaviHide)!='1']">

                    <li onmouseover="$(this).addClass('over');" onmouseout="$(this).removeClass('over');" >
                        <!-- duplicate ^ "over' class here to "open" class from below and you have a fully expandable/collapsable with active state hierarchical menu-->

                        <xsl:if test="contains( concat($currentPage/@path, ','), concat(',', @id, ',') )">
                            <xsl:attribute name="class">open</xsl:attribute>
                        </xsl:if>

                        <a 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">
                            <ul>
                                <xsl:call-template name="drawNodes">
                                    <xsl:with-param name="parent" select="."/>
                                </xsl:call-template>
                            </ul>
                        </xsl:if>
                    </li>
                </xsl:for-each>
            </xsl:if>
        </xsl:template>

    </xsl:stylesheet>

  • Jake Peters 4 posts 23 karma points
    Oct 21, 2013 @ 07:12
    Jake Peters
    0

    I am having the same problem, but I am working in razor. So none of this is making any sense to me. Can someone please help me with this same issue? I also need the top nav to stay selected when I move onto a subnav.

    I am using the topNavigation code that is commonly used in Umbraco (with some slight modifictaions):

    @inherits umbraco.MacroEngines.DynamicNodeContext
    @
      var level String.IsNullOrEmpty(Parameter.Levelint.Parse(Parameter.Level)
      var ulClass String.IsNullOrEmpty(Parameter.UlClass"" String.Format(" class=\"{0}\""Parameter.UlClass)
      var parent @Model.AncestorOrSelf(level);
      if (parent != null{
        <ul@Html.Raw(ulClassclass="nav">
        @if(level == &parent.Where("Visible"){
          var selected Model.Path.EndsWith(parent.Id.ToString()" class=\"active\"" "";
          <li>
            <href="@parent.Url" @Html.Raw(selected)>@parent.umbracoUrlAlias</a>
          </li>                 
        }
        @foreach (var item in parent.Children.Where("Visible"){
          var selected Model.Path.EndsWith(item.Id.ToString()" class=\"active\"" "";
          <li>
            <href="/@item.umbracoUrlAlias" @Html.Raw(selected)>@item.umbracoUrlAlias</a>
          </li>
          }
        </ul>
      }
    }

     

  • Jake Peters 4 posts 23 karma points
    Oct 21, 2013 @ 07:21
    Jake Peters
    0

    Nevermind. I found it here: http://our.umbraco.org/forum/developers/razor/25086-Top-Menu-active-when-sub-page-selected

     

    @inherits umbraco.MacroEngines.DynamicNodeContext
    @
      var level String.IsNullOrEmpty(Parameter.Levelint.Parse(Parameter.Level)
      var ulClass String.IsNullOrEmpty(Parameter.UlClass"" String.Format(" class=\"{0}\""Parameter.UlClass)
      var parent @Model.AncestorOrSelf(level);
      if (parent != null{
        <ul@Html.Raw(ulClassclass="nav">
        @if(level == &parent.Where("Visible"){
          var selected Model.Path.EndsWith(parent.Id.ToString()" class=\"active\"" "";
          <li>
            <href="@parent.Url" @Html.Raw(selected)>@parent.umbracoUrlAlias</a>
          </li>                 
        }
        @foreach (var item in parent.Children.Where("Visible"){
          var selected Array.IndexOf(Model.Path.Split(',')item.Id.ToString()>= " class=\"active\"" "";
          <li>
            <href="/@item.umbracoUrlAlias" @Html.Raw(selected)>@item.umbracoUrlAlias</a>
          </li>
          }
        </ul>
      }
    }

Please Sign in or register to post replies

Write your reply to:

Draft