Aim-Aware Menus
How do I make an aim-aware menus?
After seeing Chris Coyier’s post about “forgiving” menus, and thinking back to Ben Kamens’ breakdown of Amazon’s mega dropdown and the subsequent jQuery plugin, I decided to use barycentric coordinates to create my own version of aim-aware menus.. What is a aim-aware menus? How do you make a aim-aware menus? This script and codes were developed by Jonathan Neal on 30 August 2022, Tuesday.
Aim-Aware Menus - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Aim-Aware Menus</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul id="navigation"> <li> <a href="#">Patas</a> <div> <h3>Patas</h3> <div><img src="http://placekitten.com/320/240"></div> </div> </li> <li> <a href="#">Golden Snub-Nosed</a> <div> <h3>Golden Snub-Nosed</h3> <div><img src="http://placekitten.com/g/320/240"></div> </div> </li> <li> <a href="#">Duoc Langur</a> <div> <h3>Duoc Langur</h3> <div><img src="http://placekitten.com/320/240"></div> </div> </li> <li> <a href="#">Baby Pygmy Marmoset</a> <div> <h3>Baby Pygmy Marmoset</h3> <div><img src="http://placekitten.com/g/320/240"></div> </div> </li> <li> <a href="#">Black Lion Tamarin</a> <div> <h3>Black Lion Tamarin</h3> <div><img src="http://placekitten.com/320/240"></div> </div> </li> <li> <a href="#">Monk Saki</a> <div> <h3>Monk Saki</h3> <div><img src="http://placekitten.com/g/320/240"></div> </div> </li> <li> <a href="#">Gabon Talapoin</a> <div> <h3>Gabon</h3> <div><img src="http://placekitten.com/320/240"></div> </div> </li> <li> <a href="#">Grivet</a> <div> <h3>Grivet</h3> <div><img src="http://placekitten.com/g/320/240"></div> </div> </li> <li> <a href="#">Red Leaf</a> <div> <h3>Red Leaf</h3> <div><img src="http://placekitten.com/320/240"></div> </div> </li> <li> <a href="#">King Colobus</a> <div> <h3>King Colobus</h3> <div><img src="http://placekitten.com/g/320/240"></div> </div> </li>
</ul> <script src='https://rawgit.com/jonathantneal/closest/master/closest.js'></script> <script src="js/index.js"></script>
</body>
</html>
Aim-Aware Menus - Script Codes CSS Codes
body { margin: 0;
}
ul { list-style: none; margin: 0; padding: 0; width: 10em;
}
ul li { position: relative;
}
ul li a { background-color: #EEE; display: block; padding: 1em;
}
ul li a + div { background: #CCC; clip: rect(0 0 0 0); position: absolute; left: 100%; top: 0; width: 320px;
}
li.active div { clip: auto;
}
img { height: 240px; width: 320px;
}
svg { position: absolute; top: 0; left: 0; z-index: 1;
}
Aim-Aware Menus - Script Codes JS Codes
(function () { document.addEventListener('DOMContentLoaded', function () { var inTriangle = false, navigation = document.getElementById('navigation'), x1, x2, x3, y1, y2, y3, link, timeout; navigation.addEventListener('mouseenter', onmouseenter); navigation.addEventListener('mouseleave', onmouseleave); function isInsideTriangle() { var b0 = (x2 - x1) * (y3 - y1) - (x3 - x1) * (y2 - y1), b1 = ((x2 - x0) * (y3 - y0) - (x3 - x0) * (y2 - y0)) / b0, b2 = ((x3 - x0) * (y1 - y0) - (x1 - x0) * (y3 - y0)) / b0, b3 = ((x1 - x0) * (y2 - y0) - (x2 - x0) * (y1 - y0)) / b0; return b1 > 0 && b2 > 0 && b3 > 0; } function onmouseenter(event) { document.addEventListener('mousemove', onmousemove); } function onmouseleave(event) { document.removeEventListener('mousemove', onmousemove); } function onmousemove(event) { var // get nearest anchor linkNominee = event.target.closest('li'); // set target coords x0 = event.clientX; y0 = event.clientY; if (!linkNominee) { clearTimeout(timeout); if (link && !link.contains(event.target)) { link.classList.remove('active'); link = null; } return; } // conditionally set triangle’s left point if (linkNominee === link) { if (!isInsideTriangle()) { x1 = x0; y1 = y0; } } else if (linkNominee !== link) { // end if still inside another link’s triangle if (link) { if (isInsideTriangle()) { clearTimeout(timeout); timeout = setTimeout(function () { if (link) { link.classList.remove('active'); link = null; } onmousemove(event); }, 200); return; } link.classList.remove('active'); } // set link link = linkNominee; var next = link.lastElementChild.getBoundingClientRect(); // set triangle’s left point x1 = x0; y1 = y0; // set triangle’s top point x2 = next.left; y2 = next.top; // set triangle’s bottom point x3 = next.left; y3 = next.bottom; // set link state link.classList.add('active'); } } });
})();
![Aim-Aware Menus - Script Codes](http://shots.codepen.io/jonneal/pen/yybEbo-512.jpg)
Developer | Jonathan Neal |
Username | jonneal |
Uploaded | August 30, 2022 |
Rating | 3.5 |
Size | 2,950 Kb |
Views | 38,456 |
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!
Name | Size |
Decorative Text Underline | 2,713 Kb |
Accessible breadcrumbs markup | 2,115 Kb |
Color Tiles | 2,479 Kb |
OkayNav in VanillaJS | 4,147 Kb |
SVG for Everybody | 3,207 Kb |
A Pen by Jonathan Neal | 1,609 Kb |
Object-fit polyfill | 1,919 Kb |
Chevrons in CSS | 1,908 Kb |
Preload Example | 2,335 Kb |
Yelp Ratings SVG | 2,284 Kb |
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!
Name | Username | Size |
Popup Modal | Aldlevine | 3,696 Kb |
CSS3 Button Examples | Volusion | 3,377 Kb |
We Simplify animation | Meodai | 48,169 Kb |
Price | Catcode | 2,623 Kb |
FontAwesome icons with animation | Nicotinell | 2,083 Kb |
CSS Dynamic Width Square Div | Elleestcrimi | 2,861 Kb |
Canvas snow | Win7killer | 2,572 Kb |
CSS3 Diamond | Rendro | 1,960 Kb |
Tree growth tests | Orchard | 3,818 Kb |
Getting Started | Viblast | 1,500 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!