CSS Hex Menu Idea

Developer
Laerin
Size
2,024 Kb
Views
10,120
  1. CSS Hex Menu Idea Previews
  2. CSS Hex Menu Idea HTML Codes
  3. CSS Hex Menu Idea CSS Codes

How do I make an css hex menu idea?

A hex-based menu in CSS. Needs some further tweaking.. What is a css hex menu idea? How do you make a css hex menu idea? This script and codes were developed by Laerin on 26 December 2022, Monday.

CSS Hex Menu Idea Previews
IQ Test

CSS Hex Menu Idea - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Hex Menu Idea</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="back"> Hex Menu
</div>
<div id="content"> <div class="hex hex-row" > <div class="sub-hex hex"> <div class="sub-hex hex"></div> <div class="sub-hex hex bottom"> <div class="sub-hex hex"> <div class="sub-hex hex top"></div> <div class="sub-hex hex"></div> <div class="sub-hex hex bottom"></div> </div> <div class="sub-hex hex bottom"></div> </div> </div> </div> <div class="hex hex-row even" > <div class="sub-hex hex"></div> </div> <div class="hex hex-row"></div>
</div>
</body>
</html>

CSS Hex Menu Idea - Script Codes CSS Codes

body{ background-color:#2e2e2e; width:100%; overflow-x: hidden;
}
#back{ position:absolute; z-index:-10; color:#d4d4d4; width:150px; border-radius:10px; background-color:#4e4e4e; height:40px; left:120px; top:250px; text-align:center; font-family:consolas, monospace, sans-serif; font-size:20px; padding-top:10px; transition:all 0.5s linear;
}
.hex:before{ content: " "; width: 0; height: 0; border-bottom: 30px solid #6c6; border-left: 52px solid transparent; border-right: 52px solid transparent; position:absolute; top: -30px; transition: all .3s ease; left:0px;
}
.hex{ float: left; margin-left: -3px; margin-top: 33px; width: 104px; height: 60px; background-color:#6c6; position:relative; transition: all .3s ease; opacity: 0.5; cursor: pointer;
}
.hex:after{ content: " "; width: 0; position: absolute; bottom: -30px; border-top: 30px solid #6c6; border-left: 52px solid transparent; border-right: 52px solid transparent; transition: all .3s ease; left:0px;
}
.hex-row { clear: left;
}
.hex-row.even { margin-left: 51px;
}
.hex:hover > .sub-hex{ opacity:1; visibility:visible;
}
.hex:hover > .sub-hex:hover{ opacity:1; visibility:visible;
}
.sub-hex{ position:absolute; left:110px; top:0px; margin-top:0px; opacity:0; visibility:hidden;
}
.sub-hex.bottom{ left:57px; top:93px;
}
.sub-hex.top{ left:56px; top:-93px;
}
.hex:hover{ /*background-color:#66e;*/ opacity:1;
}
.hex:hover:after{ /*border-top-color:#66e;*/
}
.hex:hover:before{ /*border-bottom-color:#66e;*/
}
.hex:hover > .hex{ opacity:0.5;
}
body:hover > #back{ opacity:0;
}
CSS Hex Menu Idea - Script Codes
CSS Hex Menu Idea - Script Codes
Home Page Home
Developer Laerin
Username xgundam05
Uploaded December 26, 2022
Rating 4.5
Size 2,024 Kb
Views 10,120
Do you need developer help for CSS Hex Menu Idea?

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!

Laerin (xgundam05) Script Codes
Name
WebGL Shader Editor mockup
YALP - Yet Another Life Pen
Threaded Voxel-based Terrain example
Perlin Terrain
SVG BSP Generator
CSS Discrete Progress Bar
Stat Polygon using JS and SVG
Javascript Hex Background
BSP Dungeon Generation
Matrix Effect
Create amazing web content 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!