A circular navigation menu implemented by pure CSS3

Before you introduced several navigation menus, today to bring you a pure CSS3 implementation of the circular navigation menu. The navigation is fresh, the list icon is in the middle, and when you click the list icon, the items are distributed over the four week of the list chart. Form a ring. As follows:

Online preview Source Download

The implemented code.

HTML code:

 <Divclass= "Container">        <H1>Cool open/close Menu in full CSS</H1>        <inputtype= "checkbox"ID= "menu_opener_id"class= "Menu_opener">            <label for= "menu_opener_id"class= "Menu_opener_label">            </label>            <Divclass= "Barre_hamburger">            </Div>            <ahref="#"class= "Link_one link_general"></a><ahref="#"class= "Link_two link_general">            </a><ahref="#"class= "Link_three link_general"></a><ahref="#"class= "Link_four link_general">            </a></input>    </Div>

CSS code:

Body{background:#34495e; }. Container{width:550px;Display:Block;margin:Auto;position:relative; }H1{text-align:Center;font-family:' Roboto ', Sans-serif;Font-weight: -;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:Ten; }. 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: -;-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; }

Note: This article Love programming original article, reproduced please specify the original address: http://www.w2bc.com/Article/7957

A circular navigation menu implemented by pure CSS3