See, in real life, you can walk into a restaurant, get a menu and point to what you want. Most of the time it even has pictures to help you out. And if you’re lucky, you can have your food in less than a quarter of an hour.

In the virtual world, things aren’t always as straightforward.

Whenever we go ahead and visit a website you’ll see those fancy or dull navigation bars that gives us options therefore making our search easier and less time consuming. But more often we will see those not so user friendly navigation menus that doesn’t really give us any idea at all on what to do. That or they are just totally unappealing.

Having a user friendly and good navigation menu would not only help those people going to your website but it also makes it easier for them to return back to you. Now, creating this navigation menus need not be very complicated as some would want you to think. There are actually simple ways to do it without putting too much of an effort.

Doubtful? Check out this 9 easy ways to create user friendly navigation menu that everyone will be happy about.

  1. Layout–Before starting your navigation menu, make sure that you have everything planned and in place for execution.

  2. HTML–People often make creating navigation menus complicated by overly thinking things. Start with concentrating on HTML first before worrying about decorations etc. There are numerous tutorial online to help you out with this.

  3. CSS–Once you’ve laid out your HTML, specify what CSS codes you want to use.

  4. Corners and Borders–On this part we may need to use another type of pseudo class selector that will note the position of an element. This is going to be a bit tricky, because we are only targeting the first and last box.

  5. Color–Style and structures are done so it’s now time for us to personalize our color scheme. Make the color pop up but professional looking.

  6. Change the color when hovering–Setting up gradient to get that 3D effect, you'll want to use the CSS linear-gradient()function. Sound scary? Don’t worry it’s just easy to do. The first hex code you set is the top color and the second is the bottom color. Unfortunately, there's not yet uniform support for this function across all browsers, so you'll need to set the gradient separately for each major browser, as well as a single color if a browser does not support gradient, like so.

  7. Check the Content Area-Check that content area. Make sure that proper spacing is applied.

  8. Font–It may seem that everything is just fine when you check your navigation menu, but what font you see may not be what others will do. It is always best to change the font of your menu. This will not only make sure everything is working but it will also make your menu look better.

  9. Floating Images–Now this floating images may be optional but it always adds personality when you decide to add them.

Creating user-friendly menus doesn’t have to be rocket science. It can be made easier with the above steps. And if everything fails, remember, you can always try again. This time, though, maybe use a video tutorial eh?


  • Doris Dolly, 13.09.2014, 10:45:

    Wow. Nice work. Keep it going.

  • Mark Evans, 15.11.2014, 10:45:

    The quality of your work is awesome. Keep it up guys.

Leave a Reply

Note: HTML is not translated!
* Required Field