Copied to clipboard

Flag this post as spam?

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


  • Sophie Mitchell 23 posts 43 karma points
    Feb 02, 2012 @ 17:27
    Sophie Mitchell
    0

    How do I create/add a drop down menu?

    Hello - please could someone point me to a video or code so that I can implement a drop down menu on my Umbraco site.

    Thank you

  • Rodion Novoselov 694 posts 859 karma points
    Feb 02, 2012 @ 17:42
    Rodion Novoselov
    0

    Hi. If I understand your question right then Implementing drop-down menu has nothing to do with Umbraco itself - you just render it as regular HTML and then apply to it any drop down menu technics (javascript or CSS) that you like - you can google lots of those.

  • Sophie Mitchell 23 posts 43 karma points
    Feb 03, 2012 @ 12:14
    Sophie Mitchell
    0

    Thanks Rodion - so is there no way to get this working from the normal sub navigation in umbraco?

  • Rodion Novoselov 694 posts 859 karma points
    Feb 03, 2012 @ 12:19
    Rodion Novoselov
    0

    Why not? In a regular site you usually draw somthing like <ul> in your html and then apply some CSS or JS to it to turn it to a drop-down menu. Here's the same with the only difference that you're rendering your <ul> with an umbraco macro.

  • Sophie Mitchell 23 posts 43 karma points
    Feb 03, 2012 @ 12:40
    Sophie Mitchell
    0

    Ok yep I could create the menu using <ul><li> etc but how do I render that using an umbraco macro? Sorry I'm very new to Umbraco and the old cms I used would generate the drop down automatically.

    Thank you 

  • Rodion Novoselov 694 posts 859 karma points
    Feb 03, 2012 @ 15:07
  • Sophie Mitchell 23 posts 43 karma points
    Feb 03, 2012 @ 15:46
    Sophie Mitchell
    0

    Thanks - I've watched the video and I see how the navigation works. But, it just displays the level one items. How do I make it display the 2nd level as well? Thanks, Sophie

  • Rodion Novoselov 694 posts 859 karma points
    Feb 03, 2012 @ 16:05
    Rodion Novoselov
    0

    You can create your Xslt macro from the template which you can use as a start point and modify as you like:

  • Sophie Mitchell 23 posts 43 karma points
    Feb 03, 2012 @ 16:21
    Sophie Mitchell
    0

    Maybe I wasn't clear. I've got a working menu in place. It displays only the top level items all working no problem.

    Through my lack of knowledge with umbraco/xslt etc I don't understand what changes I need to implement to get the 2nd level navigation to display in the menu as well. I'd ideally like it in a dropdown. If you could guide me on that I should be able to control the dropdown with css. Are you able to be more explicit with how I achieve this? Here's the xslt code I have:

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

        <!-- Input the documenttype you want here -->
        <xsl:variable name="level" select="1" />

        <xsl:template match="/">

          
     <ul id="topNavigation">
           <li class="home">
             <xsl:if test="$currentPage/@id = $currentPage/ancestor-or-self::* [@level=$level]/@id">
                 <xsl:attribute name="class">home current</xsl:attribute>
             </xsl:if>
             <a href="/">Home</a>
           </li>
         <xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level]/* [@isDoc and string(umbracoNaviHide) != '1']">
      <li>
         <xsl:if test="@id = $currentPage/@id">
            <xsl:attribute name="class">current</xsl:attribute>
          </xsl:if>
        <a class="navigation" href="{umbraco.library:NiceUrl(@id)}">
          <span><xsl:value-of select="@nodeName"/></span>
        </a>
      </li>
      
      
    </xsl:for-each>

    </ul>
          

        </xsl:template>
        
    </xsl:stylesheet> 

     

     

    Thanks for your patience

Please Sign in or register to post replies

Write your reply to:

Draft