Layout

Navigation

One key objective of Tower is to eliminate the need for a page full of icons that users have to use to find their way around the control panel. In addition, with cPanel, users are required to jump back to the "icon page" to go to a different section of the control panel. Instead, we want to use an easy-to-navigate left side menu that will help the user get to where they want with a single click. Smooth animation will also be important to give a more "realistic" feel to the navigation instead of stark movements.

Like the layout page indicates, navigation will differ between Xsmall/Small screens and Medium/Large/XLarge screen sizes. Further, the larger screen sizes have the option to reduce the side menu, requiring a third navigation menu approach. All three are outlined below.

Medium Screens and Above Navigation

There are two options for medium screens and above navigation. The first is a 9em wide navigation vertical panel that shows icons and text for each navigation element. The second is a narrower 2em wide panel that shows just icons. Both support multi-tiered navigation panels. Clicking on the logo header section (where the icon is located), will toggle between these to options. Currently it is a jQuery fadeIn/fadeOut toggle, but it needs to be an animated slide to the left/open to the right toggle.

Small Screen Navigation

Small screen navigation is much more difficult to create three-level, multi-tiered navigation. But it is still doable with some creativity. This is done using an "off-canvas" menu that is shown upon user selection of a hamburger icon. Some overlap is required to fit the three menu levels within the viewport in the current method. We'll continue to seek for a better approach to see if it is possible to minimize overlap. For now this is the solution.

While the layout page shows different layouts for iPhone 5 and iPhone 1-4 devices at both portrait and landscape modes, the navigation is the same. The example below will work for all small mobile devices at either portrait or landscape mode — iPhone 5 portrait mode is used as the example.

Click on the hamburger icon to view the menu within the mock mobile device below.