none
SharePoint Global Navigation Open when Hovered I need it to be on click RRS feed

  • Question

  • I made a change o the Global SharePoint Nav. I added the  how to Article  for a Mega Nav.

    article:
    https://www.nothingbutsharepoint.com/2013/03/19/how-to-achieve-a-mega-menu-using-out-of-the-box-navigation-in-sharepoint-2013-and-jquery-aspx/

    now the they want the nav to Only open with an onclick.  where right now it opens with a hover/roll-over.

    My question is, do I need to make a change in the master page? or do I need to add the on-click function to the JS code, and if so, How and what code would I add to get the SharePoint Nav to open on a onclick function.


    JS Nav Code:
    //First we need to find all of our DOM elements that are in the Top level navigation
    //and contain the start of the token field.
    $("UL.dynamic span.menu-item-text:contains('~###')").each(function(){
     
    //We then extract the token identifier, removing the ~### and ###~ from either side
    var menuItem = $(this);
    var parentMenuA = menuItem.closest("a");
    var parentMenuUL = menuItem.closest('UL.dynamic');
    var menuToken = menuItem.text().replace('~###','').replace('###~','');
     
    //Then we extract the link to the image, and to the description field (Held in the title attribute)
    var imageUrlHREF = parentMenuA.attr("href");
    var linkUrlText = parentMenuA.attr("title");
     
    //Then we hide the tokenised menu item as the user doesn't need to see it.
    menuItem.hide();
     
    //Now we add an extra class to the Parent UL to apply some CSS
    parentMenuUL.addClass('featuredNavigation');
     
    //And then wrap the original contents of the menu in an extra div to make styling them into the top right hand corner easier
    parentMenuUL.wrapInner("<div class='navItemsWrapper'/>").wrapInner("<div class='navWrapper' id='" + menuToken +  "'></div>");
     
    //Finally we build the Featured image with the data from the navigation item
    var imageDiv = "<div class='navWrapperImageDiv'><img class='navWrapperImage' src='" + imageUrlHREF + "' alt='Featured Image'></img>" +
        "<div class='navWrapperImageText'>" + linkUrlText + "</div></div>";
     
    //And then inject it into the top of the navigation object using the prepend instruction.
    $('#' + menuToken).prepend(imageDiv);
    });

     

    • Edited by cowboy2066 Friday, March 3, 2017 3:39 PM
    Friday, March 3, 2017 3:39 PM

All replies

  • Hi,

    You can use jQuery .click() method to achieve it.

    $("#target").click(function() {
      alert( "Handler for .click() called." );
    });
    

    https://api.jquery.com/click/

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Monday, March 6, 2017 2:16 AM
    Moderator
  • Dennis

    thx, for responding, but when I try to apply that click(function(){

    it doesn't do anything, it actually break the code.

    any ideas on how to get the main code above to work with an on click instead of the  built in rollover open?

    that is all I really need to solve is the native rollover , change it to onclick.. is there some JS or JQuery that overrides the built in rollover on the nav?



    • Edited by cowboy2066 Monday, March 6, 2017 6:54 PM
    Monday, March 6, 2017 6:53 PM
  • Hi,

    Please add the following jQuery code snippet into your code to achieve it. It works in my test environment.

    $("ul li.dynamic-children").css("cursor", "pointer");
    $("ul.static li.static.dynamic-children").hover(function() {
    	$(this).children(":first").next("ul.dynamic").hide();
    });
    $("ul li.dynamic-children").click(function() {
    	$("ul.dynamic").show();
    });

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    • Marked as answer by cowboy2066 Tuesday, March 7, 2017 7:00 PM
    • Unmarked as answer by cowboy2066 Tuesday, March 7, 2017 7:01 PM
    • Marked as answer by cowboy2066 Tuesday, March 7, 2017 7:01 PM
    • Unmarked as answer by cowboy2066 Wednesday, March 8, 2017 11:17 PM
    • Proposed as answer by Patrick_LiangModerator Friday, March 10, 2017 8:43 AM
    Tuesday, March 7, 2017 8:35 AM
    Moderator
  • the code doesn't stay open long enough to click the drop down nav under it.

    in IE it wont stay open if you move the mouse, chrome and firefox it is shaky on how long it stays open.

    $("ul li.dynamic-children").css("cursor", "pointer");
    $("ul.static li.static.dynamic-children").hover(function() {
     $(this).children(":first").next("ul.dynamic").hide();
    });
    $("ul li.dynamic-children").click(function() {
     $("ul.dynamic").show();
    });



    • Edited by cowboy2066 Wednesday, March 8, 2017 11:19 PM
    Wednesday, March 8, 2017 11:19 PM
  • Hi,

    Please modify the CSS style like this:

    UL.featuredNavigation
    {
    	width:280px !important;
            top:17px !important;
    }

    Best Regards,

    Dennis


    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, March 9, 2017 2:38 AM
    Moderator