Make Azure Navigation Portal

Question

Guys!

I feel really lost because I would like to replicate the Microsoft Azure Navigation and I don't know how to start on it or If I could make it with plugins.

If you haven't seen yet it is kind of sliding or blade navigation. Every time you press an option, displays the information on the side.

Here are a few screenshots:

I really appreciate any suggestion you could provide me :)

Answer 1

Having re-implemented a layout similar to Azure's, you might look at how the Start Screen demo is implemented in the Metro UI CSS Framework.

Some of the background ideas from this blog and the video at the bottom also lent some additional insight into how the Azure design concept came into being as well.

Ultimately, I made mine similar to how Azure's works in that I have a set of navigation "blades" that stay on the left side and extend out based on options and have a state management system in Angular that largely handles the rest of the blades being rendered horizontally as li elements within a ul. Within each blade is a set of vertically rendered groups that are handled by a position manager to determine placement from top to bottom within the cell.

Similar to Azure, I wrote mine in TypeScript and AngularJS and uses LESS for all the styling. The trickiest part was probably in "genericizing" so much of it so that you don't keep re-writing the wheel but can rather have specific "types" of the blade content you wish to show, then have each dynamically render and retrieve content as they're navigated to.

I've got a number of div elements that effectively keep the height at 100%, then put the navbar at the top. My left-side navigation bar is more the exception since it's usually minimized and just provides routing between the key "portals" of the site. I've got the ul that has an absolute position in the top left, again with a 100% height and each li within it has a size based on several templated sizes (just as Azure has some really narrow blades for settings and larger ones when selecting data from a table). The blade itself is relatively positioned, set to the top-left and has 100% height as well.

Unfortunately, mine doesn't exist on a public-facing site, so I'd be unable to share it for inspiration.