Pure Css3 Menu

Developer

Size

3,056 Kb

Views

22,264

Pure Css3 Menu Previews
Pure Css3 Menu HTML Codes
Pure Css3 Menu CSS Codes

How do I make an pure css3 menu?

What is a pure css3 menu? How do you make a pure css3 menu? This script and codes were developed by Nick Mkrtchyan on 10 November 2022, Thursday.

Pure Css3 Menu Previews

Pure Css3 Menu - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pure Css3 Menu</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <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! */ html { height: 100%;
}
body { background: -webkit-linear-gradient(rgba(5, 610, 255, 0.4), rgba(135, 60, 255, 0.0) 80%), -webkit-linear-gradient(-45deg, rgba(120, 155, 255, 0.9) 25%, rgba(255, 160, 65, 0.9) 76%);
}
.cf:before, .cf:after { content:" "; display: table;
}
.cf:after { clear: both;
}
.cf { *zoom: 1;
}
.menu { list-style:none; margin: 50px auto; width: 800px; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content;
}
.menu > li { background: #34495e; float: left; position: relative; -webkit-transform: skewX(25deg);
}
.menu a { display: block; color: #fff; text-transform: uppercase; text-decoration: none; font-family: Arial, Helvetica; font-size: 14px;
}
.menu li:hover { background: #e74c3c;
}
.menu > li > a { -webkit-transform: skewX(-25deg); padding: 1em 2em;
}
/* Dropdown */
.submenu { position: absolute; width: 200px; left: 50%; margin-left: -100px; -webkit-transform: skewX(-25deg); -webkit-transform-origin: left top;
}
.submenu li { background-color: #34495e; position: relative; overflow: hidden;
}
.submenu > li > a { padding: 1em 2em;
}
.submenu > li::after { content:''; position: absolute; top: -125%; height: 100%; width: 100%; box-shadow: 0 0 50px rgba(0, 0, 0, .9);
}
/* Odd stuff */
.submenu > li:nth-child(odd) { -webkit-transform: skewX(-25deg) translateX(0);
}
.submenu > li:nth-child(odd) > a { -webkit-transform: skewX(25deg);
}
.submenu > li:nth-child(odd)::after { right: -50%; -webkit-transform: skewX(-25deg) rotate(3deg);
}
/* Even stuff */
.submenu > li:nth-child(even) { -webkit-transform: skewX(25deg) translateX(0);
}
.submenu > li:nth-child(even) > a { -webkit-transform: skewX(-25deg);
}
.submenu > li:nth-child(even)::after { left: -50%; -webkit-transform: skewX(25deg) rotate(3deg);
}
/* Show dropdown */
.submenu, .submenu li { opacity: 0; visibility: hidden;
}
.submenu li { transition: .2s ease -webkit-transform;
}
.menu > li:hover .submenu, .menu > li:hover .submenu li { opacity: 1; visibility: visible;
}
.menu > li:hover .submenu li:nth-child(even) { -webkit-transform: skewX(25deg) translateX(15px);
}
.menu > li:hover .submenu li:nth-child(odd) { -webkit-transform: skewX(-25deg) translateX(-15px);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ul class="menu cf"> <li><a href="#">Home</a></li> <li> <a href="#">Lessons</a> <ul class="submenu"> <li><a href="#">CSS3</a></li> <li><a href="#">HTML5</a></li> <li><a href="#">PHP</a></li> <li><a href="#">JavaScript</a></li> </ul> </li> <li><a href="#">Contacts</a></li> <li><a href="#">About Us</a></li>
</ul>
</body>
</html>

Pure Css3 Menu - Script Codes CSS Codes

html { height: 100%;
}
body { background: -webkit-linear-gradient(rgba(5, 610, 255, 0.4), rgba(135, 60, 255, 0.0) 80%), -webkit-linear-gradient(-45deg, rgba(120, 155, 255, 0.9) 25%, rgba(255, 160, 65, 0.9) 76%);
}
.cf:before, .cf:after { content:" "; display: table;
}
.cf:after { clear: both;
}
.cf { *zoom: 1;
}
.menu { list-style:none; margin: 50px auto; width: 800px; width: -moz-fit-content; width: -webkit-fit-content; width: fit-content;
}
.menu > li { background: #34495e; float: left; position: relative; -webkit-transform: skewX(25deg);
}
.menu a { display: block; color: #fff; text-transform: uppercase; text-decoration: none; font-family: Arial, Helvetica; font-size: 14px;
}
.menu li:hover { background: #e74c3c;
}
.menu > li > a { -webkit-transform: skewX(-25deg); padding: 1em 2em;
}
/* Dropdown */
.submenu { position: absolute; width: 200px; left: 50%; margin-left: -100px; -webkit-transform: skewX(-25deg); -webkit-transform-origin: left top;
}
.submenu li { background-color: #34495e; position: relative; overflow: hidden;
}
.submenu > li > a { padding: 1em 2em;
}
.submenu > li::after { content:''; position: absolute; top: -125%; height: 100%; width: 100%; box-shadow: 0 0 50px rgba(0, 0, 0, .9);
}
/* Odd stuff */
.submenu > li:nth-child(odd) { -webkit-transform: skewX(-25deg) translateX(0);
}
.submenu > li:nth-child(odd) > a { -webkit-transform: skewX(25deg);
}
.submenu > li:nth-child(odd)::after { right: -50%; -webkit-transform: skewX(-25deg) rotate(3deg);
}
/* Even stuff */
.submenu > li:nth-child(even) { -webkit-transform: skewX(25deg) translateX(0);
}
.submenu > li:nth-child(even) > a { -webkit-transform: skewX(-25deg);
}
.submenu > li:nth-child(even)::after { left: -50%; -webkit-transform: skewX(25deg) rotate(3deg);
}
/* Show dropdown */
.submenu, .submenu li { opacity: 0; visibility: hidden;
}
.submenu li { transition: .2s ease -webkit-transform;
}
.menu > li:hover .submenu, .menu > li:hover .submenu li { opacity: 1; visibility: visible;
}
.menu > li:hover .submenu li:nth-child(even) { -webkit-transform: skewX(25deg) translateX(15px);
}
.menu > li:hover .submenu li:nth-child(odd) { -webkit-transform: skewX(-25deg) translateX(-15px);
}

Home Page	Home
Developer	Nick Mkrtchyan
Username	Sonick
Uploaded	November 10, 2022
Rating	4.5
Size	3,056 Kb
Views	22,264

Do you need developer help for Pure Css3 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!

Nick Mkrtchyan (Sonick) Script Codes

Name	Size
Canvas Starfield	2,827 Kb
3D Menu	3,448 Kb
Canvas Green Particles	3,249 Kb
Preloader	2,981 Kb
Canvas Background Effect 3	3,029 Kb
Simple Text spining	3,005 Kb
Canvas Background Effect	3,513 Kb
CSS3 Text Animation Effect	4,470 Kb
Mozilla DevDerby	21,599 Kb
JQuery Gallery Simple 3D Effect	3,584 Kb

Create amazing love letters 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!

Similar Scripts & Codes

Name	Username	Size
Simple personal profile	Miroot	2,856 Kb
Gears	Synvox	3,278 Kb
Spilled Paint	Darrylhuffman	3,894 Kb
Drop Cap	Gsaiki	1,571 Kb
Z-index demo	Kblh	1,534 Kb
Long Shadow Button	Uixcrazy	3,550 Kb
Dragonball Dragon Radar	DouglasGlover	2,157 Kb
Under construction	GhostRider	1,642 Kb
A Pen by Michael Parenteau	Michaelparenteau	2,133 Kb
We Simplify animation	Meodai	48,169 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!