Multi-level Responsive Menu In Vanilla JavaScript – Last Navigation

Multi-level Responsive Menu In Vanilla JavaScript – Last Navigation

Final Navigation is a vanilla JavaScript responsive navigation system which transforms the common horizontal menu right into a togglable fullscreen menu on cell gadgets.

How you can use it:

Create the header navigation with nested menu gadgets.

<header id="header"> <nav class="nav container" id="nav"> <ul class="menu"> <li class="menu-item"><a href="">House</a> </li> <li class="menu-item"><a href="">Templates</a> <ul class="sub-menu"> <li><a href="">Gallery</a> <ul class="sub-menu"> <li><a href="">One</a></li> <li><a href="">Wwo</a></li> </ul> </li> <li><a href="">Publish</a> </li> </ul> </li> <li class="menu-item"><a href="">About</a> </li> <li class="menu-item"><a href="">Portfolio</a> <ul class="sub-menu"> <li><a href="">Best_project</a> </li> <li><a href="">Second</a> </li> <li><a href="">Final</a> <ul class="sub-menu"> <li><a href="">Showcase</a></li> </ul> </li> </ul> </li> <li class="menu-item"><a href="">Contact</a> </li> </ul> </nav> </header>

The primary JavaScript.

(operate() { var block, i, j, len, len1, ref, ref1, responsiveMenu, slideToggler, set off, bind = operate(fn, me), indexOf = [].indexOf || operate(merchandise) ; slideToggler = (operate() { operate slideToggler(el1) slideToggler.prototype.getHeight = operate() ; slideToggler.prototype.toggle = operate(time) { var currHeight, disp, el, finish, init, ref, repeat, begin; this.getHeight(); time || (time = this.peak / three + 150); currHeight = this.el.clientHeight * (getComputedStyle(this.el).show !== 'none'); ref = currHeight > this.peak / 2 ? [this.height, 0] : [0, this.height], begin = ref[0], finish = ref[1]; disp = finish - begin; el = this.el; this.el.classList[end === 0 ? 'remove' : 'add']('open'); this.el.model.cssText = "overflow: hidden; show: block;"; init = (new Date).getTime(); repeat = operate() ; return repeat(); }; return slideToggler; })(); ref = doc.querySelectorAll('.block'); for (i = zero, len = ref.size; i < len; i++) ref1 = doc.querySelectorAll('button'); for (j = zero, len1 = ref1.size; j < len1; j++) responsiveMenu = (operate() { operate responsiveMenu(nav, choose) { var base, ok, l, len2, len3, len4, m, menu, menuToggle, ref2, ref3, ref4, sub, subMenu, subMenuToggle; this.choose = choose; this.breaking = bind(this.breaking, this); this.createToggle = bind(this.createToggle, this); (base = this.choose).breaking || (base.breaking = '640px'); this.choose.maxBreaking = parseInt(this.choose.maxBreaking) || 1040; menu = nav.querySelector('.menu'); if (!slideToggler) ref2 = menu.querySelectorAll('ul'); for (ok = zero, len2 = ref2.size; ok < len2; ok++) menuToggle = this.createToggle(nav, 'menu-toggle', 'Menu'); menuToggle.addEventListener('click on', operate() ); ref3 = menu.querySelectorAll('ul'); for (l = zero, len3 = ref3.size; l < len3; l++) { subMenu = ref3[l]; subMenu.parentNode.classList.add('has-children'); subMenuToggle = this.createToggle(subMenu, 'sub-menu-toggle', '+'); subMenuToggle.addEventListener('click on', operate() ); } ref4 = menu.querySelectorAll('.has-children[class*=current] > ul'); for (m = zero, len4 = ref4.size; m < len4; m++) doc.addEventListener('DOMContentLoaded', this.breaking); window.addEventListener('resize', this.breaking); setTimeout(this.breaking, 3000); } responsiveMenu.prototype.createToggle = operate(menu, klass, label) doc.createElement("button"); toggle.classList.add(klass); toggle.appendChild(doc.createTextNode(label)); toggle.menu = menu.nodeName === 'UL' ? menu : menu.querySelector('.menu'); return menu.parentNode.insertBefore(toggle, menu.nextSibling); ; responsiveMenu.prototype.breaking = operate() ; responsiveMenu.prototype.getWidth = operate(el) ; return responsiveMenu; })(); new responsiveMenu(doc.querySelector('#nav'), ); }).name(this);

The put up Multi-level Responsive Menu In Vanilla JavaScript – Final Navigation appeared first on CSS Script.

Supply hyperlink

Leave a Reply

Your email address will not be published. Required fields are marked *