I’m a Frontend Engineer working with WordPress, WooCommerce, and React at Universal Yums.
mrjasonweaver / flexnav Goto Github PK
View Code? Open in Web Editor NEWA jQuery plugin for responsive menus
License: The Unlicense
A jQuery plugin for responsive menus
License: The Unlicense
I’m a Frontend Engineer working with WordPress, WooCommerce, and React at Universal Yums.
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?
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?
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.
Hovering over any 3rd level menu will conflict with others if there are sibling close by.
How can data-breakpoint work with EM values? Thanks.
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
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
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.
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
Currently the navigation for small screens doesn't display nav items by default.
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).
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
Hello,
when I d middle click, to open in new tab the menu dissapears. Also when I have href="#".
Thank you
I need the width of the submenu ul to be as wide as it needs to be, rather than forced to be the width of the upper li element.
Is this possible without setting it manually?
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.
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.
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.
Is this going to support IE8 < ?
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
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.
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:
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.
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.
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?
The downloaded file works fine on my local computer, but once I upload it to a server it stops functioning completely.
When tabbing into nav with keyboard, only the first is visible.
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.
Max-height for animating chops off menu items with long names. Need to think of a better solution for css animations.
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.
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?
Repots of bug on this device running a customized version of the Android web browser
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.
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();
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.
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?
I love this plugin and I've integrated it into a Drupal theme I'm developing. I'm wondering if you would consider changing the license to "Unlicensed" - http://unlicense.org/
Personally the WTFPL license does not bother me but I think it could potentially offend some potential users and the link that it goes to. I think essentially 'Unlicensed' achieves the same thing as WTFPL. Thanks!
Regression bug.
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)?
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
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?
I just tested my web on IE9, but menu button is not clickable on it. So nav menu cannot be shown. It also happened on your flexnav site.
Is there any solution for it?
Many thanks,
Rizqi
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
v0.7 and the latest v0.8 can't open submenus in IE8
Is it possible to tap the entire top-level link instead of using the button arrow down?
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!!!!
Hello, I found new issue. When you click for roll-out, roll-in then mouseover roll-outs doesn't work until refresh.
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?
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:
| Logo | Menu Button __________|
_____ | drop down nav choice ___|
instead of this:
| Logo | Menu Button _|
| drop down nav choice|
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.