Wednesday , 20 September 2017
Home » Inspiration » 29 Creative Use of Side Menus in Websites
bateaux side menu in websites

29 Creative Use of Side Menus in Websites

Web design is a rapidly changing field, we all know that. Latest trends become obsolete here and new experiments are conducted every once in a while. That is why we can’t take any part of a website for granted. For instance, we generally assume that the primary menu of a website will be on top of other contents, or at least clearly visible in the header portion. That is also important in terms of ensuring a solid user experience.

However, that trend hasn’t gone unchallenged too. In their quest for bringing new fashion or breaking out of the tradition, designers have altered the default position of the primary menu. Putting the menu on the bottom of the website will be hardly creative, so they tried putting the menu on the left or right side of the website. As a result, we have got some interesting layouts to try. In today’s post, we have collected 29 instances of creative use of side menus in websites. Let’s see what the collection includes.

Bateaux

The side menu in this website appears on clicking a menu icon which is then followed by a sleek push animation. Personally love this one.

bateaux side menu

FLIPP

The gorgeous side menu of FLIPP integrates perfectly with the overall design of the website. By keeping it really simple, the designer(s) has done an awesome job there.

FLIPP

Animesh Manglik

This portfolio website has a side menu which is definitely inspired by WordPress. Like WordPress, the side menu could be toggled between a short and a long version.

Animesh Manglik

Design Council

Like the previous example, the side menu of this website could be toggled too. The subtle red border on the left side of the active menu is an added attraction there.

Design Council

Google Ventures

Like all Google sites, the Google Ventures website is simple but very useful. And the side menu included in this website could not get any simpler than that.

Google Ventures

Petersham Nurseries

This simple website is accompanied by a very attractive side menu. When there are sub-menus, the menu bar gets makes space for another row of menus.

Petersham Nurseries

450 GSM

While most side menus are placed on the left side, 450 GSM has placed its menu on the right. However, revealing the menu takes some portion of the website out of the viewport, which should be taken care of.

450 GSM

Arbor Restaurant

This gorgeous restaurant website is accompanied by an elegant side menu. I wonder whether making the side menu a bit more colorful will improve the overall look of the website. What do you think?

Arbor Restaurant

Trask Industries

Talking about colorful side menus, take a look at the side menu of this website. It instantly catches the visitor’s attention. That’s how you design a side menu.

Trask Industries

Q Ideas

The side menu of Q Ideas is a simple one without any option to shrink. Nonetheless, the menu items are provided with a cool hover effect.

Q Ideas

Zindhai

While Zindhai has a great looking side menu, it could be improved by providing some sort of hover menu. The design is top-class anyway.

Zindhai

Drawtoclick

Here is another side menu that is positioned on the right. Being hidden initially, hovering over the menu icon reveals the full menu.

Drawtoclick

Travel Alberta

Though the side menu of this website is narrow in size, it packs a lot of information. And when the menu is longer than the viewport, a appears.

Travel Alberta

Mammoth Media

Side menu couldn’t be any simpler than this! Simple and straightforward, that is the motto for this website and the menu.

Mammoth Media

Hyperakt

Another example of a simple side menu. Clicking the menu icon reveals the big, bold side menu. Is there a limit on how big can you make your menus?

Hyperakt

Push Collective

The background of the side menu of Push Collective changes along with website background. The simple menu looks okay.

Push Collective

Georgina Bousia

This is a portfolio site of a designer. The simple side menu comes with a nice hover effect.

Georgina Bousia

Sculpt Communications

Here is a side menu that blends well with the overall design of the website. The subtle hover effect of the menu items has increased the overall user experience.

Sculpt Communications

Gareth Emery

The transparent side menu of Gareth Emery’s website is a treat for the visitors. The menu could be hidden by clicking the icon on top.

Gareth Emery

Kick Point

Kick Point has an attractive side menu. The white font color creates a nice contrast against the dark background. And the font is just big enough.

Kick Point

TriplAgent

The beautifully designed TriplAgent is well-supported by its side menu. The simple design of the menu goes well with the site too.

TriplAgent

PFD

Well, the list goes on and on, and I wonder how simple a side menu can be. Every time I say this, I find a simpler one. Let’s see how far it goes.

PFD

2Creative

Featuring a rather large side menu, the 2Creative website looks interesting. The smooth transition effect of the menu items is another attraction.

2Creative

Olympic Story

You will hear a sound when you hover over the menu icon of the Olympic Story website. And the sound goes on when you hover over the menu items too.

Olympic Story

Big Spaceship

Big Spaceship has a uniquely styled side menu. While clicking on the menu icon reveals the menu, the content gets faded to the top and vice versa when the menu is closed. They create a very charming effect.

Big Spaceship

Bad Assembly

Bad Assembly’s side menu is located on the right. Opening the menu creates an effect of focusing on the menu and focusing out of the main content, which is really nice.

Bad Assembly

Jonathon Da Costa

Jonathon Da Costa has made her side menu a new page by putting in a short intro of herself. I think this is an interesting idea to make the side menu more meaningful.

Jonathon Da Costa

Pauline Osmont

Unlike most other side menus of this post, the side menu of this website couldn’t be hidden. The always present menu makes good use of the available space too.

Pauline Osmont

Jason James

The office(!) of Jason James features another very simple side menu. I don’t know if it’s intended or not, but the menu is not available scrolled a bit. To access the menu, you have to get back to the top.

About Allie Kingsley

Allie Kingsley is a social media manager for designscrazed. She is crazy about new gadgets and up to date with latest technology trends. Use comments to notify any issues you are facing.

Check Also

14 Best Adobe Photoshop Plugins

In Photoshop, a plug-in (or plugin) is a set of components that adds specific effects …

Leave a Reply

Your email address will not be published. Required fields are marked *