Author: | VincentCostentin |
---|---|
Views Total: | 22,203 views |
Official Page: | Go to website |
Last Update: | October 12, 2014 |
License: | MIT |
Preview:

Description:
A pure CSS solution made by VincentCostentin to popup a circle (radial menu) around the toggle button, based upon CSS3 transitions and transforms.
Basic Usage:
Create a menu with a hamburg toggle button as follows.
<input type="checkbox" id="menu_opener_id" class="menu_opener"> <label for="menu_opener_id" class="menu_opener_label"></label> <div class="barre_hamburger"></div> <a href="#" class="link_one link_general"></a> <a href="#" class="link_two link_general"></a> <a href="#" class="link_three link_general"></a> <a href="#" class="link_four link_general"></a> </input>
The core CSS/CSS3 styles
.menu_opener { display: none; } .menu_opener:checked ~ .link_one { top: 65px; } .menu_opener:checked ~ .link_two { left: 385px; } .menu_opener:checked ~ .link_three { top: 385px; } .menu_opener:checked ~ .link_four { left: 65px; } .menu_opener:checked ~ .barre_hamburger { opacity: 0; } .menu_opener:checked ~ .menu_opener_label:after { transform: rotate(45deg); top: 70px; } .menu_opener:checked ~ .menu_opener_label:before { transform: rotate(-45deg); top: 70px; } .menu_opener_label { background: #f1c40f; width: 150px; height: 150px; display: block; cursor: pointer; border-radius: 50%; position: absolute; top: 200px; left: 200px; z-index: 10; } .menu_opener_label:after { position: absolute; top: 50px; left: 50px; background: #000; content: ""; width: 50px; height: 10px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .menu_opener_label:before { position: absolute; top: 90px; left: 50px; background: #000; content: ""; width: 50px; height: 10px; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .barre_hamburger { width: 50px; height: 10px; position: absolute; top: 270px; left: 250px; background: #000; z-index: 20; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; }
The sample CSS to style the sub menus.
.link_general { width: 100px; height: 100px; display: block; border-radius: 50%; position: absolute; top: 225px; left: 225px; background: #ecf0f1; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; } .link_one { ... } .link_two { ... } .link_three { ... } .link_four { ... }