UI problem solving on mobile devices can be quite a challenge when it comes to navigation. A simple Google search for “Responsive navigation” will yield countless possible navigation formats that web developers have used so far.
We’ve recently taken on some responsive projects where we had to make some fairly large navigation work on mobile devices as well. One site in particular is The Catholic Health Association of the United States: http://www.chausa.org.
A long vertical navigation accessible through scrolling is what we aimed to accomplish in this case, allowing the user to navigate to just about any page on the site right from the home page.
Taking this a step forward, I’ve set up a demo of how this concept can work with an expanding navigation.
The scrollbar itself is hidden by the overlapping content that’s pushed off to the right.
By toggling a class on the body, the content gets pushed aside to reveal the hidden navigation. The content doesn’t fully leave the page but remains somewhat visible for two reasons:
- It slightly overlaps the navigation behind the content and will hide the unwanted scrollbar from view
- it serves as a trigger to pull the content back into full view when clicked on
Since we are dealing with big navigation in this example, the content is fixed on the screen and does not scroll along with the navigation. Doing it this way makes it less distracting for the user. It also ensures that it stays in view in the event that the navigation becomes longer than the page itself.
The +/- button is used to reveal additional sub menus in the navigation. This treatment gives the user two options on a given item with sub menu. They can:
- click on the text to go to its landing page, or
- click its expand button to see additional options within that section.
Have you worked on a big project optimized for mobile? Please share if you have!