Tutorial Drop-Down Navigation: Responsive and Touch-Friendly

...is a drop-down on touch screen because there is no cursor and you cannot hover on the navigation items! It gets even worse if you have links on parent menu items. Once you click them, the drop-down shows up for a second and then immediately disappears because the browser has just opened the link of an anchor you pressed! That sucks. As well as using hash symbol for parental link href's: as a consequence, you cannot use normal URLs, the page sometimes may scroll up after the link is clicked, the drop-down may flash, you won't be able to shut it off, etc. Sorry, that is not a problem anymore – it is solved in this post! Watch my very first video montage to get the idea:

Composition

The technique consists of three main parts:

1. Simple drop-down navigation based on HTML and CSS;
2. Responsiveness implementation using media queries;
3. Adoption for touch screen devices with the help of a super tiny jQuery plugin.

Now about everything in turn…

 

HTML and CSS drop-down navigation code...