Menu Nav – Link com Efeito Slide

Menu Nav – Link com Efeito Slide

Neste tutorial vamos fazer um menu nav com efeito de slider quando passamos o mouse sobre ele com css e html.

Vamos adicionar o Html:

    <nav class="bg menu-nav-slide">
   
        <a href="#"><span data-hover="Home">Home</span></a>
        <a href="#"><span data-hover="Html">Html</span></a>
        <a href="#"><span data-hover="Css">Css</span></a>
        <a href="#"><span data-hover="jQuery">jQuery</span></a>
        <a href="#"><span data-hover="WrodPress">WrodPress</span></a>
   
    </nav>

Vamos adicionar o Css:

nav.bg {
    
    width:100%;
    float:left; 
    text-align:center;  
    background: rgb(255,52,52);
    background: linear-gradient(90deg, rgba(255,52,52,1) 0%, rgba(199,1,1,1) 100%);
}

nav a {

	position: relative;
	display: inline-block;
	margin: 16px 20px;
	outline: none;
	color: #fff;
	text-decoration: none;
	font-weight: bold;
	font-size: 1.3em;

}

nav a:hover,
nav a:focus {

	outline: none;
	color:#000; 

}

/* Menu */
.menu-nav-slide a {
	overflow: hidden;
	padding: 0 8px;
	height: 1.3em;
}

.menu-nav-slide a span {
	position: relative;
	display: inline-block;
	-webkit-transition: -webkit-transform 0.3s;
	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;
}

.menu-nav-slide a span::before {
	position: absolute;
	top: 100%;
	content: attr(data-hover);
	font-weight: 700;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.menu-nav-slide a:hover span,
.menu-nav-slide a:focus span {
	
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);

}

Veja o Resultado !

Baixar Código Veja Funcionando