Into the Navigation system

Supermint offers a unique and attractive navigation system. It can seduce the eye and adds incredible gains to the layout of your site. The navigation can be displayed in three different ways according to the needs of the page.
A custom Page Attribute adjusts the display to show child pages underneath a given top-level page.

 

One ? No, Two complete solutions!

Supermint provides two navigation solutions to allow you create rich user interfaces. Both are responsive and provide a different effect on small screen. Both can display autonavs AND mega-menu that represents a Stack. Take a look on the the description to make your choice. (Hint: the words "mega-menu" are marked as "alternate" style in the Content Block editor)

Sliding nav

The first is the sliding navigation, an original effect where the full page slides down to reveal the subnavs. These subnavs can be displayed in 3 different ways, take a look on the case studies below. This system provide options as :

  • the event (click or hover)
  • Opened on page load or not
  • The number and margins of columns
  • different speed effect
  • The mode (always lateral or responsive)
  • ...

Obviously, these options are adjustable from the dashboard, without touching any underlying code.

The Dropdown mega menu

The second system is a more classic two level dropdown with mega menu capabilities. The color of the dropdown is inherited from the top navigation. This is a css only dropdown that is light on brandwidth and javascript execution. It provides options such as the number of columns to display. 

Demo Dropdown

Are you saying Mega menu ?

Both systems can display rich dropdown content. The mega-dropdown is just the display from a Stack on your dashboard. The system shows one stack by columns (with the normal stack capabilities for assembling blocks on top of each other for certain columns) and can display the block name optionally.

How do I create the mega menu? Placing a stack as mega drop down is easy

Keep in mind the ID of the top page parent (sitemap, click on the page and look at the properties, The ID number is right next to the name. Then create a stack named "mega_menu_{ID}" So if the ID of your parent page is 146, create a stack named mega_menu_146.

Then, add block to the stack. On each block you can click and choose "custom template" to name your block. This name can be otpionally displayed on top of the block, into the mega menu.

Each block is rendered in a column. To stack different block down the previous, start the name of the block by "-follow-". In this case the block will be rendered UNDER the previous. So a block you want to call "Our Features" call it "-follow-Our Features" to place it under the previous.

I think is the easy way to create content rich layouts using the mega menu. If you think about any improvements, let me know !

Case study

Imagine a site with four top-level page:

Home, About, Work and Services.

The home page has no children. The attribute is left unchanged (fig 1).

The about page contains three sub-pages. We will use here the type 1, qi appear in these pages with a small description.

The Work page, it contains four subpage containing itself several sub pages: category pages (level2) and pages of work (level3). In this case we use the type2 that displays the categories belonging and work there.

Finally, the Services page that contains a large number of services. We use here the type 3 to display a large number of pages at level 2. This type of navigation is also suitable for products of ecommerce, a portfolio, articles, ...

3 navigation displaying system

Type 1 (L12 with description)

This structure allows you to view the pages of the second level with a short description. It is recommended when the number of pages is limited.

Type 2 (L123)

This structure allows you to view the pages of the second level and the third level with a nice bulleted animation.

Type 3 (L12)

This structure allows you to view a large number of second level pages.