navigation - 1

                <div class="one">
                    <input type="checkbox" id="active">
                    <label for="active" class="menu-btn"><i class="fas fa-bars"></i></label>
                    <div class="wrapper">
                        <ul>
                            <li><a href="#">Home</a></li>
                            <li><a href="#">About</a></li>
                            <li><a href="#">Services</a></li>
                            <li><a href="#">Gallery</a></li>
                            <li><a href="#">Feedback</a></li>
                        </ul>
                    </div>
                </div>
                <style>
                .one *{  margin: 0;  padding: 0; box-sizing: border-box; font-family: Helvetica, sans-serif;}
                .one{ width: 96vw; height: 100vh;}
                .wrapper{position: absolute; top: 10vw; right: 1vw; height: 100%;  width: 100%; background: linear-gradient(-135deg, #c850c0, #4158d0);         
                clip-path: circle(25px at calc(100% - 45px) 45px); transition: all 0.3s ease-in-out;}
                #active:checked ~ .wrapper{ clip-path: circle(75%);}
                .menu-btn{ position: absolute; z-index: 2; right: 1vw; top: 10vw; height: 50px; width: 50px; text-align: center; line-height: 50px; border-radius: 50%;  font-size: 20px;  color: #fff;  
                    cursor: pointer; background: linear-gradient(-135deg, #c850c0, #4158d0); transition: all 0.3s ease-in-out;}
                #active:checked ~ .menu-btn{background: #fff; color: #4158d0;}
                #active:checked ~ .menu-btn i:before{content: "";}
                .wrapper ul{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); list-style: none; text-align: center; }
                .wrapper ul li{  margin: 15px 0; }
                .wrapper ul li a{color: none; text-decoration: none; font-size: 30px; font-weight: 500; padding: 5px 30px; color: #fff;  position: relative; line-height: 50px;
                transition: all 0.3s ease;}
                .wrapper ul li a:after{position: absolute; content: ""; background: #fff; width: 100%;  height: 50px; right: 0; border-radius: 50px; transform: scaleY(0);
                z-index: -1; transition: transform 0.3s ease; }
                .wrapper ul li a:hover:after{transform: scaleY(1);}
                .wrapper ul li a:hover{color: #4158d0;}
                input[type="checkbox"]{display: none;}
                </style>