none
issues with applying Mega Menu using Managed Navigation RRS feed

  • Question

  • I have been trying to figure out how to get this Menu item to expand wider.

    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/

      I was able to actually get the mega Menu taller and wider, but I'm having an issue with it picking up all the tokens, as per the code below. 
    Also, when you use the managed navigation and the description box like how the article says to use it, it tells me I can not use more then 255 characters.  Is there a way around this? As I need to add more content.

    Article Menu:

    My Mega Menu:

    here is the code from the article:

     <script>
      <style type="text/css">
    .navWrapper
    {
     background-color:gray;
     color:grey;
     width:1000px !important;
     height:1000px;
     text-align:right;
     ;
    }

    .navWrapper a:link, .navWrapper a:visited
    {
     color:white;
    }

    .navWrapperImageDiv
    {
     width:1000px !important;
     ;
     top:10px;
     left:10px;

    }
    .navWrapperImage
    {
     width:1000px !important;
    }

    .navWrapperImageText
    {
    width:1000px;
     text-align:left;
     }

    .navItemsWrapper
    {
     padding-top:0px;
     padding-right:0px;
     width:1000px !important;
     
    }

    UL.featuredNavigation
    {
     width:1000px !important;
    }

    </style>


    </head>

    <body>

    <!--
     Note: I'm injecting jquery here using the google API for development, however there are betetr ways to include jQuery on
     your pages than using this method!
     -->
     
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">

    //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);
    });

    </script>
     
     
     
     
     
      </script>











    • Edited by cowboy2066 Monday, February 27, 2017 10:31 PM
    Monday, February 27, 2017 8:32 PM

All replies