• Web Design

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.

* * *

Havaianas

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

* * *

CanalSat

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.

* * *

GoMacro

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.

* * *

Hverdags-Reisen

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

* * *

BeoPlay

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.