Creative and Development Inspiration 4: Hidden Menus

Google Material Mobile Menus

Today’s post is focusing on code snippets for hidden menus. These could be used on both mobile and large devices. Although they are not particularly attractive menus, I am focusing more on the usability and style. The purpose is to help inspire.

 

Simple multilevel menu

This menu is a code snippet from Cody House. It gives two examples, one plain CSS, the other with JQuery animations. Simple, but user friendly.

https://codyhouse.co/demo/multi-level-accordion-menu/index.html

 

Pure CSS Accordion with Simple Microinteractions

This mobile accordion menu moves icons down as the user selects a different section. The animated micro interactions make the whole experience feel more crafted.

https://codepen.io/jcoulterdesign/pen/OMmZPd

 

Breadcrumb Navigation

This subtle menu gives the user more information when they hover. The effect works really well, however I am dubious about how it would work with touch devices. The menu would have to be touch to show, which adds a touch point. Still a nice effect though.

https://codepen.io/andreasstorm/pen/prWEvj

 

Circular Material Design Menu

I personally don’t like how this menu looks. However, the concept is really slick. This style could be altered to look a bit nicer and really work. I am a fan of the animation though!

https://www.bypeople.com/colorful-material-css-circular-menu/

 

Google Material Inspired Circle

Staying on the Google Material style, here is another simple menu that could be great if styled slightly differently.

https://www.bypeople.com/google-inspired-css-floating-action-button/

 

Menu Overlay Focus Change

This is completely different to menus I am used to seeing. Although it needs some tweaking to work on smaller devices, the effect it great. By moving the cameras focus when the menu is open adds a whole new layer to the site.

https://codepen.io/carasin/pen/aBEZEd

 

CSS & JS Toggle Menu

A bit of an experiment with SVG icons what chage colour when selected. It uses a subtle material transition to make it look dynamic. Really nice for use with a more modern B2C site.

https://codepen.io/chrisgannon/pen/EyaPZZ