mrjasonweaver / flexnav Goto Github PK

View Code? Open in Web Editor NEW

1.2K 102.0 395.0 51.2 MB

A jQuery plugin for responsive menus

License: The Unlicense

JavaScript 21.27% CoffeeScript 16.45% CSS 62.28%

flexnav's Introduction

FlexNav jQuery Plugin

A Device Agnostic Approach to Complex Site Navigation with Support for Touch and Keyboard Accessibility

The Details

A mobile-first example of using media queries and jQuery to make a decent site menu with drop downs. Special attention is paid to touch screens using touch events and tap targets. 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.

Note: If you find a bug, please file an issue and note device and browser versions. Use the Demo as a point of reference for bugs. I can't offer my time to debug your specific code.

Resources

Features

Multiple nested sub menus
Tap targets to reveal sub menus for touch screens
Hover reveal for desktop
Keyboard tab input accessibility
Use class .one-page on the body, .menu-button, and ul.flexnav for single page fixed menu
Use with hoverIntent jQuery plugin (not included)

Browser Support

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

License

FlexNav is unlicensed. Do whatever you want with it. :) Set Your Code Free

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>

For a single page site with id anchors, add .one-page class to <body>, .menu-button, and FlexNav <ul>:

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

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 closing body tag and after jQuery

<script type="text/javascript" src="js/jquery.flexnav.min.js"></script>

Initialize

<script>
	$(".flexnav").flexNav();
</script>

Options

$(".flexnav").flexNav({
  'animationSpeed':     250,            // default for drop down animation speed
  'transitionOpacity':  true,           // default for opacity animation
  'buttonSelector':     '.menu-button', // default menu button class name
  'hoverIntent':        false,          // Change to true for use with hoverIntent plugin
  'hoverIntentTimeout': 150,            // hoverIntent default timeout
  'calcItemWidths':     false,          // dynamically calcs top level nav item widths
  'hover':              true            // would you like hover support?  	  
});

Contributors

Todo

see Todos

Changelog

see Changelog

flexnav's People

Contributors

Stargazers

Watchers

Forkers

davatron5000 jswebschmiede vikingkarwur bronfman openube magus36 mamigaku pathos cookieroz ghagivassilis nternetinspired megahalfie maheshbabu brentini jimlakey elykahn leison chromix ericnicolaas colin-johnston tmpm alliwagner mariomc lbweb phloyds elmspark davittow chadwilliams dreamscraps romerholm old-campos seanuk kartooner richardfugisse web5design sneistat marcosanchez pontusfs bbhazard indian2020 cyberik iamsahmad justfathi lifelive markovich88 cyrke devluis sarat246 vivekrp kublaj nari3 azamara fengyiyi rburch oresh talia-ong travist6983 iolufemi paulreed79 liluxdev hashir de-raaf-media jrsinclair alibenmessaoud iordacheclaudiu rcwsr brentdf slkav harikr2006 digitaldesigndublin axpart sky404-git jrelgin gabriel-cintra bvenne douglasbf pegweb ac-bristol howdous moheimen jordangehman paintyourbrain landsurveyorsunited davgit suraj059 djrichct jon3 rizalafani texungo pioneer903 0x3bfc khanmahmud alexmercerj bethleppard levelstudiomx jvegaloz kamalendugarai iamcarrico sreeram-softscripts jordan-carl

flexnav's Issues

v.0.7 bug: sub ul menu doesn't s slide up when mouse moves quickly

Two break points

Is it possible to have two breakpoints?

For example, for mobile the menu it would be in it's toggle down state, for a smaller screen it would go to the across the top menu and then for a widescreen there would be another breakpoint to take it back to an accordion style lefthand menu.

Thanks

Drop-down arrow seems a little redundant on no-touch devices

First up, thanks for the awesome plugin.

Second, apologies for not putting this in a pull request but I have made quite a few changes to make this Joomla compatible and so I'm more than a little out of sync with you now. If I was more competent in Git I could probably get round that, but I'm not!

Anywho, one of the changes I made which you may find useful is that I reset li.item-with-ul back to 100%, at larger viewports, on devices that do not support touch, as these operate via :hover anyway. So, I have the drop-down arrow only on touch enabled devices.

I did this as I feel that it adds possible confusion for .no-touch users, to whom it isn't apparent what the relevance of the arrow is when :hover triggers a drop-down.

Hope I've made sense. Thanks again for all the code :)

Seth

Swipe Gestures/Scroll on iOS

Great plugin; finding it very useful for quick mobile nav implementation.

I've noticed that if a user taps on the nav but intends to swipe/scroll rather than toggle expansion on an iOS device (test iPhone 5 on iOS 6), scroll will be disabled, and the nav will expand regardless of the users finger position.

I'm not sure how to interpret this from my relatively novice jQuery grounding; the code seems to be looking for such behavior (the touchmove/mousemove block).

Bug on Windows 8?

Just saw a weird bug on a Vaio Duo running on Windows 8. Touching the "Menu" button, the menu briefly appears then disappears...does not stay open so user can select an option.

3rd level dropdowns?

I've been working on trying to tweak the flexnav to work with sub-sub-navigation on mobile devices.

I have run into one problem with the js that I just can't solve.

demo:
http://jsfiddle.net/wphotline/DqZgb/13/

If you click uncategorized, then click group forums, notice the group forums is collapsing inward instead of opening up?

The menu works great when only having 1 level, but has issues on the second.

Can you help fix this?

Changing the direction of displayed submenu

Is there a way to change the displaying direction of submenu (i.e. to the left) when submenu is overflowed to the right of browser window? So if I have a menu on the rightmost of browser window, its submenu will be shown to the left side of parent menu rather than showing on the right side of its parent as configured by default.

Thanks

Menu button for mobile

Whether it is possible to remove menu button for mobile alone?

I.e: For mobile need only the item's list to be visible directly not the menu button.

IOS Orientation

Observed an issue when changing IOS orientation from Portrait to Landscape�—the menu does not adjust to viewport width. Even seen at demo http://jasonweaver.name/lab/flexiblenavigation/
Observed on iPhone version 4.2 and iPad version 5.1

Close FlexNav Menu on click/touch selection

Trying to upgrade my site to FlexNav.js 0.4.6 and the new code doesn't close the menu when user selects a list item. The menu on your demo (http://jasonweaver.name/lab/flexiblenavigation/single-page-pattern.html#page) stays open too.

Can we please put this back (as an option)?

Sub nav items not dropping in IE8

Regression bug.

Click vs. mouse over

Hello, I found new issue. When you click for roll-out, roll-in then mouseover roll-outs doesn't work until refresh.

EM values?

How can data-breakpoint work with EM values? Thanks.
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/

Submenus won't open in IE8

v0.7 and the latest v0.8 can't open submenus in IE8

Why is it not possible to use an ID/class instead of [role='navigation'] ?

I started to use flexnav, I like it but it's not easy to work with it.

Why isn't it possible to use a class/ID name instead of role="navigation" in the script :
$("[role='navigation']").flexNav();

it doesn't it work if i use: $("#nav").flexNav(); ??

I tried everything but can't work it out?

Another issue - the submenus of my menu are directly open and not like in your example closed when you open the menu. I'm not sure why not.
The website is not online right now, but I can send you with PN the site+logininfo.

Thanks
Karo

Problem with sub-lists on last navigation point

At the moment all sub-lists open to the right side, which usually works nice EXCEPT for the last navigation point. As soon as the visitor of the website clicks on the last navigation point of each level, the sub-lists open too far on the right side of the browser-window and create a horizontal browser-scrollbar.

You can see this issue on your demo-website if you put two sub-level-lists to the last navigation point.

A solution for this would be, that you change the CSS code so that sub-lists (only!) on the last navigation point open to the left-side instead of the right-side.

Hover bug for 3rd level subs

Hovering over any 3rd level menu will conflict with others if there are sibling close by.

Progressive enhancement on mobile devices

I love this, and will probably use it on a few of my upcoming projects - but unless I'm mistaken, it doesn't seem to work on mobile sites with javascript disabled.

If you're above the breakpoint (i.e. on a desktop) with no javascript, the fallback CSS still allows access to all of the pages within the menu...

... but if you're below the breakpoint (i.e. on a mobile), you're unable to do anything except see a block that says 'menu', but are unable to interact with it in anyway.

Now I realise that this probably covers a very small subset of people, but surely for these people, it would be better to just show all the links available, rather than hide them behind a button that doesn't do anything?

Touch Device Tap Entire Link Not Just the Button

Is it possible to tap the entire top-level link instead of using the button arrow down?

Possible bug on ICS Sony Tablet S

Repots of bug on this device running a customized version of the Android web browser

IE 7 Bug - Nav Hidden

Who would of figured there would be a bug in IE 7...

In IE 7 on page load - the navigation is mysteriously hidden. After resizing of the window, the navigation appears.
Finally figured out that IE7 does not like [role="navigation"].

The solution: replaced the custom selector, [role="navigation"], with class .rolenavigation in html, css, & js. and it fixed the issue.

how to resize the flexnav to fit many anchors inline?

Hi,

First of all thank you very much for sharing this awesome menu.

then, i have a menu with several links on the root level so i want to know how can i resize the flexnav to fit in the same line.

Any help is welcome thanks!!!!

A couple of possible changes?

I was excited to find your plugin as it did almost everything I wanted for a responsive navigation, so thank you for your work. And for sharing it of course...

I tweaked it a little to fit my needs and I thought I's share what I did incase it is of any interest. I forked your repo here and put a version up here to test on devices.

In a nutshell, here's what I did and why:

Made the arrows disclose on hover or click for clearer UI.
Added a default class of .flexNav-no-js which is replaced by either touch or no-touch class if JS working in browser. Added .flexNav prefix so it didn't clash if modernizr is used, but isn't reliant on it either. Added this in order to:
- Make plugin function more fully if JS disabled
- Allow for hover states to work on wider viewports if JS disabled
Found bug when going from wide viewport to small - then opening and closing the menu and submenus - then going back to wide, that the jquery toggle injects display:none, and then the submenus don't appear on hover or click. Used .css({'display':''}); to reset css to defaults on resize.

I also changed a few things unnecessarily, such as the viewport meta tag and removing the footer css as I was prepping it for my project. I didn't initiate a pull request as I probably changed too much code to suit my own tastes and maybe deviated too far from the original plugin?

Also, as a disclaimer, I am in the process of learning javascript and jquery so most of the changes I introduced seem to work but may not be a great way of doing things.

Multiple Menu Options

Hello,
I am running into difficulties floating one menu-button div next to another once the menu is collapsed. In other words, two dropdown menus side by side. I would like to put a search dropdown next to the main menu. I will be working on this but please let me know if you have any suggestions.

Menu bug on Android devices

I'm doing some testing with Flexnav and seem to have come across a bug on a lot of Android devices. Granted, I'm testing them using Browserstack as I don't have access to an Android device so I may be wrong about this. It seems when you click the menu item the menu drops down and then immediately disappears/collapses again. Tested on a GS2 and GS3 with the stock browser. Can anyone duplicate this potential bug?

2 FlexNavs on one site

If I'm using 2 Flex Navs on one site -
one effects the other (when opening one for example - the other closes)
How to fix that?

Sub menus appear on hover on small screens

Not a huge deal, as most users would be on a touch screen at small viewports. But enough to annoy me. Menu needs to not open on hover at small viewports.

IE7/8 not working

Is this going to support IE8 < ?

Menu closes when user scrolls on small screens

A bug if a user is on a small screen, opens the mobile menu and scrolls, the menu closes. This because (I suspect) the window resize event fires and as a result, closes the menu.

Option for site logo button to be visible when in small screen mode

I love this plugin! Is there a suggested way (or could you include it as an option in the css) to have a, say, 50px wide button to display a site logo/home button on the same line as the small screen menu?

i.e.

| Logo | Menu Button __________|

It'd be a great way to still show the site's branding while making more small screen real estate available for content. I tried doing it myself but when I tried inline-block'ing the logo and flexnax, the drop down choices were squashed. I got this:

instead of this:

Display navigation items if JavaScript isn't turned on for small screens

Currently the navigation for small screens doesn't display nav items by default.

Dropdowns for All Devices Not Working in Chrome Once on a Server

The downloaded file works fine on my local computer, but once I upload it to a server it stops functioning completely.

Small delays for easier navigation (drop down menus)

Could you please add some little delays so that it's easier to navigate the dropdown-menu?

Most people don't move very exact with the computer mouse from one submenu level to the next sub-level. The submenu often closes in that situation because for a milisecond they hit space outside of the menu.
If you close the submenu-levels only after a small delay, this would not happen and make a much better user experience.

It would also look smoother if the submenus roll out/in with a little transition effect.

Click problem

Hello,

when I d middle click, to open in new tab the menu dissapears. Also when I have href="#".

Thank you

Menu (briefly) disappears when a nav element is clicked on

I have flexnav applied to a <ul> element. When I click on an <a> element within that <ul> (this is at a large viewport with the menu not collapsed), the entire <ul> disappears, but on page load is visible again. I've confirmed using Chrome's inspector that a display: none; is applied to the <ul> element.

This seems to be because of the code starting on line 54:

//Closes nav menu after links clicked/touched
$this.find('a').click(function() {                                           
   $this.hide();                                                            
});

Which seems to target any <a> element inside the element that flexnav is applied to, and when clicked, hides the element flexnav is applied to. However, this isn't the behavior I observe at http://jasonweaver.name/lab/flexiblenavigation/ and isn't behavior I've observed when using flexnav in the past (before it was packaged as a jQuery plugin).

Any suggestions?

Close when click a link not working.

Hello, I know this was solved a year ago, however is not working in my single page web site. I'm using others plugins and I when trying to find out what the problem is I found that when I deleted an other's plugins part flexnav menu trigger stop working. The script I removed is: return Pikaday;

I did it as I said trying to see if there was something in the rest of the plugins that is not allowing the menu to close when a link is clicked but only when the menu button is clicked again.

I hope you can help me with this. I am not very good with js.

I love your plugin I've seen a lot and this one is the best and most easy to use.

Greetings

Final note: I was making a mistake in my code. Very sorry for this.

On IE - Nav displays differently

Hi Jason Weaver, Thanks for this cool bit of code, mostly going ok in my implementation, but I noticed that in IE I don't get the Nav changing at higher resolutions, it just stretches out the design for smaller resolutions. So it still has the Menu drop down, rather than jumping to the next level of Links like in other browsers.
Is there a way around this?
Here's the link to my template site:
http://www.mason-uk.co.uk/responsive/html5boilerplate.html
Thanks
Rich

Sub menus stay open on resize

If I open up the subnav when browser is shrunk down the dropdowns stay open when I enlarge the browser back to large break point.

I wonder if it needs a close all submenus in the window.resize function. If => breakpoint?

This worked: $('.item-with-ul ul').hide();

else {
$nav.removeClass("sm-screen").addClass("lg-screen");
$nav.removeClass('show');
$('.item-with-ul ul').hide();

keep from sliding open sub-menu when clicking the anchor

How can I adjust the code so that the sub-menu doesn't slide open when clicking the anchor tag thats inside of the li?

Navmenu disappears on click

I think this is intentional but I don't understand why? The code is designed to hide the whole meny on click but this seems very jarring to the eye when it is deployed to a working site. Is it necessary, because when I commented it out the nav still seems to work fine?


        // Closes nav menu after links clicked/touched
        $this.find('a').click(function() {
            $this.hide();
        });

Nice work though! I am testing it on a site now. I'd like to implement a nav similar to starbucks.com

Close flexnav on click/touch?

Is it possible to include an option to close the flexnav toggle when an item is clicked/touched? I'm using flexnav on a single, long-scrolling page and this would be very useful because I'm not sending users to different pages and the flexnav currently stays open.

Keep menu open on page refresh

How would I go about keeping the menu open when it is clicked and another page is loaded?

I presume this will create issues for the smallest breakpoint if there are many options in the dropdown...

Any thoughts?

allow for use of more than 1 flexnav menu

I tried adding 2 separate 'flexnav' menu's to my template and found that it causes problems with the drop down logic. Basically if I click the down arrow on one menu, both menu's expand/collapse.

Allow for changable navicon

First of all, great work on this. I'm not an expert, not have I got much chance on testing on various devices, bit this seems down-to-earth, usable and straight-forward to implement.

What I cannot see being part of this is a changeable navicon, where the icon is different if the sub-menu is visible compared to when it's not. Particularly in the mobile navigation it would be useful to display an icon that suggest that an item can be collapsed by clicking on it again. E.g. I'd like to use a + icon for expandable items and a – sign for collapsible items. I cannot see that it's currently possible to do that with CSS.

Would be great if this could be considered for the next version.

Many thanks,
Rizqi

mrjasonweaver / flexnav Goto Github PK

flexnav's Introduction

FlexNav jQuery Plugin

A Device Agnostic Approach to Complex Site Navigation with Support for Touch and Keyboard Accessibility

The Details

Resources

Features

Browser Support

License

Usage

Options

Contributors

Todo

Changelog

flexnav's People

Contributors

Stargazers

Watchers

Forkers

flexnav's Issues

Recommend Projects

Recommend Topics

Recommend Org