CSS Falling Shelf Menu

Developer
Matt Popovich
Size
1,690 Kb
Views
58,696
  1. CSS Falling Shelf Menu Previews
  2. CSS Falling Shelf Menu HTML Codes
  3. CSS Falling Shelf Menu CSS Codes

How do I make an css falling shelf menu?

What is a css falling shelf menu? How do you make a css falling shelf menu? This script and codes were developed by Matt Popovich on 02 August 2022, Tuesday.

CSS Falling Shelf Menu Previews
IQ Test

CSS Falling Shelf Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Falling Shelf Menu</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <input id="toggle" type="checkbox"></input>
<label for="toggle" class="menu"> <div class="top"></div> <div class="mid"></div> <div class="bot"></div>
</label>
</body>
</html>

CSS Falling Shelf Menu - Script Codes CSS Codes

body { background: #183152; max-width: 100%; overflow-x: hidden; padding: 0; margin: 0;
}
#toggle { display: none; }
.menu { cursor: pointer; position: absolute; top: 3em; right: 4.5em; width: 2em; height: 45px; z-index: 5;
}
.menu div { position: relative; width: 3em; height: 7px; background-color: #fff; margin-top: 8px; transition: all 0.3s ease-in-out;
}
#toggle:checked + .menu .top { transform: rotate(-225deg); margin-top: 25px;
}
#toggle:checked + .menu .bot { opacity: 0; transform: translateY(100px) rotate(-5deg);
}
#toggle:checked + .menu .mid { transform: rotate(225deg); margin-top: -7px;
}
CSS Falling Shelf Menu - Script Codes
CSS Falling Shelf Menu - Script Codes
Home Page Home
Developer Matt Popovich
Username mpopv
Uploaded August 02, 2022
Rating 3
Size 1,690 Kb
Views 58,696
Do you need developer help for CSS Falling Shelf Menu?

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!

Matt Popovich (mpopv) Script Codes
Name
Animated Email Signup Form
Magazine article
SCSS Grid System
Vader Arrives on the Sanctuary Moon
Make Your Own Marco Mag
Fog city night festival
FOLLOW UR DREAMS
Space Mono
Profile CSS
MoonJS Hello World
Create amazing art & images 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!