Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

How to build a nice responsive navigation from scratch

Sunday, April 20th, 2014 by Servage

Responsive Menu of Amazon

There are plenty of elements playing parts in the success of modern websites, but navigation is grabbing first attention of the web designers and web developers. I am supporting this concept holistically because navigation is a prime concern in performance optimization and grabbing first place in user experiences.

If we look at the psychology of our visitors, we will find that once visitor land on home page or any inner page she may start looking at the presented content on that page. If she is not getting whatever she is looking for, she immediately start searching for the navigation menu to find out what site is offering more and how that is relevant to her search. Perhaps this is the reason that our ancestral web developers have place navigation main menu on the top and first on each page.

I have little bit envy of them as they had very limited pages and a few options to put so they could decorate navigation freely in decent and unique ways. Unfortunately, today most of my patrons come with lengthy navigation list and deep navigation structure with sub to sub-pages. For desktop only design I am happy with such lists, but responsive design for smartphones and tablets it pushes me into a brainstorming session to select the navigation style accordingly.

 

We Need Quick & Responsive Menu

Reasons are obvious as we are going to increase the list of sub-menu in hierarchy our users have to wait for longer and longer to get the targeted page link. Thus, our first duty becomes to design responsive menu that deliver quick results, without offering delay into the jump from top-to-bottom menu items in the hierarchy.

Therefore, today I am going to discuss some contemporary technologies that help me to create such quick and responsive navigation designs from the scratch.

 

Designing Drop-Down Mega Menu

As I have discussed before mega menu is common expectation in modern website designing therefore, I use AIM or jQurey-menu-aim that is capable to deliver quick responsive menu that act on the hover effect of mouse or hand gesture and show navigation options without causing any delay in selection.

Generally you may have noticed that when we jump from one link/button to another it takes some moments to appear and fad out too. This is happening with an aim that you have some time to make selection of the submenu items in its pop-up options. Unfortunately, our modern impatient visitors can’t afford this delay and expect quick appearance of the submenu list as soon as they hover the mouse over menu button. Luckily, Amazon has got such superfast dropdown menu in its “shop by Department” mega dropdown.

 

What menuAim Doing

AIM has found out the technique that how Amazon’s mega menu is working. According to their research when your cursor is moving from main dropdown to submenu you won’t get into the Bootstrap’s trap where you lose the submenu immediately and you won’t have any delayed time to select submenu. With Amazon’s menu you have a triangulation technique that detects the direction of the cursor’s path and don’t let submenu to disappear.

See the given image above where I have drawn a triangle between the upper and lower right corners of the dropdown menu that prevent submenu to disappearing until cursor is moving in that triangle area. Using menuAim is simple and easy for any level of web developer so take some moments with its literature.

 

References & More Reading

8 Ways to Add a Responsive Navigation Menu on Your Site

kamens / jQuery-menu-aim

BREAKING DOWN AMAZON’S MEGA DROPDOWN

 

How to build a nice responsive navigation from scratch, 5.0 out of 5 based on 2 ratings
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.