Pure CSS Menu

Developer
Robin Brons
Size
3,321 Kb
Views
32,368
  1. Pure CSS Menu Previews
  2. Pure CSS Menu HTML Codes
  3. Pure CSS Menu CSS Codes
  4. Pure CSS Menu JS Codes

How do I make an pure css menu?

Made this after I saw a Dribbble shot of Rovane Durso (Best in Chrome). What is a pure css menu? How do you make a pure css menu? This script and codes were developed by Robin Brons on 16 September 2022, Friday.

Pure CSS Menu Previews
IQ Test

Pure CSS Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure CSS Menu</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Open+Sans:700,600);
body, html { width: 100%; height: 100%; font-family: 'Open Sans', sans-serif; font-weight: 700;
}
body { background: #A7D5CD; /* */
}
.wrap { width: 300px; margin: 0 auto; margin-top: 30px;
}
.menu { width: 300px; text-transform: uppercase; font-size: 14px;
}
input#toggle { position: absolute; z-index: -9999;
}
input#toggle:checked ~ label { background: #42423E;
}
input#toggle:checked ~ ul { display: block; opacity: 1; animation-play-state: running;
}
ul { margin: 20px 0 0 0; display: none; opacity: 0; animation: fade .5s linear; animation-play-state: paused;
}
label, li { width: 300px; background: #DF826B; display: block; padding: 15px 20px; cursor: pointer;
}
label { box-shadow: 0 6px 10px -6px #4F4F4B;
}
li { border-bottom: 3px solid #42423E;
}
li:hover, label:hover { background: #42423E;
}
ul:before { display: block; content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid #DF826B; position: relative; left: 100%;
}
li:last-child { border: none; box-shadow: 0 6px 10px -6px #4F4F4B;
}
a, span, h1 { color: #FFFFFF; text-fill-color: transparent; background: linear-gradient(transparent, transparent), linear-gradient(to bottom, #ffffff 0%,#efe9e8 100%) no-repeat; background: -o-linear-gradient(transparent, transparent); -webkit-background-clip: text; cursor: pointer;
}
h1{ font-size: 20px; text-transform: uppercase; text-align: center; margin: 0 0 10px 40px;
}
@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="wrap"> <h1>Best in Chrome</h1> <div class="menu"> <input type="checkbox" name="toggle" id="toggle"/> <label for="toggle"><span>Profile</span></label> <ul> <li><a>Account Settings</a></li> <li><a>Statistics</a></li> <li><a>Link</a></li> <li><a>Record</a></li> <li><a>Database</a></li> <li><a>Sign Out</a></li> </ul> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Pure CSS Menu - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,600);
body, html { width: 100%; height: 100%; font-family: 'Open Sans', sans-serif; font-weight: 700;
}
body { background: #A7D5CD; /* */
}
.wrap { width: 300px; margin: 0 auto; margin-top: 30px;
}
.menu { width: 300px; text-transform: uppercase; font-size: 14px;
}
input#toggle { position: absolute; z-index: -9999;
}
input#toggle:checked ~ label { background: #42423E;
}
input#toggle:checked ~ ul { display: block; opacity: 1; animation-play-state: running;
}
ul { margin: 20px 0 0 0; display: none; opacity: 0; animation: fade .5s linear; animation-play-state: paused;
}
label, li { width: 300px; background: #DF826B; display: block; padding: 15px 20px; cursor: pointer;
}
label { box-shadow: 0 6px 10px -6px #4F4F4B;
}
li { border-bottom: 3px solid #42423E;
}
li:hover, label:hover { background: #42423E;
}
ul:before { display: block; content: ''; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid #DF826B; position: relative; left: 100%;
}
li:last-child { border: none; box-shadow: 0 6px 10px -6px #4F4F4B;
}
a, span, h1 { color: #FFFFFF; text-fill-color: transparent; background: linear-gradient(transparent, transparent), linear-gradient(to bottom, #ffffff 0%,#efe9e8 100%) no-repeat; background: -o-linear-gradient(transparent, transparent); -webkit-background-clip: text; cursor: pointer;
}
h1{ font-size: 20px; text-transform: uppercase; text-align: center; margin: 0 0 10px 40px;
}
@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; }
}

Pure CSS Menu - Script Codes JS Codes

/* Transition not working?! If you have a solution please feel free to comment :) */
Pure CSS Menu - Script Codes
Pure CSS Menu - Script Codes
Home Page Home
Developer Robin Brons
Username bronsrobin
Uploaded September 16, 2022
Rating 3.5
Size 3,321 Kb
Views 32,368
Do you need developer help for Pure CSS 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!

Robin Brons (bronsrobin) Script Codes
Name
A Pen by Robin Brons
Pure CSS Arrow
Price Tags
CSS Price Table
Having fun with pattern and pseudo-selectors
Codepen.io Chrome Extension
Chrome Cast Loader
Thumbnail hover
Doggie
Pure CSS Image Slider
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!