How To Create a Trendy Flat Style Nav Menu in CSS

I’ve heard from a bunch of people who found my CSS drop down menu tutorial really useful, so today’s we’re going to build another menu with some fancy hover effects. With the Flat design trend being so popular we’ll use adopt this style for today’s menu by using bright solid colours and clean icons. We’ll be using various must-know CSS techniques so this is a great tutorial for any web designers learning the basics.

 

The Menu Concept

View the flat style CSS nav menu demo

Here’s the menu we’ll be building as part of this tutorial. It’s based on the oh-so-popular flat design trend with solid colours and neat square boxes. The clean icons are courtesy of the Linecons pack and the font we’ll be using via Google Webfonts is Dosis. When each navigation box is hovered the text label appears off to the right, adopting the same colour scheme as its parent menu item.

About Nekuro