I used the XSLT sitemap template as my starting point and all went well except the following issues:
#1 - I would like <li class="divider"></li> to display after every 2nd level item. When I inspect the li is created but not displaying correctly.
#2 - if you view the navigation as if you were on a mobile display you see that going into a "dropdown" you get a back option to take you back to the main nav items, this isn't displaying either.
#3 - Stupid age old question and trust me Ive searched, thats why im asking now....Active page class. I got it to work once but all the children recieved the active class too. Im not worried about the children being set to active just the top level navs.
My XSLT:
<xsl:param name="currentPage"/> <!-- update this variable on how deep your site map should be --> <xsl:variable name="maxLevelForSitemap" select="4"/> <xsl:template match="/"> <xsl:variable name="level" select="1"/> <xsl:variable name="dropDown" select="2"/> <!-- The fun starts here --> <div class="row"> <div class="twelve columns"> <nav class="top-bar"> <ul> <li class="toggle-topbar menu-icon"><a href="#"><span> </span></a></li> <li> <a href="/"> <xsl:value-of select="$currentPage/ancestor-or-self::*/@nodeName"/> </a> </li> <xsl:if test="$currentPage/@id=@id or ($currentPage/@parentID=@id)"> <xsl:attribute name="class">active</xsl:attribute> </xsl:if> <xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level]/* [@isDoc and string(umbracoNaviHide) != '1'][not(self::RF-Slide)]"> <li> <xsl:if test="count(./* [@isDoc and string(umbracoNaviHide) != '1']) > 0"> <xsl:attribute name="class"> has-dropdown </xsl:attribute> </xsl:if> <a href="{umbraco.library:NiceUrl(@id)}"> <xsl:value-of select="@nodeName"/> </a> <!-- Drop Down Menu --> <xsl:if test="count(./* [@isDoc and string(umbracoNaviHide) != '1']) > 0"> <ul class="dropdown"> <xsl:for-each select="./* [@isDoc and string(umbracoNaviHide) != '1']"> <li> <a href="{umbraco.library:NiceUrl(@id)}" > <xsl:value-of select="@nodeName"/> </a> </li> </xsl:for-each> </ul> </xsl:if> <!-- End of Drop Down Menu --> <li class="divider"></li> </li> </xsl:for-each> </ul> </nav> </div> </div> </xsl:template> </xsl:stylesheet>
<xsl:param name="currentPage"/> <!-- update this variable on how deep your site map should be --> <xsl:variable name="maxLevelForSitemap" select="4"/> <xsl:template match="/"> <xsl:variable name="level" select="1"/> <xsl:variable name="dropDown" select="2"/> <!-- The fun starts here --> <div class="row"> <div class="twelve columns"> <nav class="top-bar"> <ul> <li class="toggle-topbar menu-icon"><a href="#"><span> </span></a></li> <li> <a href="/"> <xsl:value-of select="$currentPage/ancestor-or-self::*/@nodeName"/> </a> </li>
<xsl:if test="$currentPage/@id=@id or ($currentPage/@parentID=@id)"> <xsl:attribute name="class">active</xsl:attribute> </xsl:if>
<a href="{umbraco.library:NiceUrl(@id)}"> <xsl:value-of select="@nodeName"/> </a> <!-- Drop Down Menu --> <xsl:if test="count(./* [@isDoc and string(umbracoNaviHide) != '1']) > 0"> <ul class="dropdown"> <xsl:for-each select="./* [@isDoc and string(umbracoNaviHide) != '1']"> <li> <a href="{umbraco.library:NiceUrl(@id)}" > <xsl:value-of select="@nodeName"/> </a> </li> </xsl:for-each> </ul> </xsl:if> <!-- End of Drop Down Menu --> <li class="divider"> </li> </li> </xsl:for-each> </ul> </nav> </div> </div> </xsl:template> </xsl:stylesheet>
In XSLT, you can´t have empty HTML tags, so what i´m doing when I need a div or an li without any data in, e.g your divider I normaly use the non-breaking space. tag.
Thank you this did end up working, however still no back functionaility when in the "mobile" view state of the menu. I can't believe I missed the empty state thanks for pointing that out now it will really stick haha.
I can see from the documentation that the back funtionality is created by some javascript.
{index:0,stickyClass:'sticky',custom_back_text:true,// Set this to false and it will pull the top level link name as the back text back_text:'Back',// Define what you want your custom back text to be if custom_back_text: true is_hover:true,scrolltop:true,// jump to top when sticky nav menu toggle is clicked init:false}
Did you check that your page include the javascript files for this and these are loaded correctly into the browser. And check if you get any javascript errors on the page.
Me too! yeah thanks Im calling up the .min so I think so but I was having some issues with tabs so thats a good place to start hunting. It's not the xslt though? Correct?
No I think that your XSLT files are good. It sounds to me that it´s a javascript issue. Since you don´t see you tabs either I think that you are missing call the javascript for making the tabs with the foundation.
So in the place where you will like the tabs, you will have to do something like this.
<dl class="tabs"> <dd class="active"><a href="#simple1">Simple Tab 1</a></dd> <dd><a href="#simple2">Simple Tab 2</a></dd> <dd class="hide-for-small"><a href="#simple3">Simple Tab 3</a></dd> </dl> <ul class="tabs-content"> <li class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li> <li id="simple2Tab">This is simple tab 2s content. Now you see it!</li> <li id="simple3Tab">This is simple tab 3s content.</li> </ul>
And then you have to add this javascript for tabs.
Navigation Problems - So close to perfect
Hey guys,
I am using foundation framework by Zurb, and I am running into some cosmetic issues, that I need some thoughts on.
You can see the intended functionality of the navigation here: http://foundation.zurb.com/docs/components/top-bar.html
I used the XSLT sitemap template as my starting point and all went well except the following issues:
#1 - I would like <li class="divider"></li> to display after every 2nd level item. When I inspect the li is created but not displaying correctly.
#2 - if you view the navigation as if you were on a mobile display you see that going into a "dropdown" you get a back option to take you back to the main nav items, this isn't displaying either.
#3 - Stupid age old question and trust me Ive searched, thats why im asking now....Active page class. I got it to work once but all the children recieved the active class too. Im not worried about the children being set to active just the top level navs.
My XSLT:
Hi Grant,
Try this one instead.
<xsl:param name="currentPage"/>
<!-- update this variable on how deep your site map should be -->
<xsl:variable name="maxLevelForSitemap" select="4"/>
<xsl:template match="/">
<xsl:variable name="level" select="1"/>
<xsl:variable name="dropDown" select="2"/>
<!-- The fun starts here -->
<div class="row">
<div class="twelve columns">
<nav class="top-bar">
<ul>
<li class="toggle-topbar menu-icon"><a href="#"><span> </span></a></li>
<li>
<a href="/">
<xsl:value-of select="$currentPage/ancestor-or-self::*/@nodeName"/>
</a>
</li>
<xsl:if test="$currentPage/@id=@id or ($currentPage/@parentID=@id)">
<xsl:attribute name="class">active</xsl:attribute>
</xsl:if>
<xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level]/* [@isDoc and string(umbracoNaviHide) != '1'][not(self::RF-Slide)]">
<li>
<xsl:if test="count(./* [@isDoc and string(umbracoNaviHide) != '1']) > 0">
<xsl:attribute name="class">
has-dropdown
</xsl:attribute>
</xsl:if>
<a href="{umbraco.library:NiceUrl(@id)}">
<xsl:value-of select="@nodeName"/>
</a>
<!-- Drop Down Menu -->
<xsl:if test="count(./* [@isDoc and string(umbracoNaviHide) != '1']) > 0">
<ul class="dropdown">
<xsl:for-each select="./* [@isDoc and string(umbracoNaviHide) != '1']">
<li>
<a href="{umbraco.library:NiceUrl(@id)}" >
<xsl:value-of select="@nodeName"/>
</a>
</li>
</xsl:for-each>
</ul>
</xsl:if>
<!-- End of Drop Down Menu -->
<li class="divider"> </li>
</li>
</xsl:for-each>
</ul>
</nav>
</div>
</div>
</xsl:template>
</xsl:stylesheet>
In XSLT, you can´t have empty HTML tags, so what i´m doing when I need a div or an li without any data in, e.g your divider I normaly use the non-breaking space. tag.
Hope this helps.
/Dennis
Thank you this did end up working, however still no back functionaility when in the "mobile" view state of the menu. I can't believe I missed the empty state thanks for pointing that out now it will really stick haha.
Hi Grant,
You are welcome.
I can see from the documentation that the back funtionality is created by some javascript.
Did you check that your page include the javascript files for this and these are loaded correctly into the browser. And check if you get any javascript errors on the page.
I hope you will get your back funtionality to work as well.
/Dennis
Me too! yeah thanks Im calling up the .min so I think so but I was having some issues with tabs so thats a good place to start hunting. It's not the xslt though? Correct?
Thanks again for the help.
Hi Grant,
No I think that your XSLT files are good. It sounds to me that it´s a javascript issue. Since you don´t see you tabs either I think that you are missing call the javascript for making the tabs with the foundation.
So in the place where you will like the tabs, you will have to do something like this.
<dl class="tabs"><dd class="active"><a href="#simple1">Simple Tab 1</a></dd>
<dd><a href="#simple2">Simple Tab 2</a></dd>
<dd class="hide-for-small"><a href="#simple3">Simple Tab 3</a></dd>
</dl>
<ul class="tabs-content">
<li class="active" id="simple1Tab">This is simple tab 1s content. Pretty neat, huh?</li>
<li id="simple2Tab">This is simple tab 2s content. Now you see it!</li>
<li id="simple3Tab">This is simple tab 3s content.</li>
</ul>
And then you have to add this javascript for tabs.
and to make the tabs load call this javascript:
$(document).foundationTabs();
http://foundation.zurb.com/old-docs/f3/javascripts.php
I haven´t worked with the Foundation framework but i have worked with the bootstrap framework and they are quite similar.
Remember to change the path to the javascript files so it match your structure.
I hope this makes sense, and helps you get your tabs working and your back buttion on the mobile view.
/Dennis
Thanks, I got it!
is working on a reply...