Aim-Aware Menus

Developer
Jonathan Neal
Size
2,950 Kb
Views
38,456
  1. Aim-Aware Menus Previews
  2. Aim-Aware Menus HTML Codes
  3. Aim-Aware Menus CSS Codes
  4. Aim-Aware Menus JS Codes

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 Previews
IQ Test

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
Aim-Aware Menus - Script Codes
Home Page Home
Developer Jonathan Neal
Username jonneal
Uploaded August 30, 2022
Rating 3.5
Size 2,950 Kb
Views 38,456
Do you need developer help for Aim-Aware Menus?

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!

Jonathan Neal (jonneal) Script Codes
Name
Forty Lines for Smooth Hash Scrolling
OkayNav in VanillaJS
Chevrons in CSS
Element Query Classnames
Yelp Ratings SVG
Color Tiles
Object-fit polyfill
A Pen by Jonathan Neal
Responsive Text Sizes
Decorative Text Underline
Create amazing video scripts 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!