之前为大家介绍了好几款导航菜单，今天要给大家带来一款纯css3实现的环形导航菜单。该导航比较新鲜，列表图标位于中间，单击列表图标的时候，各项分布于列表图表的四周。形成一个环形。效果图如下：
在线预览 源码下载
实现的代码。
html代码：
<div class="container"> <h1> Cool Open/Close menu in full CSS</h1> <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> </div>
css代码：
body { background: #34495e; } .container { width: 550px; display: block; margin: auto; position: relative; } h1 { text-align: center; font-family: 'Roboto' , sans-serif; font-weight: 400; color: #f1c40f; } .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; } .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 { background: url("home.png") #f1c40f no-repeat center center; } .link_two { background: url("mail.png") #f1c40f no-repeat center center; } .link_three { background: url("set.png") #f1c40f no-repeat center center; } .link_four { background: url("start.png") #f1c40f no-repeat center center; }
