Skip to content

quick links page #10

@joeldom

Description

@joeldom

site that has a comma rose grid of links to categories or predefined directories to house and pull or just direct links to but this would be the top nav for it

Image

code example
https://codepen.io/danielpox/pen/PZeLYE

hexagon layout js

$(".hexagon").click(function() {
	var hexagon = $(this);
	if (!hexagon.hasClass("opened")) {
		hexagon.toggleClass("opened");
		
		$(".hexagon.opened button").click(function() {
			hexagon.removeClass(".opened");
		});
	}
});

hex styling

.hexagon {
	z-index: 2;
	display: flex;
	justify-content: center;
	align-items: center;
	
	width: 173px;
	height: 200px;
	
	color: #333;
	background: #f2f2f2;
	
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	cursor: pointer;
	
	transform: scale(0.8);
	
	transition: all 0.4s ease-in-out;
}

.hexagon:hover {
	transform: scale(0.9);
}

Metadata

Metadata

Assignees

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions