The best way to design and manage navigation menus in web applications
I am creating one of my first web applications and I found some problems in managing dynamic navigation menus. In particular, I don't know what is the best way (or almost a good way) to set a different css class for the current navigation element when the user navigates to the page.
I have a menu with two levels, as you can see in this screenshot:
screenshot of navigation http://www.meiaweb.com/progetti/img/navigation_ads_small.png
Sample html behind screenshot:
<ul id="navigation">
<li>
<a href="#" title="Home Page">Home</a>
</li>
<li>
<a href="#" title="Gestione Aree di Servizio">Aree di Servizio</a>
</li>
<li class="mainmenu"><a class="open" href="#">Anagrafica Servizi</a>
<ul style="display: block;" class="submenu">
<li><a href="#" title="Elenco Servizi">Elenco Servizi</a></li>
<li><a href="#" title="Crea un nuovo Servizio">Nuovo Servizio</a></li>
<li><a href="#" title="Visualizza elenco dei Brand" class="open">Elenco Brand</a></li>
<li><a href="#" title="Crea un nuovo Brand">Nuovo Brand</a></li>
<li><a href="#">Genera nuovo report servizi</a></li>
</ul>
</li>
Basically, I add the server side "open" css class in the current menu item. To do this, I set var currentItem to the fallback bean and check all menu items if the item title is currentItem var every time the navigation menu is loaded. (the technology used in this application is JSF, but I guess it doesn't matter here).
If the open class is applied to the mainmenu element, it has a blue background. When applied to a submenu item, it is in blue and bold.
Also, if the current element is a submenu item , I add through a jQuery script a class exposed to its parent and show a list where the subelement is (style = "display: block;").
I suspect there are better ways to manage navigation menus like this, and I ask you web developers if you have some best practices or patterns for designing and managing navigation menus.
Thanks in advance.
(spelling corrections are welcome)
source to share
The problem I see with your method is mixing server code and jQuery code as it can become difficult to maintain.
In your menu, I would do it all with jQuery, exporting currentItem
var to javascript and adding classes from now 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 menu flickering on slow machines or older browsers, but it really depends on your actual jsf code generating the menu to know how tricky it is to do it all on the server side.
source to share
You should rely on CSS for this. The only class name you need is current for the current pages.
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 are using CSS correctly. JavaScript should not be used to apply styles. It should only be used to show / hide submenus. However, it shouldn't show / hide by adding a css property display: block | none. It should just add or remove the .expanded name.
source to share
To begin with, you should use "current" instead of "open", because the latter is semantically better .
Second, you shouldn't apply 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 server-side sub-element (presumably somewhere in your for-loop). Once the parent and nested menu item has a "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 to check the current element is not the best approach, as changing the menu title would require rewriting the code, which is a very rigid design. Adding new menu items will require adding new terms or expanding the switch chassis. If you can, try using URL stitches to compare the current page, which will make URLs friendly. For example / projects / design / for the Project> Design submenu.
source to share