thednp / navbar Goto Github PK

Hi. I'm using your new Navbar here: https://11.intuition.dev
as a starter 11ty v2.x kit.
(I have some z-index issue, but I'll fix it).

Also, I used your old lib here for a project: https://www.ubaycap.com

That is all. Thanks. I'll find a way to contribute later this year. Cheers, Vic

At the moment the navs of the sidebar slide out horizontal - a vertical navbar is more common - also a mobile sidebar in narrow mode (just a proposal)

In the wake of #12 I've decided to put everything on hold for a while to add some much needed improvements to Navbar.js. I'm currently updating the documentation and fine tuning the SCSS/JS code base, but here's what you can expect:

Breaking Changes

• there have been a series of markup changes to facilitate a more intuitive navigation and enable a better user experience;
• previously featured focusin / focusout handlers have been deprecated, now you have to press SPACE key to open/close a sub-menu;
• minor changes to the SCSS sources have been made to enable new features and remove deprecated markup;
• the JS source has been heavily modified to enable the new features.

Markup Changes

• removed the <i class="parent-toggle"> icon;
• added a <button class="subnav-toggle"> which is similar to <button class="navbar-toggle"> and greatly improves the functionality previously featured with the above mentioned icon;
• certain items will make use of new ARIA attributes to highlight the visibility state of sub-menus.

Accessibility

• <button class="subnav-toggle"> as well as <button class="navbar-toggle"> make use of aria-expanded attribute to inform the user on the current state of the sub-menu on mobile devices;
• <a> menu items also make use of aria-expanded attribute;
• KEYBOARD NAVIGATION DONE RIGHT :)

Custom Events

• show.navbar triggers immediately after the user interaction (mouseenter, keydown), can be defaultPrevented;
• shown.navbar triggers after all code has executed successfully and the animation (if any) has completed;
• hide.navbar triggers immediately after the user interaction (mouseleave, keydown), can be defaultPrevented;
• hidden.navbar triggers after all code has executed successfully and the animation (if any) has completed;
  As for custom events, I haven't decided on which elements should be which targets, related, that's something I open for the community to vote.

More details in the coming days. Keep close.

Thank you!

Hello dudes, thanks for this awesome script!

So, I took a look at the Bootstrap example and it seems using the version 3. Do you have plans to support Bootstrap 4?

Thank you!

As with all my libraries, navbar.js also receives the treatment of modernization. Let me tell you the new and redesigned navbar.js is packed for the modern web.

CHANGES:

• Overall redesign on functionality, standards and compatibility
  -- probably one of the most important change, the new navbar.js is now compatible with modern browsers and some legacy browsers like IE10+
  -- the library now sports a new dedicated polyfill for the above mentioned legacy browsers
  -- the navbar.js is now sporting flexbox with "mobile first" in mind

• Markup changes, requested by the community
  -- new elements supported
  --- <nav class="navbar"> a new menu wrapper, similar to Bootstrap Navbar, but a lot more simple concept, generally more functional and more efficient
  --- <button class="navbar-toggle"> handles the menu visibility toggle on mobile devices
  --- <a class="brand"> to help with site/app branding, inheriting some root menu item styling
  --- <ELEMENT class="menu-icon"> highlights whatever you want to highlight your menu items for
  --- <ELEMENT class="parent-icon"> highlights a parent menu item on desktop
  --- <ELEMENT class="parent-toggle"> highlights a parent menu item on mobile, also toggles the sub-menu visibility
  --- all above icons support font-icons as well
  -- new attributes
  --- <nav data-function="navbar"> this attribute enables the automatic initialization of a target
  --- <nav data-toggle-siblings="true"> changes the behavior of the toggle elements on mobile devices, when true is set, opening a sub-menu will automatically close sub-menus from other siblings; however, closing a sub-menu will also close ALL nested sub-menus, regardless of this option
  --- <nav data-delay="500"> the time period after a mouseleave event after which the sub-menu automatically close
  --- all the above attributes can be used for both <nav class="navbar"> and <ul class="nav">

• ES6/ES7 JavaScript rework of the script with various fixes and new features
  -- added a dispose() public method
  -- attached the initialization object to the target element
  -- added initialization options: breakpoint, toggleSiblings and delay
  -- the mouseleave handler can work differently depending where your mouse cursor goes to: if it's a new menu item, the current open sub-menu will be instantly hidden, if not it will fade-out the current open sub-menu item, which is also fixed (some CSS and JS inconsistency there)
  -- the mouseenter handler no longer checks for specific classes, but an internally defined variable
  -- the mouseleave handler only works on desktop
  -- added a click handler to do the mobile view sub-menu toggle, which only works on mobile view only and also works for the new element <button class="navbar-toggle"> with similar functionality
  -- the Navbar() constructor can target both a <nav class="navbar"> and a <ul class="menu">
  -- the library includes initialization functionality that works regardless of the location of the library within your document, both <header> and <footer>

• LESS no more
  -- due to time constrains and project complexity I've decided to stop development of LESS sources
  -- removed all LESS together and other related build scripts

• SCSS
  -- added new @functions and @mixins
  -- reworked the mixins for more modular and flexible styling, allowing you to combine them for various combinations and having the least possible redundant style rules
  -- most important mixins can be extended similar to a programming language class
  -- reworks also focused on optimizing the render load with the goal of "mobile first"
  -- added inherit and auto value handling for select @variables to keep consistency in check

This is a draft. Expect changes.

Sometimes moving outside of links breaks the dropdown (happens with all major browsers). Any way to overcome this without sacrificing transitions?

I see:
var menu = new Navbar('.nav')

Is there any methods called on menu? Or just to init?

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because we are using your CI build statuses to figure out when to notify you about breaking changes.

Since we did not receive a CI status on the greenkeeper/initial branch, we assume that you still need to configure it.

If you have already set up a CI for this repository, you might need to check your configuration. Make sure it will run on all new branches. If you don’t want it to run on every branch, you can whitelist branches starting with greenkeeper/.

We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

Once you have installed CI on this repository, you’ll need to re-trigger Greenkeeper’s initial Pull Request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper integration’s white list on Github. You'll find this list on your repo or organiszation’s settings page, under Installed GitHub Apps.

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);

is minifill required for ie11 support?

Thanks for the nice plugin. Please give support on focus also.

I am now working on LESS/SASS sources and need a little bit of help, I need a build.js script to minify the JS and compile&minify the CSS.

Perhaps @RyanZim can you help with some suggestion?

We have specific things we want to do in CSS only on .open-mobile mode.

• Put browser Responsive tool in mobile mode
• Open menu
• Switch browser Responsive tool > breakpoint width (desktop)
• Observe .open-mobile class still applied

I feel like we could ResizeObserver here and programmatically close mobile menu when appropriate.

Your thoughts? Too much bloat for edge use case may be a concern, but maybe it's negligible.

Because their could be a typography rules for ul ol it's good thing to reset ol ul in navbar.css

.nav,
.nav ol,
.nav ul {
	list-style: none;
	padding: 0;
}

在钉钉平台打开 菜单失效