SharePoint Responsive Top Navigation Menu

Animation Responsive Menu

I started building this menu by following the steps in the blog Responsive Top Navigation Menu written by Luis Kerr (It's a really great post ). However, while building the menu to match my requirements, I found a couple of improvements.

The intention of this article is to share the improved version of the CSS (attached) & JS script (script snippet) as another example for responsive top navigation. Here, I’m not trying to explain the steps; please refer to the original blog for a detailed explanation.

Improvements

  • Styling for simple Header (no link)

    • All styles are defined around anchor <a> tag. So, when a simple header with no link is added to the navigation, styles are not getting applied. I have made some CSS changes to apply the styles for <span> & <li> tag instead of anchor tag alone.

  • Styles for selected & hover backgrounds for parent <li> item.

  • Replace nav Client ID

    • The script in the master page is used to replace annoying IDs with a static ID. It is very strange that ASP menu keeps changing its client ID. So far, I have encountered IDs changing from “#zz09_RootAspMenu” to “#zz13_RootAspMenu”. 

    • Moreover, the quick launch menu also uses a similar ID format. There is always a chance for the conflict. So, hard coding ID in the script is not a good practice.

Top Navigation

Quick launch

 

    • Here is the script that takes care of finding the client ID under the top navigation div.

 

  1. <script type="text/javascript">//<![CDATA[  
  2.        // Replace that changing automatic ul ID  
  3.        //ex:- zz10_RootAspMenu, zz11_RootAspMenu  
  4.        $('[id^=zz][id$=RootAspMenu]''#DeltaTopNavigation').attr("id""myTopNav")  
  5.          
  6.        $(function () {  
  7.            // Mobile  
  8.            $('#myTopNav').before('<div id="menu-trigger">Menu</div>');  
  9.            $("#menu-trigger").on("click"function () { $("#myTopNav").slideToggle(); });  
  10.   
  11.            // iPad  
  12.            var isiPad = navigator.userAgent.match(/iPad/i) != null;  
  13.            if (isiPad) $('#myTopNav ul').addClass('no-transition');  
  14.        });  
  15.        //]]>  
  16.        </script>  

A few points to consider,

  • Works well with the Managed Navigation as the source.
  • Ensure to refer jQuery. 
  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">  
  •  Refer CSS script using CSS registration tag and load it after core15.css.
  1. <!--SPM:<SharePoint:CssRegistration Name="/sites/dev/SiteAssets/topMenu.css" After="corev15.css" runat="server"/>-->  
  • Build this on a fresh site for the first time.
For better understanding of the CSS, I have provided comments for most of the classes. I hope you find this informative.