Best way to design and manage a navigation menu in web applications

Answer 1

The problem I see with your method is mixing server code and jQuery code, as it can become difficult to maintain.

With your menu, I would do it all with jQuery, exporting the currentItem var to javascript and adding classes from then on.

 var currentItem = 'Visualizza elenco dei Brand';

    $(document).ready(function(){
  var currentAnchor = $("a[title='" + currentItem + "']");
  currentAnchor.addClass("open");
  currentAnchor.parents("ul").show();
  currentAnchor.parents("li.mainmenu").children("a").addClass("open");
 });

If you go all server side you eliminate the flickering of the menu in slow machines or old browsers, but it really depends on your actual jsf code generating the menu to know how difficult is to do it all on server side.

Answer 2

You should rely on CSS for this. The only class name you need is .current for pages that are current.

ul { /* level one list container */ }
ul li { /* level one list items */ }
ul li a { /* level one list items anchors */ }

ul ul { /* must override each level one container styles */ display: none; }
ul ul.expanded { display: block; }
ul ul li { /* must override each level one list item styles */ }
ul ul li a { /* must override each level one list items anchors */ }

You don't need to use .open or .submenu if you use CSS properly. The JavaScript should not be used to apply styles. It should only be used to show/hide the submenu. Even so, it should not show/hide by add the css property display:block|none. It should just add or remove the .expanded class name.

Answer 3

For starters, instead of "open" you should use "current" because the latter is semantically better.

Secondly, you should not be applying the class name to the parent class using Javascript--it's completely unnecessary and hacky. Instead you should add class="current" to both the parent element and the sub-element on the server-side (presumably somewhere in your for-loop). Once the parent and nested menu item both have the 'current' class you can style them using li.current {background:blue} and li li.current {background:none; color:blue; font-weight:bold}.

Also, comparing the title for checking the current item is not the best approach because changing the menu title will require you to rewrite your code which is just very rigid design. Adding new menu items will require you to add new conditions or extend your switch cases. If you can, try to use URL slugs to compare which page is current which will make the URLs friendly as well. For example /projects/design/ for the Projects > Design sub-menu item.