Submit your widget

jQuery dropdown Menus Plugin

Created 5 years ago   Views 46493   downloads 14107    Author jasonweaver
jQuery dropdown Menus Plugin
View DemoDownload 25.2 KB
96
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.

Usage

 

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:http://jasonweaver.name/lab/flexiblenavigation/