You just follow 2 steps to create a fancy menu with css.
Step 1:- you can crate a menu with the help of input tag and label tag, for example:-
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fancy Menu Icons</title></head>
<body>
<input class="toggle" id="sidebar" name="sidebar" type="checkbox" />
<label for="sidebar" class="hamburger"><i>Show Menu</i></label>
</body>
</html>
Step 2:- Use CSS
html, body {height: 100%;}
.toggle{visibility: hidden; position: absolute;left: -9999px;}
.hamburger {top: 50%;left: 50%;margin: -8px -16px;display: block;width: 32px;height: 16px;position: relative;transition: .5s;-webkit-tap-highlight-color: rgba(0,0,0,0);}
.hamburger i {display: block;text-indent: 100%;overflow: hidden;white-space: nowrap;height: 1px;background-color: black;width: 100%;position: absolute;top: 50%;transition: .3s;transition-delay: .2s;}
.hamburger:after, .hamburger:before {content: '';position: absolute;top: 0;height: 0;border-bottom: 1px solid black;width: 100%;left: 0;right: 0;transition:.5s cubic-bezier(0.680, -0.550, 0.265, 1.550);transform-origin: left top;}
.hamburger:after {top: 100%;transform-origin: left bottom;}
.toggle:checked + .hamburger {translate: transform3d(2px, 0, 0);}
.toggle:checked + .hamburger i {opacity: 0;transition-delay: 0;}
.toggle:checked + .hamburger:after {transform: rotate3d(0,0,1,-45deg) translate3d(0,4px,0);}
.toggle:checked + .hamburger:before {transform: rotate3d(0,0,1,45deg) translate3d(0,-4px,0);}
0 Comment(s)