Developer forum

Forum » CMS - Standard features » Navigation Expand Without Reloading

Navigation Expand Without Reloading

Aditya Bante
Reply

I am not sure how to implemt this into a XSLT file. I am trying to make a toggle on a mobile menu temlate,my current solution reloads the window when I have to see a subpage, I thought toggling on main page would solve that problem.
Here is a fiddle for example I would like to implement the same functionality.    http://jsfiddle.net/p5726jxf/1/  

and this is my XSLT code.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"  xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
  <!--
  Description: ul/li based navigation. No features from admin implemented.
  Recommended settings:
  Fold out: True or False
  Upper menu: Dynamic or Static
  First level: > 0
  Last level: >= First level
  -->
  <xsl:output method="xml" omit-xml-declaration="yes" indent="yes"  encoding="utf-8" />
  <xsl:param name="html-content-type" />
  <xsl:template match="/NavigationTree">
    <xsl:if test="count(//Page) > 0">
      <ul>
        <xsl:apply-templates select="Page">
          <xsl:with-param name="depth" select="1"/>
        </xsl:apply-templates>
      </ul>
    </xsl:if>
  </xsl:template>  
  <xsl:template match="//Page">
    <xsl:param name="depth"/>
    <li>
      <xsl:attribute name="class">
        <xsl:if test="@InPath='True'">inpath </xsl:if>
        <xsl:if test="position() = 1">firstitem </xsl:if>
        <xsl:if test="position() = count(//Page)">lastitem </xsl:if>
        <xsl:if test="@Active='True'">activeitem </xsl:if>
        <xsl:if test="count(//Page) > 0">parentitem </xsl:if>
      </xsl:attribute>
      <a>
        <xsl:attribute name="href">
          <xsl:value-of select="@FriendlyHref" disable-output-escaping="yes"/>
        </xsl:attribute>
        <xsl:value-of select="@MenuText" disable-output-escaping="yes"/>
        <xsl:if test="@Active='True'">
          <span class="fa fa-chevron-right pull-right">&#160;</span>
        </xsl:if>
      </a>
      <xsl:if test="count(Page)">        
        <ul class="M{@AbsoluteLevel}">
          <xsl:apply-templates select="Page">
            <xsl:with-param name="depth" select="$depth+1"/>
          </xsl:apply-templates>
        </ul>
      </xsl:if>
    </li>
  </xsl:template>
</xsl:stylesheet>

I would really appreciate the help, I have spent long time on this but still can't get around it.

Best Regards
Aditya  Bante

 

 


Replies

 
Nicolai Høeg Pedersen
Reply

You should define your navigation with at least these settings: "startlevel:1;enlevel:3;expandmode:all;"

 
Aditya Bante
Reply

Hi Nicolai 

I have defined "expandmode:expandall" in my navigation.

<ul id="navigationcompact" class="dwnavigation" settings="expandmode:expandall;template:NavigationCompactOffCanvas.xslt"></ul>  

 

 
Nicolai Høeg Pedersen
Reply

This template should render all of your nodes. Does it do that? If it does, then you just have to apply the right classes, and you are set.

BR Nicolai

 
Aditya Bante
Reply

Hi Nicolai

Yes, it renders all the nodes, but what classes are you talking about ? do you have a sample I could use for inspiration ? Thank you.

Best Regards
Aditya Bante

 

 
Nicolai Høeg Pedersen
Reply

The classes from the markup in your Fiddle should be the same you use in the XSLT. It should be relatively simple.

I can have a developer contact you who can implement this for you - but it will be a payable task.

BR Nicolai

 

You must be logged in to post in the forum