Single page navigation pattern

This is an example of using FlexNav on a single page with the navigation anchoring to each section of the page. Just add the .one-page class to the body, .menu-button, and your navigation ul.

Usage

Start with a simple unordered list, adding in the class and data attributes:<ul class="flexnav one-page" 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" />

Add jquery.flexnav.min.js before the closing body tag:<script type="text/javascript" src="js/jquery.flexnav.min.js"></script>

Initialize FlexNav right before your closing body tag:$(".flexnav").flexNav();

you can change the default speed too:$(".flexnav").flexNav({ 'animationSpeed' : 'fast' });

Options

'animationSpeed' : '250', // default drop animation speed
'transitionOpacity': true, // default opacity animation
'buttonSelector': '.menu-button', // default menu button class
'hoverIntent': false, // Use with hoverIntent plugin
'hoverIntentTimeout': 150 // hoverIntent default timeout

Section 2

Bacon ipsum dolor sit amet shank beef ribs tongue pork loin prosciutto sirloin ribeye leberkas doner capicola brisket pork chop chicken. Turducken prosciutto filet mignon beef t-bone. Jerky bresaola filet mignon, chuck shankle rump boudin tongue. Shank jowl biltong, shankle frankfurter andouille prosciutto hamburger tri-tip spare ribs pastrami short loin fatback. Rump salami bresaola frankfurter pig ball tip.

Pork brisket ground round, meatball cow fatback tail salami beef ribs ribeye pork chop short loin pancetta venison bresaola. Tenderloin meatloaf corned beef rump leberkas chuck. Flank ribeye meatball, ham pork belly beef pastrami capicola andouille fatback. Pork belly ham hock short ribs, chicken ball tip brisket tongue bacon short loin kielbasa pork chop sirloin biltong pancetta swine.

Shank pastrami pork belly doner filet mignon biltong sausage pork chop boudin pork loin. Sirloin frankfurter andouille jerky biltong filet mignon. Pig salami t-bone ground round venison, jowl short ribs sausage meatball. Pig sirloin tail, tongue ham hock drumstick salami ham doner. Pork chop hamburger brisket, short ribs cow doner t-bone tongue swine pastrami biltong. Filet mignon sausage cow, drumstick shoulder pork loin ground round pork.

Section 3

Bacon ipsum dolor sit amet shank beef ribs tongue pork loin prosciutto sirloin ribeye leberkas doner capicola brisket pork chop chicken. Turducken prosciutto filet mignon beef t-bone. Jerky bresaola filet mignon, chuck shankle rump boudin tongue. Shank jowl biltong, shankle frankfurter andouille prosciutto hamburger tri-tip spare ribs pastrami short loin fatback. Rump salami bresaola frankfurter pig ball tip.

Pork brisket ground round, meatball cow fatback tail salami beef ribs ribeye pork chop short loin pancetta venison bresaola. Tenderloin meatloaf corned beef rump leberkas chuck. Flank ribeye meatball, ham pork belly beef pastrami capicola andouille fatback. Pork belly ham hock short ribs, chicken ball tip brisket tongue bacon short loin kielbasa pork chop sirloin biltong pancetta swine.

Shank pastrami pork belly doner filet mignon biltong sausage pork chop boudin pork loin. Sirloin frankfurter andouille jerky biltong filet mignon. Pig salami t-bone ground round venison, jowl short ribs sausage meatball. Pig sirloin tail, tongue ham hock drumstick salami ham doner. Pork chop hamburger brisket, short ribs cow doner t-bone tongue swine pastrami biltong. Filet mignon sausage cow, drumstick shoulder pork loin ground round pork.

Section 4

Bacon ipsum dolor sit amet shank beef ribs tongue pork loin prosciutto sirloin ribeye leberkas doner capicola brisket pork chop chicken. Turducken prosciutto filet mignon beef t-bone. Jerky bresaola filet mignon, chuck shankle rump boudin tongue. Shank jowl biltong, shankle frankfurter andouille prosciutto hamburger tri-tip spare ribs pastrami short loin fatback. Rump salami bresaola frankfurter pig ball tip.

Pork brisket ground round, meatball cow fatback tail salami beef ribs ribeye pork chop short loin pancetta venison bresaola. Tenderloin meatloaf corned beef rump leberkas chuck. Flank ribeye meatball, ham pork belly beef pastrami capicola andouille fatback. Pork belly ham hock short ribs, chicken ball tip brisket tongue bacon short loin kielbasa pork chop sirloin biltong pancetta swine.

Shank pastrami pork belly doner filet mignon biltong sausage pork chop boudin pork loin. Sirloin frankfurter andouille jerky biltong filet mignon. Pig salami t-bone ground round venison, jowl short ribs sausage meatball. Pig sirloin tail, tongue ham hock drumstick salami ham doner. Pork chop hamburger brisket, short ribs cow doner t-bone tongue swine pastrami biltong. Filet mignon sausage cow, drumstick shoulder pork loin ground round pork.

Section 5

Bacon ipsum dolor sit amet shank beef ribs tongue pork loin prosciutto sirloin ribeye leberkas doner capicola brisket pork chop chicken. Turducken prosciutto filet mignon beef t-bone. Jerky bresaola filet mignon, chuck shankle rump boudin tongue. Shank jowl biltong, shankle frankfurter andouille prosciutto hamburger tri-tip spare ribs pastrami short loin fatback. Rump salami bresaola frankfurter pig ball tip.

Pork brisket ground round, meatball cow fatback tail salami beef ribs ribeye pork chop short loin pancetta venison bresaola. Tenderloin meatloaf corned beef rump leberkas chuck. Flank ribeye meatball, ham pork belly beef pastrami capicola andouille fatback. Pork belly ham hock short ribs, chicken ball tip brisket tongue bacon short loin kielbasa pork chop sirloin biltong pancetta swine.

Shank pastrami pork belly doner filet mignon biltong sausage pork chop boudin pork loin. Sirloin frankfurter andouille jerky biltong filet mignon. Pig salami t-bone ground round venison, jowl short ribs sausage meatball. Pig sirloin tail, tongue ham hock drumstick salami ham doner. Pork chop hamburger brisket, short ribs cow doner t-bone tongue swine pastrami biltong. Filet mignon sausage cow, drumstick shoulder pork loin ground round pork.

devices

Get FlexNav v1.1

Download on GitHub →

Features

  • Multiple nested sub menus
  • Tap targets to reveal sub menus for touch screens
  • Hover reveal for desktop
  • Keyboard tab input accessibility
  • Fallback support for no js
  • Multiple Flexnavs on one page

Browser Support

  • IE7-10
  • Latest Safari
  • Latest Chrome
  • Latest FireFox
  • Android 2.2 to Latest
  • Mobile Safari