Menu trượt CSS

  Bài viết hay nhất1
HTML:

<div class="wrap">
<div class="content" align="center">

<nav class="menu-content shadow">
<ul>
<li class="menu-item active">
<i class="material-icons">home</i>
</li>
<li class="menu-item">
<i class="material-icons">people</i>
</li>
<li class="menu-item">
<i class="material-icons">apps</i>
</li>
<li class="menu-item">
<i class="material-icons">whatshot</i>
</li>
<li class="menu-item">
<i class="material-icons">menu</i>
</li>
</ul>
<div class="menu-bg"></div>
</nav>

<div class="credits">
<p>Developed with <span>❤</span> by Hugo Cardoso.</p>
</div>
</div>
</div>


CSS:

html,body{
width: 100%;
height: 100%;
background: #03A9F4;
overflow: hidden;
margin: 0px;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}

.wrap{
width: 100%;
height: 100%;
display: flex;
}

.content{
margin: auto;
}

.menu-content{
width: 250px;
height: 50px;
overflow: hidden;
border-radius: 3px;
background: #F44336;
position: relative;
}

.menu-content > ul{
margin: 0px;
padding: 0px;
list-style: none;
font-size: 0px;
float: left;
}

.menu-bg{
width: 50px;
height: 50px;
background: #FFF;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
transition: .4s cubic-bezier(1,-0.19, 0, 1.2);
}

.menu-item{
display: inline-block;
background: transparent;
width: 50px;
height: 50px;
position: absolute;
top: 0px;
z-index: 2;
cursor: pointer;
}

.menu-item:not(.active):hover{
background: rgba(255,255,255,0.1);
}

.menu-item.active i{
color: #F44336;
font-size: 30px;
}

.menu-item i{
line-height: 50px;
text-align: center;
color: #FFF;
transition: .2s linear;
transition-delay: .2s;
}

.menu-item:nth-child(1){
left: 0px;
}

.menu-item:nth-child(2){
left: 50px;
}

.menu-item:nth-child(3){
left: 100px;
}

.menu-item:nth-child(4){
left: 150px;
}

.menu-item:nth-child(5){
left: 200px;
}

.shadow {
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
}

.credits{
text-align: center;
color: #FFF;
}

.credits span{
color: #EF5350;
}



JS:

$(".menu-item").click(function(){

$(".menu-item").each(function(){
$(this).removeClass("active");
});

var index = $(this).index();

$(this).addClass("active");

$(".menu-bg").css({
"left": 50 * index + "px"
})

})
Bạn không có quyền trả lời bài viết