Rotating Circle Hamburger Menu With jQuery And CSS3
File Size: | 2.03 KB |
---|---|
Views Total: | 1695 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Just another fancy circle (radial) menu that arranges the menu items around the hamburger button when toggled. Built with jQuery and CSS3 transforms & transitions.
How to use it:
1. The required HTML structure for the circle menu.
<div class="menu"> <div class="btn trigger"> <span class="line"></span> </div> <div class="icons"> <div class="rotater"> <div class="btn btn-icon"> Menu Item 1 </div> </div> <div class="rotater"> <div class="btn btn-icon"> Menu Item 2 </div> </div> <div class="rotater"> <div class="btn btn-icon"> Menu Item 3 </div> </div> <div class="rotater"> <div class="btn btn-icon"> Menu Item 4 </div> </div> <div class="rotater"> <div class="btn btn-icon"> Menu Item 5 </div> </div> <!-- More Items Here --> </div> </div>
2. The necessary CSS/CSS3 styles.
.menu { width: 5em; height: 5em; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .menu .btn { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: rgba(255, 255, 255, 0.15); opacity: 0; z-index: -10; cursor: pointer; transition: opacity 1s, z-index 0.3s, transform 1s; transform: translateX(0); } .menu .trigger { opacity: 1; z-index: 100; cursor: pointer; transition: transform 0.3s; } .menu .trigger:hover { transform: scale(1.2); } .menu .line { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); width: 60%; height: 6px; background: #fff; border-radius: 6px; transition: background-color 0.3s, height 0.3s, top 0.3s; } .menu .line:before, .menu .line:after { content: ""; display: block; position: absolute; left: 0; width: 100%; height: 6px; background: #fff; border-radius: 6px; transition: background-color 0.3s, transform 0.3s; } .menu .line:before { top: -12px; transform-origin: 15% 100%; } .menu .line:after { top: 12px; transform-origin: 25% 30%; } .icons .fab { font-size: 3em; color: #fff; transition: color 0.3s; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .btn:hover .fab { color: #000; } .menu .rotater { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 50% 50%; } .menu.active .btn-icon { opacity: 1; z-index: 50; } .menu.active .trigger .line { height: 0px; top: 45%; } .menu.active .trigger .line:before { transform: rotate(45deg); width: 110%; } .menu.active .trigger .line:after { transform: rotate(-45deg); width: 110%; } .rotater:nth-child(1) { transform: rotate(-22.5deg); } .menu.active .rotater:nth-child(1) .btn-icon { transform: translateY(-10em) rotate(22.5deg); } .rotater:nth-child(2) { transform: rotate(22.5deg); } .menu.active .rotater:nth-child(2) .btn-icon { transform: translateY(-10em) rotate(-22.5deg); } .rotater:nth-child(3) { transform: rotate(67.5deg); } .menu.active .rotater:nth-child(3) .btn-icon { transform: translateY(-10em) rotate(-67.5deg); } .rotater:nth-child(4) { transform: rotate(112.5deg); } .menu.active .rotater:nth-child(4) .btn-icon { transform: translateY(-10em) rotate(-112.5deg); } .rotater:nth-child(5) { transform: rotate(157.5deg); } .menu.active .rotater:nth-child(5) .btn-icon { transform: translateY(-10em) rotate(-157.5deg); } .rotater:nth-child(6) { transform: rotate(202.5deg); } .menu.active .rotater:nth-child(6) .btn-icon { transform: translateY(-10em) rotate(-202.5deg); } .rotater:nth-child(7) { transform: rotate(247.5deg); } .menu.active .rotater:nth-child(7) .btn-icon { transform: translateY(-10em) rotate(-247.5deg); } .rotater:nth-child(8) { transform: rotate(292.5deg); } .menu.active .rotater:nth-child(8) .btn-icon { transform: translateY(-10em) rotate(-292.5deg); }
3. Enable the hamburger button to toggle the circle menu. Place the following JS snippets after jQuery library and done.
<script src="/path/to/cdn/jquery.slim.min.js"></script>
$(document).ready(function () { $(".trigger").click(function () { $(".menu").toggleClass("active"); }); });
This awesome jQuery plugin is developed by coding-circulate. For more Advanced Usages, please check the demo page or visit the official website.