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

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies