Responsive Navigation Menus

Building up websites (also) for touch devices you have to say good bye to flyout menus that hide sublinks using the pseudo class hover with 'visibility:hidden' and display them with 'visibility:visible' only when the mouse cursor is directed to the respective superior link above. You have to say good bye, because touch devices don't understand the hover effect. Using a mouse you may direct the cursor to a link - that is to 'hover' above the link - and then you may click or not. But your finger cannot provide a cursor. So with your finger you may click or not, but you can't hover above a link or anything else on your mobile, therefore you cannot use the hover pseudo class on touch devices.

If you have a very small site that consists of up to 5 pages you don't need sub menu levels. But what about medium sites or even big sites with dozends or even more than 100 pages?

Concerning w3easy.org that I would call a small medium site with approximately 35 pages atm. I finally managed to build up some different navigation menu solutions.

First of all: Without being allowed to use the hover effect, I decided to display sublinks only if the respective superior link is active.

 

Narrow Screen / Device Navigation

On narrow screens the navigation menu will always appear one menu link below the other on the very top of a page or alternatively right below the header. This is done with media queries and the css orders display:block or display:none. For this way the menu may become quite drawn out, there is a JavaScript driven 'magic' toggle to hide or display the Navigation as you like.

Btw: Many responsive navigation menus work that way, that when you call a website with narrow screen devices like mobiles or smartphones,  the navigation menu is not visible at first, or when you minimize manually your wide screen to a narrow screen, the navigation menu disappears. in these cases the navigation menu can be switched-on only if needed by a 'magic' toggle.
Up to now I decided to display the navi menu also on mobiles resp. on narrow screens when the site bis called. But it is no problem to change this. You only have to change in your styles the initial value for the narrow screen top menu navigation div box to 'display:none'. But don't forget to change the initial values for the respective toggles, too, unless you will not disable your visitors to browse your site...

 

Wide Screen Navigation

If the screen resp. the device is wide enough to show the navigation in wide screen mode, there are different solutions you may choose as you like it best.

Top Menu Navigation

For the w3easyCMS may consist of up to 3 menu levels, without using the hover effect the navigation menu will have to expand to up to 3 lines if needed (and more, if you minimize the page and the menu links of one level do not fit in one line). For I don't like too many menu lines, I have put the second and the third level links in one line, if there is enough space in the line.

Combined Top / Side Menu Navigation

With this kind of navigation you have only first-level links in the top menu. Second- and third-level links will appear in a sidebar, if needed, i.e. if the respective superior link is active.

Side Menu Navigation

With this kind of navigation - as it is used on this page - you have the navigation menu completely in a sidebar. Ok, on this page with so many menu links and styled like it is it might look somewhat bone-crashing. But life is not a musical request programme...

 

One-Column Templates

If you have a one column template, there are no sidebars to put menu links in. Therefore I put the side menu in a floating div container, if needed. Unfortunately the menu container disappears behind videos so far. Let's see, whether there will be a solution. Otherwise you can always choose the top menu naviagtion for one-column templates.

Last edit: 2013-10-10 ⊗ 09:32

News

2014-12-15
Lately there were 2 more websites based on the w3easyCMS, that I built up and published: my personal weblog neuland and a web­site about the legend of Al Maree with a TV program of it's own ;).

w3easy against War Propaganda in German Media

2014-04-25
I am not a poltician, but in these times of war hysteria and propaganda I feel the urge to put it straight, that I condemn strongly war propaganda in German media and aggressive actions or speeches of German politicans. I am quite sure, that I share this opinion with many civilists in my country.

2014-04-22
Currently the w3easy project is halted. Concerning the future there are no decisions made. Thanks for your interest and company.