Copied to clipboard

Flag this post as spam?

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


  • Joachim 16 posts 36 karma points
    Mar 07, 2013 @ 15:49
    Joachim
    0

    Big menu XSLT problems

    Hello, I am new to XSLT, that's why I need some help with this one.

    I have a "Big menu", that I need to make a XSLT to create the menu items from umbraco nodes.

    Here is the html code from the big menu:
    <ul class="menuTemplate4 decor4_1">
                <li><a href="#CSS-Menu">CSS Menu</a></li>
                <li class="separator"></li>
                <li><a href="#Horizontal-Menus" class="arrow">Horizontal Menus</a>
                    <div class="drop decor4_2" style="width: 640px;">
                        <div class="left">
                            <b>CSS Menu</b>
                            <div>
                                <a href="#">Html 5 menu</a><br>
                                <a href="#">Web menu CSS</a><br>
                                <a href="#">Css menus</a><br>
                                <a href="#">Nav element</a><br>
                                <a href="#">SEO menu</a>                        </div>
                        </div>
                        <div class="left">
                            <b>Menu Templates</b>
                            <div>
                                <a href="#">Menu template</a><br>
                                <a href="#">Menu skin</a><br>
                                <a href="#">Web menu styles</a><br>
                                <a href="#">Best css menus</a>                        </div>
                        </div>
                        <div class="left">
                            <b>SEO Friendly</b>
                            <div>
                                <a href="#">Search engine friendly</a><br>
                                <a href="#">Best css menu</a><br>
                                <a href="#">Most popular menus</a><br>
                                <a href="#">Best web menu designs</a><br>
                                <a href="#">E-Commerce sites</a><br>
                                <a href="#">CSS Templates</a><br>
                                <a href="#">Menu Design Templates</a><br>
                                <a href="#">Clean layout &amp; alignment</a><br>
                                <a href="#">Favorite menus</a>                        </div>
                        </div>
                        <div class="left" style="text-align:right; width:200px;">
                            <img src="CSS%20Menu-filer/hd6.png" style="width:128px; height:128px;"><br>
                            Search Engine friendly (SEO)                    </div>
                        <div style="clear: both;"></div>
                    </div>
                </li>
            <li class="separator"></li>
            <li><a href="#CSS">CSS</a></li>
            <li class="separator"></li>
            <li><a href="#Horizontal-Menu-CSS">Horizontal Menu CSS</a></li>
            <li class="separator"></li>
            <li><a href="#Web-Menu" class="arrow">Horizontal Web Menu</a>
                    <div class="drop decor4_2 dropToLeft2" style="width: 500px;">
                        <div class="left">
                            <b>SHOPPING TOOLS</b>
                            <div>
                                <a href="#">Build your script</a><br>
                                <a href="#">Review current offers</a><br>
                                <a href="#">See All ...</a>                        </div>
                            <b>RSS FEED</b>
                            <div>
                                <a href="#">Find a location</a><br>
                                <a href="#">Request a test drive</a><br>
                                <a href="#">See All ...</a>                        </div>
                        </div>
                        <div class="left">
                            <b>BE CREATIVE</b>
                            <div>
                                <a href="#">Build your script</a><br>
                                <a href="#">Review current offers</a><br>
                                <a href="#">See All ...</a>                        </div>
                        </div>
                        <div class="left" style="text-align:right; width:160px;">
                            <img src="CSS%20Menu-filer/hd7.png" style="width:128px; height:128px;"><br>
                            Contact Us                    </div>
                    </div>
              </li>
            <ul>
          </ul></ul>

     

    I need some help with making the XSLT to generate the menu items.

    Thank you, any help would be appreciated.

  • Charles Afford 1163 posts 1709 karma points
    Mar 09, 2013 @ 23:08
    Charles Afford
    0

    Hey, could you show us your structure in Umbraco, what you will need is some conditional for-each loops :) Charlie :)

  • Charles Afford 1163 posts 1709 karma points
    Mar 10, 2013 @ 10:43
    Charles Afford
    0

    Hi, in additon, what you would need to do is look at your content tree and find the top most node to each of the menu sections you wish to render.  You then need to use something like:

    GetDescendants(pass in some condition)

    This will allow you to get each item under a section.

    From there you can just use xslt to get the node properties to render out each item.

    Hope this helps :)

    Charlie :)

  • Joachim 16 posts 36 karma points
    Mar 12, 2013 @ 09:58
    Joachim
    0

    I have tried but failed so far.

    First, make content a level a in the same li tag as it's sub elements.
    Next, make rest of the sub elements under the master content holder.
    After that, if level = 2 then follow this template to make the div and insert text with b tag.
    Then, if level = 3 make a simple link.

    should be simple, right? no somewhere I just screw up in the xslt and bam, useless html junk code.

  • Charles Afford 1163 posts 1709 karma points
    Mar 13, 2013 @ 14:31
    Charles Afford
    0

    Could you tell me what you are getting rendered from your xslt at the moment if anything atall?

  • Joachim 16 posts 36 karma points
    Mar 14, 2013 @ 12:51
    Joachim
    0

    So far this:
    <?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" exclude-result-prefixes="msxml
    umbraco.library">

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

        <xsl:param name="currentPage"/>

        <!-- update this variable on how deep your navigation should be -->
        <xsl:variable name="maxLevel" select="3"/>

        <xsl:template match="/">

            <ul class="menuTemplate4 decor4_1">
                <li><a href="/">Home</a></li>
                <xsl:call-template name="drawNodes">
                    <xsl:with-param name="parent" select="$currentPage/ancestor-or-self::* [@level=1 and @isDoc]"/>
                </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 or umbraco.library:IsLoggedOn() = 1)">
               
               
                <xsl:for-each select="$parent/* [@isDoc and string(umbracoNaviHide) != '1' and @level &lt;= $maxLevel]">
                 <!--lv 1 -->
                 <xsl:if test="@level &lt;= 1">
                    <li>
                        <a href="{umbraco.library:NiceUrl(@id)}">
                            <xsl:value-of select="siteTitle"/>
                        </a>
                        <xsl:if test="count(./* [@isDoc and string(umbracoNaviHide) != '1' and @level &lt;= $maxLevel]) &gt; 0">
                            <div class="drop decor4_2">
                                <xsl:call-template name="drawNodes">
                                    <xsl:with-param name="parent" select="."/>
                                </xsl:call-template>
                            </div>
                        </xsl:if>
                    </li>
                  </xsl:if>
                   
                 <!--lv 2 -->
                    <xsl:if test="@level = 2">
                    <div class="left">
                        <a href="{umbraco.library:NiceUrl(@id)}">
                            <xsl:value-of select="siteTitle"/>
                        </a>
                        <xsl:if test="count(./* [@isDoc and string(umbracoNaviHide) != '1' and @level &lt;= $maxLevel]) &gt; 0">
                            <div>
                                <xsl:call-template name="drawNodes">
                                    <xsl:with-param name="parent" select="."/>
                                </xsl:call-template>
                            </div>
                        </xsl:if>
                    </div>
                  </xsl:if>
                 <!--lv 3 -->
                <xsl:if test="@level &lt;= 3">
                        <a href="{umbraco.library:NiceUrl(@id)}">
                            <xsl:value-of select="siteTitle"/>
                        </a>
                    <br></br>
                        <xsl:if test="count(./* [@isDoc and string(umbracoNaviHide) != '1' and @level &lt;= $maxLevel]) &gt; 0">
                            <div>
                                <xsl:call-template name="drawNodes">
                                    <xsl:with-param name="parent" select="."/>
                                </xsl:call-template>
                            </div>
                        </xsl:if>
                  </xsl:if>
                   
                   
                </xsl:for-each>
               
               
            </xsl:if>
        </xsl:template>
    </xsl:stylesheet>

    output:
    <ul class="menuTemplate4 decor4_1"><li><a href="/">Home</a></li><div class="left"><a href="/services.aspx">Services</a><div><a href="/services/ships.aspx">Ships</a><br></div></div><a href="/services.aspx">Services</a><br><div><a href="/services/ships.aspx">Ships</a><br></div></ul>

    Umbraco content tree:
    Home
          - Services
                - Ships

    So it is not working, really need some help here :)

  • Charles Afford 1163 posts 1709 karma points
    Mar 17, 2013 @ 20:51
    Charles Afford
    0

    Sorry i had missed you had replied.  Did you manage to get this sorted? Charlie :)

  • Joachim 16 posts 36 karma points
    Mar 18, 2013 @ 16:11
    Joachim
    0

    No, I still can't figure out how to fix this.

    Could you look at my script above and point me in the right direction?

Please Sign in or register to post replies

Write your reply to:

Draft