Triangle-In Menu

Size
4,182 Kb
Views
16,192

How do I make an triangle-in menu?

Fun with SVG blend modes. Set $blend-mode to any of the values here: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode. What is a triangle-in menu? How do you make a triangle-in menu? This script and codes were developed by Joseph Martucci on 13 October 2022, Thursday.

Triangle-In Menu Previews

Triangle-In Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Triangle-In Menu</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
<div id="menu">MENU</div>
<div class="menu-overlay">
<svg> <polygon id="left-triangle" points="0,0 0,100 50,50"/> <polygon id="top-triangle" points="0,0 100,0 50,50"/> <polygon id="right-triangle" points="100,100 100,0 50,50"/> <polygon id="bottom-triangle" points="100,100 0,100 50,50"/>
</svg> <nav class="menu-overlay__menu"> <a href="#">People they come together</a> <a href="#">People they fall apart</a> <a href="#">No one can stop us now</a> <a href="#">'Cause we are all made of stars</a> </nav>
</div> <script src="js/index.js"></script>
</body>
</html>

Triangle-In Menu - Script Codes CSS Codes

body, html { height: 100%; font-family: 'Source Sans Pro', sans-serif;
}
body { background: url(https://unsplash.imgix.net/photo-1429305336325-b84ace7eba3b?dpr=2&fit=crop&fm=jpg&h=700&q=75&w=1050); background-size: cover;
}
.menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 100;
}
.menu-overlay__menu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; z-index: 1000; height: 100%;
}
.menu-overlay__menu a, .menu-overlay__menu a:link { color: #e8effc; display: block; text-decoration: none; margin-bottom: 20px; font-weight: 700; text-transform: uppercase; font-size: 24px; opacity: 0; -webkit-transform: translateY(-100vh); transform: translateY(-100vh);
}
.menu-overlay__menu a:nth-child(1), .menu-overlay__menu a:link:nth-child(1) { -webkit-transition: opacity 0.3s ease-in-out 0.3s, -webkit-transform 0.1s linear; transition: opacity 0.3s ease-in-out 0.3s, -webkit-transform 0.1s linear; transition: opacity 0.3s ease-in-out 0.3s, transform 0.1s linear; transition: opacity 0.3s ease-in-out 0.3s, transform 0.1s linear, -webkit-transform 0.1s linear;
}
.menu-overlay__menu a:nth-child(2), .menu-overlay__menu a:link:nth-child(2) { -webkit-transition: opacity 0.3s ease-in-out 0.6s, -webkit-transform 0.1s linear; transition: opacity 0.3s ease-in-out 0.6s, -webkit-transform 0.1s linear; transition: opacity 0.3s ease-in-out 0.6s, transform 0.1s linear; transition: opacity 0.3s ease-in-out 0.6s, transform 0.1s linear, -webkit-transform 0.1s linear;
}
.menu-overlay__menu a:nth-child(3), .menu-overlay__menu a:link:nth-child(3) { -webkit-transition: opacity 0.3s ease-in-out 0.9s, -webkit-transform 0.1s linear; transition: opacity 0.3s ease-in-out 0.9s, -webkit-transform 0.1s linear; transition: opacity 0.3s ease-in-out 0.9s, transform 0.1s linear; transition: opacity 0.3s ease-in-out 0.9s, transform 0.1s linear, -webkit-transform 0.1s linear;
}
.menu-overlay__menu a:nth-child(4), .menu-overlay__menu a:link:nth-child(4) { -webkit-transition: opacity 0.3s ease-in-out 1.2s, -webkit-transform 0.1s linear; transition: opacity 0.3s ease-in-out 1.2s, -webkit-transform 0.1s linear; transition: opacity 0.3s ease-in-out 1.2s, transform 0.1s linear; transition: opacity 0.3s ease-in-out 1.2s, transform 0.1s linear, -webkit-transform 0.1s linear;
}
.menu-overlay__menu a:nth-child(5), .menu-overlay__menu a:link:nth-child(5) { -webkit-transition: opacity 0.3s ease-in-out 1.5s, -webkit-transform 0.1s linear; transition: opacity 0.3s ease-in-out 1.5s, -webkit-transform 0.1s linear; transition: opacity 0.3s ease-in-out 1.5s, transform 0.1s linear; transition: opacity 0.3s ease-in-out 1.5s, transform 0.1s linear, -webkit-transform 0.1s linear;
}
.menu-overlay__menu a:nth-child(6), .menu-overlay__menu a:link:nth-child(6) { -webkit-transition: opacity 0.3s ease-in-out 1.8s, -webkit-transform 0.1s linear; transition: opacity 0.3s ease-in-out 1.8s, -webkit-transform 0.1s linear; transition: opacity 0.3s ease-in-out 1.8s, transform 0.1s linear; transition: opacity 0.3s ease-in-out 1.8s, transform 0.1s linear, -webkit-transform 0.1s linear;
}
.menu-overlay__menu a:nth-child(7), .menu-overlay__menu a:link:nth-child(7) { -webkit-transition: opacity 0.3s ease-in-out 2.1s, -webkit-transform 0.1s linear; transition: opacity 0.3s ease-in-out 2.1s, -webkit-transform 0.1s linear; transition: opacity 0.3s ease-in-out 2.1s, transform 0.1s linear; transition: opacity 0.3s ease-in-out 2.1s, transform 0.1s linear, -webkit-transform 0.1s linear;
}
.menu-overlay__menu a:nth-child(8), .menu-overlay__menu a:link:nth-child(8) { -webkit-transition: opacity 0.3s ease-in-out 2.4s, -webkit-transform 0.1s linear; transition: opacity 0.3s ease-in-out 2.4s, -webkit-transform 0.1s linear; transition: opacity 0.3s ease-in-out 2.4s, transform 0.1s linear; transition: opacity 0.3s ease-in-out 2.4s, transform 0.1s linear, -webkit-transform 0.1s linear;
}
.menu-overlay__menu a:nth-child(9), .menu-overlay__menu a:link:nth-child(9) { -webkit-transition: opacity 0.3s ease-in-out 2.7s, -webkit-transform 0.1s linear; transition: opacity 0.3s ease-in-out 2.7s, -webkit-transform 0.1s linear; transition: opacity 0.3s ease-in-out 2.7s, transform 0.1s linear; transition: opacity 0.3s ease-in-out 2.7s, transform 0.1s linear, -webkit-transform 0.1s linear;
}
.menu-overlay.active .menu-overlay__menu a, .menu-overlay.active .menu-overlay__menu a:link { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);
}
.menu-overlay svg { background: url(https://unsplash.imgix.net/photo-1429305336325-b84ace7eba3b?dpr=2&fit=crop&fm=jpg&h=700&q=75&w=1050); background-size: cover;
}
#menu { position: fixed; z-index: 500; top: 28px; right: 40px; background: transparent; padding: 8px 12px; color: white; border: 2px solid #3d588f;
}
svg { width: 100%; height: 100%; position: absolute;
}
polygon { opacity: 0; mix-blend-mode: multiply;
}
.menu-overlay.active polygon { opacity: .8;
}
#top-triangle { fill: #708bc2; -webkit-transition: all .2s linear 0s; transition: all .2s linear 0s;
}
#right-triangle { fill: #4563a1; -webkit-transition: all .2s linear .2s; transition: all .2s linear .2s;
}
#bottom-triangle { fill: #708bc2; -webkit-transition: all .2s linear .4s; transition: all .2s linear .4s;
}
#left-triangle { fill: #4563a1; -webkit-transition: all .6s linear .6s; transition: all .6s linear .6s;
}

Triangle-In Menu - Script Codes JS Codes

function sizeTriangles(){ var w = window.innerWidth; var h = window.innerHeight; var leftTriangle = document.getElementById('left-triangle'); var rightTriangle = document.getElementById('right-triangle'); var topTriangle = document.getElementById('top-triangle'); var bottomTriangle = document.getElementById('bottom-triangle'); leftTriangle.setAttribute("points", "0,0 0,"+h+", "+w/2+", "+h/2); topTriangle.setAttribute("points", "0,0 " +w+",0 "+w/2+","+h/2); rightTriangle.setAttribute("points", w/2+","+h/2+" "+w+",0 "+w+","+h); bottomTriangle.setAttribute("points", "0,"+h+" "+w/2+","+h/2+" "+w+","+h);
}
sizeTriangles();
window.addEventListener('resize', function(event){ sizeTriangles();
});
document.getElementById('menu').addEventListener('click', function(event){ if(event.target.getAttribute('data-open') === 'true'){ event.target.innerHTML = "MENU"; event.target.setAttribute('data-open', 'false'); } else{ event.target.innerHTML = "CLOSE"; event.target.setAttribute('data-open', 'true'); } var menu = document.querySelector('.menu-overlay'); if(menu.classList.contains('active')){ menu.classList.remove('active'); } else{ menu.classList.add('active'); }
})
Triangle-In Menu - Script Codes
Triangle-In Menu - Script Codes
Home Page Home
Developer Joseph Martucci
Username jjmartucci
Uploaded October 13, 2022
Rating 4.5
Size 4,182 Kb
Views 16,192
Do you need developer help for Triangle-In Menu?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Joseph Martucci (jjmartucci) Script Codes
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!