Toggle menu by Andreas Storm
How do I make an toggle menu by andreas storm?
It is so great. http://cssdeck.com/labs/iz256ob1. What is a toggle menu by andreas storm? How do you make a toggle menu by andreas storm? This script and codes were developed by Rıza Selçuk Saydam on 02 August 2022, Tuesday.
Toggle menu by Andreas Storm - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>toggle menu by Andreas Storm</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.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! */ body { background: #8e44ad;
}
.switch { width: 30px; height: 23px; position: absolute; left: 50%; top: 50%; margin: -15px 0px 0px -15px; cursor: pointer;
}
.switch.on:after { transform: rotate(-45deg) translate(7px, -8px);
}
.switch.on:before { transform: rotate(45deg) translate(5px, 5px);
}
.switch .menu { width: 100%; height: 5px; background: #fff; margin: 4px auto; transition: all 0.3s; backface-visibility: hidden;
}
.switch.on .menu { opacity: 0;
}
.switch:before, .switch:after { content: ""; display: block; height: 5px; background: #fff; transition: all 0.3s; backface-visibility: hidden;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class='switch'> <div class='menu'></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Toggle menu by Andreas Storm - Script Codes CSS Codes
body { background: #8e44ad;
}
.switch { width: 30px; height: 23px; position: absolute; left: 50%; top: 50%; margin: -15px 0px 0px -15px; cursor: pointer;
}
.switch.on:after { transform: rotate(-45deg) translate(7px, -8px);
}
.switch.on:before { transform: rotate(45deg) translate(5px, 5px);
}
.switch .menu { width: 100%; height: 5px; background: #fff; margin: 4px auto; transition: all 0.3s; backface-visibility: hidden;
}
.switch.on .menu { opacity: 0;
}
.switch:before, .switch:after { content: ""; display: block; height: 5px; background: #fff; transition: all 0.3s; backface-visibility: hidden;
}Toggle menu by Andreas Storm - Script Codes JS Codes
$(".switch").click(function() { $(this).toggleClass("on");
});
| Developer | Rıza Selçuk Saydam |
| Username | rss |
| Uploaded | August 02, 2022 |
| Rating | 3.5 |
| Size | 2,854 Kb |
| Views | 68,816 |
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!
| Name | Size |
| Loader Animation | 2,761 Kb |
| Pigecon | 3,730 Kb |
| Little Boxes on an iPhone | 4,036 Kb |
| How a Text Gradient is Made | 4,908 Kb |
| Flutterby | 3,799 Kb |
| CSS3 Loading Animation | 5,219 Kb |
| Pokemon Icon | 2,655 Kb |
| Flat iOS 7 Safari Icon | 3,332 Kb |
| Sticky footer - adjustPusher | 2,127 Kb |
| Star Wars Toggle Icon Animation | 3,180 Kb |
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!
| Name | Username | Size |
| Animated bar chart | CreativePunch | 3,124 Kb |
| Simple, flat contact form | Zeaklous | 2,719 Kb |
| Hamburger Menu Animation | Salmanraza | 2,580 Kb |
| Custom checkbox example | Capelo | 3,495 Kb |
| Subtle site navigation with description | Necks | 3,206 Kb |
| Text Blocks Over Image, Updated | KatieK2 | 3,122 Kb |
| Realistic Buttons | Stoypenny | 2,248 Kb |
| RPG Style Text Dialogue | Odylic | 2,635 Kb |
| Custom Select Element | Agrayson | 3,616 Kb |
| Delete Hover | Chungman93 | 2,557 Kb |
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!