"fullpage Menu"
Bootstrap 4.0.0 Snippet by ALIMUL AL RAZY

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ----------> <div class="demo"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="navbar"> <nav class="menu" style="height: 949px;"> <div class="nav-layer" style="width: 4283.46px; height: 4283.46px; margin-top: -2141.73px; margin-left: -2141.73px;"></div> <ul> <li><a href="#">Home</a></li> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <a class="nav-toggle"> <span></span> <span></span> <span></span> </a> </div> </div> </div> </div> </div>
.demo{ background: #000; color: #fff; } .navbar{ position: relative; height: 100px; overflow: hidden; } .navbar .nav-toggle{ display: block; width: 32px; height: 32px; cursor: pointer; -webkit-transform: rotate(0deg); transform: rotate(0deg); position: absolute; top: 35%; z-index: 2; } .navbar .nav-toggle span{ display: block; width: 100%; height: 4px; border-radius: 1px; background: #000; position: absolute; left: 0; -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; } .navbar .nav-toggle span:nth-child(1){ top: 4px; -webkit-transform-origin: left center; transform-origin: left center; } .navbar .nav-toggle span:nth-child(2){ top: 14px; -webkit-transform-origin: left center; transform-origin: left center; } .navbar .nav-toggle span:nth-child(3){ top: 24px; -webkit-transform-origin: left center; transform-origin: left center; } .navbar .nav-toggle.open span:nth-child(1){ -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 3px; left: 4px; } .navbar .nav-toggle.open span:nth-child(2){ width: 0; opacity: 0; } .navbar .nav-toggle.open span:nth-child(3){ -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 25px; left: 4px; } .navbar .nav-layer{ position: absolute; top: 16px; left: 16px; z-index: -1; background: rgba(0, 0, 0, 0.8); border-radius: 50%; -webkit-transition: 1s; transition: 1s; -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } .navbar .nav-layer.open{ -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } .navbar .menu{ width: 100%; position: fixed; left: 0; top: 0; -webkit-transition: ease-in-out 0.25s; transition: ease-in-out 0.25s; -webkit-transition-delay: 0s; transition-delay: 0s; visibility: hidden; opacity: 0; } .navbar .menu ul{ list-style: none; } .navbar .menu a{ color: white; text-decoration: none; } .navbar .menu.open{ visibility: visible; opacity: 1; -webkit-transition: ease-in-out 0.5s; transition: ease-in-out 0.5s; -webkit-transition-delay: 0.25s; transition-delay: 0.25s; z-index: 2; } .navbar .nav-layer{ background: -webkit-linear-gradient(to left, #3494e6, #ec6ead); background: linear-gradient(to left, #3494e6, #ec6ead); } .navbar .nav-toggle span{ background-color: #fff; } .navbar .menu{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #fff; font-family: sans-serif; font-size: 10vh; } .navbar .menu li:hover{ list-style: disc; }
$(document).ready(function(){ function resizeNav() { $(".menu").css({"height": window.innerHeight}); var radius = Math.sqrt(Math.pow(window.innerHeight, 2) + Math.pow(window.innerWidth, 2)); var diameter = radius * 2; $(".nav-layer").width(diameter); $(".nav-layer").height(diameter); $(".nav-layer").css({"margin-top": -radius, "margin-left": -radius}); } $(".nav-toggle").click(function() { $(".nav-toggle, .nav-layer, .menu").toggleClass("open"); }); $(window).resize(resizeNav); resizeNav(); });

Related: See More


Questions / Comments: