Copied to clipboard

Flag this post as spam?

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


  • Stef Dijksman 9 posts 29 karma points
    Nov 01, 2010 @ 10:08
    Stef Dijksman
    0

    how do i make a drop down menu with sitemap?

    hey guys!

    im using umbraco for a while now and its really good but i just dont understand one thing..
    how do you make a submenu? i found out that the sitemap xslt would work the best and it does but now i have to make a dropdown menu outof it. so for my css i wanted to give the ul that is going to be the submenu a class as a name but after trying several things.. it didnt give the ul the class name. what did i do wrong?..

    this is my xslt:

    ------------------------------------------------------------------------------------------------------------------------------------------------

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

    <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><xsl:for-each select="$parent/* [@isDoc and string(umbracoNaviHide) != '1' and @level &lt;= $maxLevelForSitemap]">
      <li>  
    <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">   
    <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>

    -------------------------------------------------------------------------------------------------------------------------------------------------

    i did no changes .. just the plain sitemap xslt. i now need to make a choose that looks if the level is 2(thats the base level because the website is in a folder) and if it is higher it should give the class="under" to the ul

     

    can someone help me with this? i have looked everywhere but i can't find it!

    Thanks in advance,


    Stef

  • Stef Dijksman 9 posts 29 karma points
    Nov 01, 2010 @ 11:30
    Stef Dijksman
    0

    i got a litle further with a css that i found. It makes the dropdown menu's but i got stuck with the way the sitemap formats the html code. (i dont need to give the ul's a name anymore now so that question is irrelevant now)

    i now get this list structure:

    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    <div id="menu">
    <ul> (complete menu)
       <li>
          <a>hello</a>
          <ul>
               <li>
                   <a>2nd link</a>
               </li>
          </ul>
       </li>
       <li>
       <li>
    </ul>
    </div>

     

    This isn't what i want... i want the output to be like the following:

    <div id="menu">
       <ul>
          <a>hello</a>
          <ul>
               <li>
                   <a>2nd link</a>
               </li>
          </ul>
       </ul>
       <ul>
       <ul>
    </div>

     

    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    so i would like to have the first (top) menu items to be a ul.. but i cant get this with my xml as it is now.

    my css is like this for people who are interested:

     

    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    /**************** menu coding *****************/
    #menu {
    width: 100%;
    background: #eee;
    float: left;
    }

    #menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 12em;
    float: left;
    }

    #menu a, #menu h2 {
    font: bold 11px/16px arial, helvetica, sans-serif;
    display: block;
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #888 #555 #bbb;
    margin: 0;
    padding: 2px 3px;
    }

    #menu h2 {
    color: #fff;
    background: #000;
    text-transform: uppercase;
    }

    #menu a {
    color: #000;
    background: #efefef;
    text-decoration: none;
    }

    #menu a:hover {
    color: #a00;
    background: #fff;
    }

    #menu li {position: relative;}

    #menu ul ul {
    position: absolute;
    z-index: 500;
    }

    #menu ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
    }

    div#menu ul ul,
    div#menu ul li:hover ul ul,
    div#menu ul ul li:hover ul ul
    {display: none;}

    div#menu ul li:hover ul,
    div#menu ul ul li:hover ul,
    div#menu ul ul ul li:hover ul
    {display: block;}


    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------


    so.. if some1 knows what to edit or how to make it work.. i would be very thankfull!


    Stef

  • Stef Dijksman 9 posts 29 karma points
    Nov 01, 2010 @ 12:29
    Stef Dijksman
    0

    found a solution!!

    I made a for each loop inside my otherwise that did the same as the standard sitemap xslt and it did the trick with my  previous css. it works with multiple sub menus =]


    my xslt sceme looks like this at the moment:

    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

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

    <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="/">

    <xsl:call-template name="drawNodes">  
    <xsl:with-param name="parent" select="$currentPage/ancestor-or-self::* [@isDoc and @level=1]"/>  
    </xsl:call-template>

    </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 string(umbracoNaviHide) != '1' and @level &lt;= $maxLevelForSitemap]">
      <xsl:choose>
        <xsl:when test="@level = 2">
          <ul>
          <li>  
    <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">   
    <xsl:call-template name="drawNodes">    
    <xsl:with-param name="parent" select="."/>    
    </xsl:call-template>  
    </xsl:if>
    </li>  
        </ul>
        </xsl:when>
        <xsl:otherwise>
        
          <ul>
          <xsl:for-each select="$parent/* [@isDoc and string(umbracoNaviHide) != '1' and @level &lt;= $maxLevelForSitemap]">
            <li>  
    <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">   
    <xsl:call-template name="drawNodes">    
    <xsl:with-param name="parent" select="."/>    
    </xsl:call-template>  
    </xsl:if>
    </li>  
          </xsl:for-each>
        </ul>      
        </xsl:otherwise>
      </xsl:choose>
    </xsl:for-each>
    </xsl:if>
    </xsl:template>
    </xsl:stylesheet>


    ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

     

    its a bit messy now.. but i guess you can figure it out. if you dont get a part of my xslt, just ask and ill explain it!

     

    Stef

  • Stef Dijksman 9 posts 29 karma points
    Nov 01, 2010 @ 16:04
    Stef Dijksman
    0

    it seems that my xml makes the ul for the dropdown everytime he sees an subpage.. so it doesnt work correctly yet... 

    i was hoping i had the solution but it doesnt work as i hoped.. with the css you won't see the duplicate submenu, but it is there. is there some way i can just call the template one time in the loop and not every time he sees a subpage?

     

    Stef


    Edit:

    I fixed the duplicates via adding a template that just uses the code once.

    it looks like this now:

    ------------------------------------------------------------------------------------------------------------------------------------

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

    <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="5"/>

    <xsl:template match="/">

    <xsl:call-template name="drawNodes">  
    <xsl:with-param name="parent" select="$currentPage/ancestor-or-self::* [@isDoc and @level&gt;=1]"/>  
    </xsl:call-template>

    </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 string(umbracoNaviHide) != '1' and @level &lt;= $maxLevelForSitemap]">
          <xsl:choose>
            <xsl:when test="@level = 3">
              <ul>
                <li>  
                  <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">   
                    <xsl:call-template name="subnavi">    
                      <xsl:with-param name="parent" select="."/>    
                    </xsl:call-template>  
                  </xsl:if>
                </li>  
              </ul>
            </xsl:when>
            <xsl:otherwise>
              
            </xsl:otherwise>
          </xsl:choose>
        </xsl:for-each>
      </xsl:if>
    </xsl:template>
        
        <xsl:template name="subnavi">
         
          <xsl:param name="parent"/>
           <ul>
                <xsl:for-each select="$parent/* [@isDoc and string(umbracoNaviHide) != '1' and @level &lt;= $maxLevelForSitemap]">
                  
                  <xsl:variable name="urlLink">
                    <xsl:value-of select="externalUrl"/>
                  </xsl:variable>
                  
                  <xsl:variable name="PaginaNaamVar">
                    <xsl:value-of select="paginaNaam"/>
                  </xsl:variable>
                  
                  <xsl:choose>
                    <xsl:when test="$urlLink !='' and $PaginaNaamVar !=''">
                      <li>  
                    <a href="{$urlLink}">
                      <xsl:value-of select="@nodeName"/>
                    </a>  
                    <xsl:if test="count(./* [@isDoc and string(umbracoNaviHide) != '1' and @level &lt;= $maxLevelForSitemap]) &gt; 0">   
                      <xsl:call-template name="subnavi">    
                        <xsl:with-param name="parent" select="."/>    
                      </xsl:call-template>  
                    </xsl:if>
                  </li>  
                    </xsl:when>
                    <xsl:otherwise>
                      <li>  
                    <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">   
                      <xsl:call-template name="subnavi">    
                        <xsl:with-param name="parent" select="."/>    
                      </xsl:call-template>  
                    </xsl:if>
                  </li>  
                    </xsl:otherwise>
                  </xsl:choose>
                  
                 
                </xsl:for-each>
              </ul>      
        </xsl:template>
    </xsl:stylesheet>

    ------------------------------------------------------------------------------------------------------------------------------------

    Sorry for spamming this much! I just wanted to share because i see alot of people with the same problem.

    this xslt works with the following tree structure in your content btw:

    content
    -WebsiteFolder   (is used just as a containing folder because i am working with mutliple sites)
    --WebsiteDutch
    ---Page1
    ----SubPage1
    --WebsiteGerman
    ---Page1
    ----SubPage1
    --WebsiteEnglish
    ---Page1
    ----SubPage1

    so thats why the level is 3 in the test and that the parent isnt 1  but greater or equal to 1 (you have to set the webiste homepages like websitedutch and websitegerman true with the variable umbracoNaviHide to hide those)

    Stef

  • satish suthar 1 post 21 karma points
    Jun 01, 2012 @ 08:01
    satish suthar
    0

    <?xml version="1.0" encoding="utf-8"?>

    <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:map="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0"

    exclude-result-prefixes="map">

      <xsl:output method="xml" encoding="utf-8" indent="yes"/>

     

        <xsl:template match="map:siteMapNode">

          <li>

            <a href="{@url}" title="{@title}">

              <span class="icon">

                <img src="../Images/Icons/application_double.png" alt="NA" />

              </span>

              <span>

                <xsl:value-of select="@title"/>

              </span>

            </a>

            <xsl:if test="map:siteMapNode">

              <ul id="SubMenu">

                <xsl:call-template name="mapNode"/>

              </ul>

            </xsl:if>

          </li>

        </xsl:template>

     

        <xsl:template name="mapNode" match="/*/*">

          <xsl:apply-templates/>

        </xsl:template>

      </xsl:stylesheet>

    This will take care of nested list view. It is the simple one I could have posted for you. Hope it will help.

Please Sign in or register to post replies

Write your reply to:

Draft