Copied to clipboard

Flag this post as spam?

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


  • Grant 6 posts 26 karma points
    Jan 13, 2014 @ 04:57
    Grant
    0

    Dropdown nav question

    I would appriciate any help. the problem I am having is when on a page that would have a dropdown on the root the dropdown no longer works. my xslt is below.

    <?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="html" omit-xml-declaration="yes" />
        <xsl:param name="currentPage"/>
        <!-- Input the documenttype you want here -->
        <xsl:variable name="level" select="1"/>
        <xsl:template match="/">
            <nav class="navbar navbar-default" role="navigation">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="home">
                            <xsl:if test="$currentPage/@id = $currentPage/ancestor-or-self::* [@level=$level]/@id">
                                <xsl:attribute name="class">active</xsl:attribute>
                            </xsl:if>
                            <a href="/">Home</a>
                        </li>
                        <xsl:for-each select="$currentPage/ancestor-or-self::* [@level=$level]/* [@isDoc and string(naviHide) != '1']">
                            <li>
                                <xsl:if test="@id = $currentPage/@id">
                                    <xsl:attribute name="class">active</xsl:attribute>
                                    <xsl:if test="count &gt; 0">
                                        <xsl:attribute name="class">dropdown</xsl:attribute>
                                    </xsl:if>
                                </xsl:if>
                                <xsl:choose>
                                    <xsl:when test="count(./* [@isDoc and string(naviHide) != '1']) &gt; 0">
                                        <xsl:attribute name="class">dropdown</xsl:attribute>
                                        <a class="dropdown-toggle" data-toggle="dropdown" href="{umbraco.library:NiceUrl(@id)}">
                                            <span>
                                                <xsl:value-of select="@nodeName"/>
                                            </span>
                                            <i style="padding-left: 1em;" class="fa fa-caret-down"></i>
                                        </a>
                                        <ul class="dropdown-menu">
                                            <li><a href="{umbraco.library:NiceUrl(@id)}">All</a></li>
                                            <xsl:for-each select="./* [@isDoc and string(naviHide) != '1']">
                                                <li>
                                                    <a href="{umbraco.library:NiceUrl(@id)}" >
                                                        <xsl:value-of select="@nodeName"/>
                                                    </a>
                                                </li>
                                            </xsl:for-each>
                                        </ul>
                                    </xsl:when>
                                    <xsl:otherwise>
                                        <a href="{umbraco.library:NiceUrl(@id)}">
                                        <span>
                                            <xsl:value-of select="@nodeName"/>
                                        </span>
                                        </a>
                                    </xsl:otherwise>
                                </xsl:choose>
                            </li>
                        </xsl:for-each>
                    </ul>
                </div>
            </nav>
        </xsl:template>
    </xsl:stylesheet>
  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Jan 13, 2014 @ 19:26
    Dennis Aaen
    0

    Hi Grant,

    From the code you have posted in your post, I assume you are using Bootstrap as your framework. I have tried to set up an installation and tried your code and the code works fine. So I think that the reason it doesn't  work for you is because you don´t get the javascript called the right way, or maybe missing something styling?

    The template is looks like this:

    <%@ Master Language="C#" MasterPageFile="~/umbraco/masterpages/default.master" AutoEventWireup="true" %>

    <asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
       
    <!DOCTYPE html>
    <html lang="en"><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="shortcut icon" href="http://getbootstrap.com/docs-assets/ico/favicon.png">

        <title>Navbar Template for Bootstrap</title>

        <!-- Bootstrap core CSS -->
        <link href="/css/bootstrap.css" rel="stylesheet">

        <!-- Custom styles for this template -->
        <link href="/css/navbar.css" rel="stylesheet">

        <!-- Just for debugging purposes. Don't actually copy this line! -->
        <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

        <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
      </head>

      <body>

        <div class="container">

            <umbraco:Macro Alias="MainMenu" runat="server" />
     
          <!-- Main component for a primary marketing message or call to action -->
          <div class="jumbotron">
            <h1>Navbar example</h1>
            <p>This example is a quick exercise to illustrate how the
    default, static navbar and fixed to top navbar work. It includes the
    responsive CSS and HTML, so it also adapts to your viewport and device.</p>
            <p>
              <a class="btn btn-lg btn-primary" href="http://getbootstrap.com/components/#navbar" role="button">View navbar docs »</a>
            </p>
          </div>

        </div> <!-- /container -->


        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
          <script src="/scripts/jquery.js"></script>
          <script src="/scripts/bootstrap.js"></script>
     
    </body></html>

    </asp:Content>

    And I use the folders in the Umbraco backoffice to contain my css files and javascript files. As you see I have created an XSLT and inserted the macro where the menu should appear. The XSLT file contains the code from your post.

    I have based my setup using this example: http://getbootstrap.com/examples/navbar/. If you have customized your Bootstrap framework, you need to be sure that the javascript to dropdowns and collapse are included.  

    I hope this can help you.

    /Dennis

  • Grant 21 posts 61 karma points
    Jan 13, 2014 @ 23:08
    Grant
    0

    I am calling the bootstrap cdn's in the head of my master page. The dropdowns work from the "index" (first page) but when in a page with the drop down there is no "dropdown". Should I call the script in the xslt? or use the bootstrap suggested initilzer for the navbar? Thanks again for your help. The cdn's are the whole package in a minified format.

  • Dennis Aaen 4499 posts 18254 karma points admin hq c-trib
    Jan 14, 2014 @ 08:36
    Dennis Aaen
    0

    Hi Grant,

    You should check that the script also are been called on the followling pages, and then you could try to use suggested initilzer for the navbar to see if it goes better. That is what I would try.

    Hope you find a solution.

    /Dennis

  • Grant 21 posts 61 karma points
    Jan 14, 2014 @ 16:06
    Grant
    0

    Thanks for your help man.

Please Sign in or register to post replies

Write your reply to:

Draft