I have introduced several navigation menus to you before, and today I want to bring you a circular navigation menu implemented in pure CSS3. The navigation is relatively new, with the list icon in the middle. When you click the list icon, the items are distributed around the list chart. Form a ring. The renderings are as follows:

Online preview Source code download

Implemented code.

html code:

 <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 code:

        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;        }