Rengga Dev – CSS Tutorial – Mobile Navigation Concept, Click on tabs to see them in action.
*{ margin:0; padding:0; box-sizing:border-box; } $black: #2f3542; $grey: #a4b0be; body{ display:flex; justify-content:center; align-items:center; min-height:100vh; transition:background .5s cubic-bezier(0.23, 1, 0.32, 1); } nav{ width:440px; } // WAVE .wave-wrap{ position:relative; width:100%; height:33px; overflow:hidden; margin-bottom:0; #wave{ position:absolute; width:150px; transform-origin:bottom; transform:scaleY(0.8); transition:all .6s cubic-bezier(0.23, 1, 0.32, 1); .path{ fill:$black; } } } // LIST .list-wrap{ display:flex; width:100%; height:80px; background:$black; list-style:none; justify-content:space-around; padding: 0 20px; li{ cursor:pointer; position:relative; width:100%; height:100%; display: flex; justify-content: center; align-items: center; transition:all .6s cubic-bezier(0.23, 1, 0.32, 1); i{ position:relative; font-size:1.5em; color:$grey; z-index:5; transition:all .6s cubic-bezier(0.23, 1, 0.32, 1); } &:before{ content:""; position:absolute; background:green; height:80%; width:80%; left:10%; top:10%; border-radius:50%; z-index:0; transform:scale(0); transition:all .6s cubic-bezier(0.23, 1, 0.32, 1); } &.active{ margin-top:-10px; i{ color:$black; } &:before{ transform:scale(1); } } &:nth-child(1){&:before{background:#537895}} &:nth-child(2){&:before{background:#ff6b81}} &:nth-child(3){&:before{background:#7bed9f}} &:nth-child(4){&:before{background:#70a1ff}} &:nth-child(5){&:before{background:#dfe4ea}} } } // ▼ this is not necessary for the navigation ▼ .phone{ height:300px; border:7px solid rgba(0, 0, 0, 0.05); border-radius:20px; overflow:hidden; display:flex; align-items:flex-end; flex-direction:column; font-family: 'Montserrat', sans-serif; .page{ height:327px; width:100%; display:flex; justify-content:center; align-items:center; font-size:3em; color:rgba(0, 0, 0, 0.1); text-transform:uppercase; letter-spacing:5pt; padding-top:50px; } }
// set the first nav item as active var dis = $(".list-wrap li").eq(0); // align the wave align(dis); // align the wave on click $(".list-wrap li").click(function(){ dis = $(this); align(dis); }); $('body').on('keydown',function(e){ var code = e.keyCode || e.which; if(code == 9) { if(dis.is(':last-child')){ $(".list-wrap li:nth-child(1)").trigger("click"); } else{ dis.next().trigger("click"); } } }); $("body").keydown(function(e) { if(e.keyCode == 37) { // left $("#showroom").animate({ left: "-=980" }); } else if(e.keyCode == 39) { // right $("#showroom").animate({ left: "+=980" }); } }); function align(dis){ // get index of item var index = dis.index() + 1; // add active class to the new item $(".list-wrap li").removeClass("active"); dis.delay(100).queue(function() { dis.addClass('active').dequeue(); }); // move the wave var left = index * 80 - 98; $("#wave").css('left', left); // ▼ this is not necessary for the navigation ▼ // set the background color var color = dis.data('color'); $("body").css('background', color); // set the text $(".page").text(dis.attr("title")); }