Submit your widget

jQuery dropdown Menus Plugin

Created 10 years ago   Views 21135   downloads 6379    Author jasonweaver
jQuery dropdown Menus Plugin
View DemoDownload
Share |

The mock navigation you see above is a mobile-first example of using media queries and javascript to make a decent site menu with drop downs. Special attention is paid to touch screens using touch events with tap targets (the key feature of FlexNav). This is something I use to test different navigation techniques and may change as I iterate over different solutions to the problem. Basically I want a simple model to build upon when working on sites from scratch.



Start with a simple unordered list, adding in the class and data attributes:

<ul class="flexnav" data-breakpoint="800"> <li>...</li> </ul>

Add the small screen menu button somewhere outside your navigation markup:

<div class="menu-button">Menu</div>

Add flexnav.css to the head of your document:

<link href="css/flexnav.css" rel="stylesheet" type="text/css" />

Read more: