Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Close .nav on any items tapped/clicked #3

Closed
englishextra opened this issue Apr 22, 2017 · 9 comments
Closed

Close .nav on any items tapped/clicked #3

englishextra opened this issue Apr 22, 2017 · 9 comments

Comments

@englishextra
Copy link

englishextra commented Apr 22, 2017

It is needed when you have hash links that load another content via ajax, and the menu stays opened, and we dont want that.
In short:

		mouseHover = ('onmouseleave' in document) ? ['mouseenter', 'mouseleave'] : ['mouseover', 'mouseout'],
		+ mouseClick = ('ontouchstart' in document) ? ['tap'] : ['click'],

...
			for (var i = 0, itemsLength = items[length]; i < itemsLength; i++) {
				if (items[i][getElementsByTagName]('UL')[length]) {
					on(items[i], mouseHover[0], enterHandler);
					on(items[i], mouseHover[1], leaveHandler);
					+ on(items[i], mouseClick[0], leaveHandler);

@englishextra englishextra changed the title Close .nav onclick on any of its items Close .nav on any items tapped/clicked Apr 22, 2017
@thednp
Copy link
Owner

thednp commented Apr 22, 2017

Ah yes I forgot about that. I will think of a good solution but it's good I have something to start with ;)

@englishextra
Copy link
Author

englishextra commented Apr 22, 2017

onclick for top visible item with chevron down should reveal dropdown
onclick for other items should hide all dropdowns
click on body should hide all dropdowns (but it is not needed, because you have a closing action on mouseout)

these probaby arent needed:
mouseenter should accompany the touchenter
mouseleave should accompany the touchleave

so, perhaps:

		mouseHover = ('ontouchstart' in document) ? ['touchenter', 'touchleave'] : ['mouseover', 'mouseout'],
		mouseClick = ('ontouchstart' in document) ? ['tap'] : ['click'],
...
			for (var i = 0, itemsLength = items[length]; i < itemsLength; i++) {
				if (items[i][getElementsByTagName]('UL')[length]) {
					on(items[i], mouseHover[0], enterHandler);
					on(items[i], mouseHover[1], leaveHandler);
					on(items[i], mouseClick[0], leaveHandler);

@englishextra
Copy link
Author

englishextra commented Apr 23, 2017

@thednp I ended up with this, and I'm satisfied now. Thanks for your work. You had some interesting techniques in your code.

@englishextra
Copy link
Author

englishextra commented Apr 23, 2017

@thednp here is the repo for you to test: https://github.com/englishextra/navbar.js

Works on Galaxy Tab Samsung / Desktop Windows 10

@thednp
Copy link
Owner

thednp commented Apr 23, 2017

It's a bit more complicated than I would like but thanks nevertheless. Keep in mind that responsive design has just been featured recently with navbar.js, so some small details haven't been polished yet.

@thednp
Copy link
Owner

thednp commented May 19, 2020

@englishextra please get ready to test the next version of navbar.js featuring ES6/ES7 scripting, rollup build tools, improved SCSS sources for faster render and mobile first design with responsive view special functions.

Currently testing and improving everything.

@thednp
Copy link
Owner

thednp commented May 21, 2020

@englishextra please check the roadmap, you might like what it's all about.

Closing this down, future commit will solve this issue.

@thednp thednp closed this as completed May 21, 2020
@thednp
Copy link
Owner

thednp commented May 28, 2020

npm install navbar.js

@englishextra
Copy link
Author

@thednp Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants