純粋な css3_html/css_WEB-ITnose で実装された循環ナビゲーション メニュー

以前にいくつかのナビゲーション メニューを紹介しましたが、今日は純粋な CSS3 で実装された循環ナビゲーション メニューをお届けしたいと思います。ナビゲーションは比較的新しいもので、中央にリスト アイコンがあり、リスト アイコンをクリックすると、リスト グラフの周囲に項目が配置されます。リングを形成します。レンダリングは次のとおりです:

オンライン プレビュー ソース コードのダウンロード

実装コード。

html コード:

 <div class="container">        <h1 id="Cool-Open-Close-menu-in-full-CSS">            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;        }