<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet"> <div class="container"> <input type="checkbox" id="menu-toggle"> <label for="menu-toggle"> </label> <ul id="menu"> <li><a href="#">iteam 1</a></li> </ul> <asid> <h1>kuch toh huva hai</h1> </asid> </div>

.container{ margin: 0; padding: 0; background-color: #03A9F4; font-family: 'Roboto', sans-serif; overflow: hidden; } [type="checkbox"]:not(:checked), [type="checkbox"]:checked { display: none; } label,label:before,label:after{ position: absolute; top: 25px; left: 25px; background: #03A9F4; width: 30px; height: 5px; transition: .2s ease; cursor: pointer; z-index: 1; } label::before{ content:" "; top:10px; left:0px; } label::after{ content:""; top:20px; left:0; } #menu{ position:absolute; margin:0; padding:0; width:110px; height:110px; background:yellow; border-bottom-right-radius:100%; box-shadow:0 2px 5px rgba(0,0,0,0.26); animation:not-checked-anim .5s ease both; transition: .5s ease; } #menu-toggle:not(:checked) + label + #menu li { pointer-events: none; opacity: 0; z-index: -1; } li, a { margin: 75px 0 -55px 0; color: #03A9F4; font: 14pt "Roboto", sans-serif; font-weight: 700; line-height: 1.8; text-decoration: none; text-transform: none; list-style: none; transition: .5s ease; outline: 0; } #menu-toggle:checked + label + #menu { animation: checked-anim 1s ease both; z-index: 0; } @keyframes checked-anim { 50% { width: 3000px; height: 3000px; z-index: 0; } 100% { width: 100%; height: 100%; border-radius: 0; } }