1) Creating the HTML

I’ve seen a few ways to do a nested navigation, there’s many ways of doing it, but with the emphasis on keeping the code lean, I’ll show you how to manipulate each element just by using a single id namely (#nav) on the parent ul element, what’s more I’ll show you how to make it accessible to screen readers and browsers that don’t use javascript! Without further ado let’s create our funktastic accessible navigation with jQuery, so put a brew on and then read on.

To start with copy and paste the HTML below or enter it yourself, this is pretty simple here all we are doing its creating two nested unordered lists. The number of nested lists is up to you, but this example only works with just the one.

More...