14 Replies Latest reply on Aug 14, 2014 1:55 PM by Charu10

    Create a dropdown menu in top nav

    Yoojay

      I am trying to create a new dropdown menu named "Links" to our top nav. I have successfully created it the menu item, but when I click on it, it just shows "Loading...." for a second then does nothing. I want the dropdown to contain a list of quick links that are currently being listed in an HTML widget on the page. I have included a screenshot and the code of the custom-navbar.soy file in the attached Word document. Here is the code I'm trying (code added for the new menu item is in RED):

       

      /**
      */
      {template .customNavbarMenus}
      <!-- ENGLISH -->
      <nav id="custom-nav" userlang="en" role="navigation" aria-label="Jive">
                      <ul class="j-globalNav">
                                      <li class="j-ui-elem custom-nav" role="menuitem" menu-id="links-menu-home" aria-haspopup="true">
                                                                      <a href="#" class="j-globalNavLink j-ui-elem"><span class="nav-link j-ui-elem">Links<span class="j-ui-elem j-nav-more"></span></span></a>
                                                                      <div id="links-menu-home" class="j-nav-menu j-menu j-pop-main custom-nav-menu" style="display: none;">
                                                                                      <ul>
                                                                                                      <li><a href="https://login.steelcase.com/sso/Concur.aspx">Concur</a></li>
                                                                                                      <li><a href="http://sapportal.steelcase.com/irj/portal/ess">ESS/MSS</a></li>
                                                                                                      <li><a href="http://mar.steelcase.com/">MAR</a></li>
                                                                                                      <li><a href="https://login.steelcase.com/sso/carlson.aspx">Travel</a></li>
                                                                                                      <li><a href="http://my.steelcase.com/">SharePoint MySite</a></li>
                                                                                                      <li><a href="http://sapportal.steelcase.com/irj/portal/ss">SupplySync</a></li>
                                                                                                      <li><a href="https://village.steelcase.com">Village</a></li>
                                                                                      </ul>
                                                                      </div>
                                      </li>
                                      <li class="j-ui-elem"><a class="j-globalNavLink j-ui-elem" href="{buildUrl('/community/resources')}">Resources</a></li>
                                      <li class="j-ui-elem"><a class="j-globalNavLink j-ui-elem" href="{buildUrl('/community/company')}">Company</a></li>
                                      <li class="j-ui-elem"><a class="j-globalNavLink j-ui-elem" href="{buildUrl('/community/news')}">News</a></li>
                                      <li class="j-ui-elem"><a class="j-globalNavLink j-ui-elem" href="{buildUrl('/community/breakroom')}">Breakroom</a></li>
                                      <li class="j-ui-elem"><a class="j-globalNavLink j-ui-elem" href="{buildUrl('/community/help')}">Help</a></li>
                      </ul>
      </nav>


                     
      {/template}

       

      Thanks for any advice anyone can provide.

       

      John


        • Re: Create a dropdown menu in top nav

          John Finch - I spoke with a senior developer at Jive about this and he said you are on the right track.  You'll need to debug through the JS code on a working version vs. this non-working one - and see if you can identify the error/issue preventing this from working properly.  If you think about it - comparison of a successful drop-down (in Village?) vs. this unsuccessful version & the logs, could provide insight into what's preventing this from being successful.

           

          Alternatively...of course, there's always PS.  Please let me and/or Bill Klco know if you'd like to pursue that and we'll queue up a chat with them.  Thanks.

          • Re: Create a dropdown menu in top nav

            Bill Klco - Please investigate a PS quote for this work to assist John in making this nav change in Spark to mimic that in Village.  Thanks!

              • Re: Create a dropdown menu in top nav

                Hi John - I put in the PS request in for this. I will let you know as soon as I hear back.

                  • Re: Create a dropdown menu in top nav
                    Anthony Mack

                    Hey John Finch -

                     

                    I am a PS UI Developer assigned to your question.  It looks like your custom theme is missing some JavaScript, we use a custom click function to show the popover menu.  See the code below:

                     

                    $j(document).ready(function() {

                        $j(".custom-nav[aria-haspopup='true']").children("a").click(function(e) {

                            var popContext = $j(this);

                            var popMenu = popContext.parent().attr("menu-id");

                            customClickMenu(popContext,popMenu);

                            e.preventDefault();

                        });

                    });

                     

                    // Custom Menu

                    function customClickMenu(popContext,popMenu) {

                        if (popContext.hasClass("active")) {

                            $j("#"+popMenu).trigger("close");

                        } else {

                            $j("#"+popMenu).popover({

                                onLoad: function() {

                                    popContext.addClass("active");

                                },

                                container: popContext.parent(),

                                context: popContext,

                                destroyOnClose: false,

                                putBack: true,

                                hoverSelection: true,

                                onClose: function() {

                                    popContext.removeClass("active");

                                }

                            });

                        }

                    }

                    I have added this into footer-javascript.ftl in UAT for the time being, but it should probably be moved to global.js.  It also looks like some style adjustments are needed to get the menu to display a bit cleaner.

                     

                    Thanks!