Skip to content

Instantly share code, notes, and snippets.

@Gipphe

Gipphe/index.html

Created October 17, 2023 20:49
Show Gist options
  • Save Gipphe/7fb246703ba1a08bb257430b5e9cedab to your computer and use it in GitHub Desktop.
Save Gipphe/7fb246703ba1a08bb257430b5e9cedab to your computer and use it in GitHub Desktop.
Download ZIP
Color animated menu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
position: relative;
}
.content {
height: 200px;
width: 200px;
display: none;
position: absolute;
top: 0;
z-index: 10;
background-color: #ddd;
}
.container:focus-within,
.container:focus {
opacity: 0;
}
.container:focus-within + .content,
.container:focus + .content {
display: initial;
}
.container {
display: flex;
flex-flow: column;
gap: 10px;
width: 500px;
}
.btn {
border: 1px #888;
border-radius: 4px;
background-color: #ddd;
text-transform: uppercase;
padding: 0;
margin: 0;
position: relative;
cursor: pointer;
}
.backdrop {
width: 20px;
max-width: calc(100% + 20px);
transition: width 1s, clip-path 0.5s ease-in-out;
position: absolute;
height: 100%;
z-index: 1;
border-radius: 4px;
clip-path: polygon(
0% 0%,
calc(100% - 5px) 0%,
100% 50%,
calc(100% - 5px) 100%,
0% 100%
);
}
.color1 {
background-color: red;
}
.color2 {
background-color: blue;
}
.color3 {
background-color: cyan;
}
.color4 {
background-color: fuchsia;
}
.color5 {
background-color: mediumaquamarine;
}
.color6 {
background-color: tomato;
}
.btn:hover .backdrop {
width: 100%;
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%);
}
.text {
position: relative;
z-index: 2;
padding: 10px 25px;
display: flex;
justify-content: space-between;
}
</style>
</head>
<body>
<div class="container">
<button class="btn">
<div class="backdrop color1"></div>
<div class="text">
<div>Barn</div>
<div>fra kr. 1700,-</div>
</div>
</button>
<button class="btn">
<div class="backdrop color2"></div>
<div class="text">
<div>Portrett</div>
<div>fra kr. 1000,-</div>
</div>
</button>
<button class="btn">
<div class="backdrop color3"></div>
<div class="text">
<div>Familie</div>
<div>fra kr. 1700,-</div>
</div>
</button>
<button class="btn">
<div class="backdrop color4"></div>
<div class="text">
<div>Bryllup</div>
<div>fra kr. 16.000,-</div>
</div>
</button>
<button class="btn">
<div class="backdrop color5"></div>
<div class="text">
<div>Bedrifter og næringsliv</div>
<div></div>
</div>
</button>
<button class="btn">
<div class="backdrop color6"></div>
<div class="text">
<div>Design</div>
<div></div>
</div>
</button>
</div>
<div class="content">Here is some content</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment