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.
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.
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.
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.
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.
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.
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.
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.
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?
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.
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.
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.
Here is another side menu that is positioned on the right. Being hidden initially, hovering over the menu icon reveals the full menu.
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.
Side menu couldn’t be any simpler than this! Simple and straightforward, that is the motto for this website and the menu.
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?
The background of the side menu of Push Collective changes along with website background. The simple menu looks okay.
This is a portfolio site of a designer. The simple side menu comes with a nice hover effect.
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.
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.
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.
The beautifully designed TriplAgent is well-supported by its side menu. The simple design of the menu goes well with the site too.
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.
Featuring a rather large side menu, the 2Creative website looks interesting. The smooth transition effect of the menu items is another attraction.
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.
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.
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.
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.
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.
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.