Menu Category Alternate Display

On a collapsed menu, when you click a category, the other categories disappear and only the current active category is revealed. Useful for FIs with very large sitemaps. Sites of all ages have used approaches like this–feel free to add to the example links if you don’t see something represented.

This script can be placed with your other menu-related items in the scripts.js, within the large function.

// First we dont want the submenus to close on us when clicking a group item
$('.navbar-collapse ul.banno-menu li.dropdown>.dropdown-toggle').on('click',function (e) {
	//e.preventDefault();
  	e.stopPropagation();
  	if($(this).is("a.dropdown-toggle")) {
    	$("nav.navbar .navbar-collapse").toggleClass("open-category");
    	$(this).parents('li').siblings('li.dropdown')
  	}
  	if($(this).hasClass("group-item")) {
    	$("nav.navbar .navbar-collapse").toggleClass("open-group");
  	}
});

$body.on("click", "nav .navbar-collapse.open-group button.navbar__return", function(e){
    e.preventDefault();
    e.stopPropagation();
    $("nav.navbar .navbar-collapse").removeClass("open-group");
    $(".menu-group.showing").removeClass("show").find("li.dropdown").each(function(){
    	$(this).removeClass("showing");
    });
    $('nav.navbar .navbar-collapse .dropdown').removeClass('open active');
});
$body.on("click", "nav .navbar-collapse.open-category button.navbar__return", function(e){
    e.preventDefault();
    if($("nav.navbar .navbar-collapse").hasClass("open-group")===false) {
      	$("nav.navbar .navbar-collapse").removeClass("open-category");
      	$("nav.navbar .navbar-collapse li.dropdown").each(function(){
        	$(this).removeClass("showing open active");
      	});
      	$("nav.navbar .navbar-collapse ul.dropdown-menu").each(function(){
        	$(this).removeClass("show open active");
      	});
    }
});

Example Sites

• Original River Valley (not launched with us in this format) (Menu is always collapsed. Categories on first view, subcategories with “Back” button on second view. Subcategories show dropdown as part of list when clicked rather than going to a third view.)
• First Bank & Trust (aka BankEasy) (Absolutely absurd. Main categories in top nav, subdivided into secondary categories, with pages under that. Menu with sliding in/out views comes in on tablet/mobile, when it collapses.)
• Ohio Valley Bank (2020 remake) (Menu is always collapsed. Categories show initially, then when one is opened, the other categories disappear so that the sub-categories can show. Links show in dropdown rather than opening a third view. A “back to main menu” link is also added on the top which becomes visible when any category is opened.)

Tags: script, scss, sass, jquery, javascript, js, menu, BS2, BS3, BS4