Web Art as It Is: Nonstandard Navigation Menus with CSS3

CSS3 technique raised in the mid of 2000’s and still it’s widely used throughout the web. It’s not surprising, because in spite of quite simple usage CSS3 gives a great variety of opportunities for web designing. As everything popular Cascading Style Sheets gain a certain amount of clichés and therefore nowadays in most cases it is quite common for users and considered as something regular on the web.

However, you should know that all simple things become fantasy if you attach some lighthearted creativeness.CSS3 jobs are not the exception and sometimes we can meet such elements that truly can be named masterpieces. As you could guess this post is totally about such type of internet art: take a look 10 examples of nonstandard navigation menus with CSS3 I have gathered for your inspiration and improvement.

* * *

The Cabin in the Woods

It’s wonderfully designed websites that presents scary film Cabin in the Woods. The menu supports the creepy atmosphere of the website by flashing, splashing and other spooky effects.

* * *

Malika Favre

Malika Favre website navigation can serve as an example of how to unite comfortable surfing and presentation of the visual content.

* * *

The Interactive Ear

This page fully uses allusion to the human biology. And successfully: we can enjoy definitely nonstandard menu.

* * *


Havainas shows a beautiful example of navigation using map. Then, you will be able to check a nice skeuomorphic menu bar.

* * *


Menu navigation here occupies the whole page: it uses fancy pictures structured for user to choose the section one might be interested in.

* * *

Transfer Window

This high tech style menu is aimed specifically for outlining statistics information. And, of course, it looks very nice and solid.

* * *


The impressive style of navigation bar is supported with the prominent look of the general website design, where skeuomorphic concept is connected with pseudo one-page navigation.

* * *

Reunite the River

The originality of this website is incredible. The navigation is naturally built-in the whole parallax scrolling essence of the design and complements the whole toony concept of Reunite the River.

* * *


It’s just a nice drivers website using hamburger menu together with pretty icons and slight actions.

* * *


One more example of menu for parallax scrolling website. It’s minimalist, comfortable and cool.

* * *

As you could see, I’ve tried to include different styles in the list for the digest to be many-sided. Parallax scrolling, one-page, animation, skeuomorphism etc. – everything mentioned above is waiting for you to learn and make creative success in your own projects.

If you know some more original CSS3 navigation menus, please post them in the comments below. Let’s deepen out web erudition together.

About the author:

Art Rivera: Deeply interested in everything connected with Internet, I sincerely suppose the web is the only future reality for the humanity through its inevitable involving into every part of human life. I’m not a great fan of cyberpunk concept, but the world is keeping that certain direction of total connectedness. And of course there should be someone, who can write the history, who would describe and analyze and enter in the record all notable changes and tendencies on the web. Hello, it’s me.

26 May 2016

Micro-interactions: The Interactive Web Design for Screens Big or Small

Micro-interactions are the very foundation of a web design that you create.…

14 May 2013

The Role of Images in Website Design – Powerful Imagery…

Images as a design element have never been given the importance they…

Written by

Allison Reed

Allison is a professional SEO specialist and an inspired author. Marketing manager by day and a writer by night, she is creating many articles on business, marketing, design, and web development. Follow her on LinkedIn and Facebook.

Post Comment

Your email address will not be published.