Tips and Examples to Improve the Navigation Exprerience via Submenus
Tips and Examples to Improve the Navigation Exprerience via Submenus
Uno degli strumenti usati per migliorare la navigation exprerience è il Submenu. Ve ne sono di diversi tipi e per diversi usi. Alcuni li conoscevamo, altri ci hanno sorpreso per la loro originalità. Possono essere creati usando CSS e jQuery così da ottenere risultati straordinari. Di seguito vi forniamo alcuni Consigli ed Esempi per poterli usare in modo adeguato.
Mega Drop-Down Menu
One of the last trend of the web design, the Mega Drop-Down Menu realized with jQuery and CSS.
Submenu on Photo
Another solution is to place the submenu on a photo. You can make it using the z-index property. The result can be amazing (following example).
Simple Side Menu
The simplest way to use a submenu: side menu. You can create it with a CSS List.
Side Menu with Submenu
You can add others links in a submenu of the main side menu.
Adding Previews in a Side Submenu
The evolution of the previous solution is to integrate a preview about your link. In the following example you can see a preview of one of the internal page of the Porsche's website.
See "Easiest Tooltip and Image Preview Using jQuery" to know how realize it.
Vertical Graphic Submenu
Another impressive submenu, full graphic.
Submenu with icons
The following example shows you how you can use the icons to have great Submenu. Users will use icons to navigate in your page or category and they will always have available the main menu.
Cascade Submenu
A Drop-Down Menu alternative.
Elegant and Simple Solution for Submenu: Inline Links
If yuo want something that can be elegant and not intrusive, choose the inline submenu (following example).
Useful Indicator to understand where you are
Can be useful for users always know where they are, so you can implement it also for your submenu.
Other Submenu Examples
Need more? Follow us on Twitter! Every day News and Resources not published in our blog.