Morphing Fullscreen Hamburger Navigation With JavaScript And CSS3

In CSS Tutorial, Navigation Dec 12, 2017

A high-performance morphing navigation concept that reveals a fullscreen navigation menu as you click/tap on the hamburger toggle button. Built with plain JavaScript and CSS/CSS3.

You may know that the humburger menus are most hot favorite most of UI developers and almost all modern websites uses it.

Because it’s first look within the reputable Fb app, it seems like the hamburger, or cellular icon, is ready to say the identify of King of Menus and Ruler of Responsive and Cellular Design Patterns. So if you’re searching for new tactics to animate the ones 3 strains in to a neat X, take a look at this publish.

Morphing Fullscreen Hamburger Navigation

Create the hamburger menu toggle button.

<div identification="nav-bg" elegance="btn"></div> <div identification="toggle-btn" elegance="btn"> <span></span> <span></span> <span></span> </div>

Insert the navigation menu into your major content material.

<div elegance="wrapper"> <nav> <ul> <li><a category="hyperlink" href="#">House</a></li> <li><a category="hyperlink" href="#">About</a></li> <li><a category="hyperlink" href="#">Touch</a></li> </ul> </nav> <div identification="content material"> Extra content material right here </div> </div>

The CSS kinds for the navigation background.


Taste the toggle button.

.btn #toggle-btn show: flex; flex-direction: column; justify-content: heart; align-items: heart; colour: var(--green); /*box-shadow: zero 6px 12px rgba(zero,zero,zero,.1);*/ transition: remodel .3s; #toggle-btn span #toggle-btn span #toggle-btn span + span #toggle-btn span:sooner than, #toggle-btn span:after #toggle-btn span:sooner than #toggle-btn span:after proper: zero; border-radius: zero 3px 3px zero; #toggle-btn.proven span:nth-of-type(1):sooner than #toggle-btn.proven span:nth-of-type(1):after #toggle-btn.proven span:nth-of-type(Three):sooner than #toggle-btn.proven span:nth-of-type(Three):after remodel: translate3d(-3px, -Three.5px, zero) rotate(45deg); #toggle-btn.proven span:nth-of-type(2):sooner than, #toggle-btn.proven span:nth-of-type(2):after opacity: zero; #toggle-btn.proven span:nth-of-type(2):sooner than #toggle-btn.proven span:nth-of-type(2):after #toggle-btn.proven:sooner than #toggle-btn:sooner than content material: ''; transition: .2s .2s; place: absolute; height: 3px; left: zero; width: 100%; peak: 100%; background: rgba(zero,zero,zero,.1); border-radius: inherit; filter out: blur(5px); z-index: -2; #toggle-btn:after content material: ''; place: absolute; height: zero; left: zero; width: 100%; peak: 100%; border-radius: inherit; background: #fafafa; z-index: -1; 

The primary CSS for the navigation menu.

nav nav ul nav li nav li + li #toggle-btn.proven ~ .wrapper nav li #toggle-btn.proven ~ .wrapper nav li:nth-child(1) #toggle-btn.proven ~ .wrapper nav li:nth-child(2) #toggle-btn.proven ~ .wrapper nav li:nth-child(Three)

The primary JavaScript.

var elem = file.querySelector('#nav-bg'), toggleBtn = file.querySelector('#toggle-btn'), elemH = elem.getBoundingClientRect().peak, elemW = elem.getBoundingClientRect().width; var open = false; var scale = undefined, offsetX = undefined, offsetY = undefined; var calculateValues = serve as calculateValues() var w = window.innerWidth; var h = window.innerHeight; //const cssStyles = getComputedStyle(elem); //const offsetValue = Quantity(cssStyles.getPropertyValue('--offset-value')); var offsetValue = Quantity(getComputedStyle(elem).getPropertyValue('--offset-value')); // Offsets to heart the circle offsetX = w / 2 - elemW / 2 - offsetValue; offsetY = h / 2 - elemH / 2 - offsetValue; // Just right outdated pythagoras var radius = Math.sqrt(Math.pow(h, 2) + Math.pow(w, 2)); scale = radius / (elemW / 2) / 2 + .1; // Upload '.1' to make amends for Safari sub pixel blur factor go back scale; ; var openMenu = serve as openMenu() elem.taste.setProperty("--translate-x", offsetX + 'px'); elem.taste.setProperty("--translate-y", '-' + offsetY + 'px'); elem.taste.setProperty("--scale", scale); ; var closeMenu = serve as closeMenu() elem.taste.setProperty("--scale", 1); elem.taste.setProperty("--translate-x", zero); elem.taste.setProperty("--translate-y", zero); ; var animateMenu = serve as animateMenu() ; var toggleMenu = serve as toggleMenu() open = !open; animateMenu(); toggleBtn.classList.toggle('proven'); ; var resizeHandler = serve as resizeHandler() ; calculateValues(); //toggleBtn.onclick = toggleMenu; toggleBtn.addEventListener('click on', toggleMenu, false); window.addEventListener("resize", resizeHandler, false);

The publish Morphing Fullscreen Hamburger Navigation With JavaScript And CSS3 seemed first on CSS Script.


Leave a Reply

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