Home CSS Menu deslizante com CSS3 e HTML5
Menu deslizante com CSS3 e HTML5
CSS Luiz Augusto Vieira 08/02/2018
Vamos criar menu com efeito de bloco deslizante com CSS3 usando a opacidade e HTML5.
Usaremos algumas propriedades do CSS3 que talvez você não tenha usado ou não conheça. Nossos eventos vão acontecer ao passar o mouse sobre os menus.
1° Passo:
body{
font-family: Arial, sans-serif;
font-size: 16px;
}
/*estilo do nosso link*/
a{
position: absolute;
z-index: 10;
font-weight: bold;
color: #fff;
font-size: 1.4em;
padding-left: 22px;
display: block;
width: 160px;
height: 40px;
text-decoration: none;
}
/*ao passar o mouse sobre nosso link*/
a:hover{
color: yellowgreen;
border-right: 2px solid #fff;
}
No código acima não tem nada fora do normal do que já usamos no dia a dia.
Colocamos nossos estilos no ( body ) e nos links ( a ) e ( a:hover ) para termos um estilo bacana.
2° Passo:
.menu{
position: relative;
list-style: none;
width: 182px;
padding: 40px 0;
margin: auto;
}
Criamos nossa classe ( .menu ) que vai envolver nosso conteúdo e demos os estilos a ela.
3° Passo:
.menu:before {
content: "";
position: absolute;
z-index: 10;
background: #5b9780;
height: 100%;
width: 182px;
margin-top: -40px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
No código acima, criamos uma classe ( .menu:before ) ela se aplica antes da classe ( .menu ), usamos o Pseudo Elementos ( :before ) para criá-las.
Nessa classe colocamos os estilos como cor de fundo e outras propriedades do CSS3. Ela é uma classe absoluta e com mesmo tamanho da classe ( .menu ), mas, com seus próprios estilos.
4° Passo:
.menu li{
height: 40px;
width: 100%;
}
Demos uma altura e uma largura a nossa ( .menu li ) para poder termos os espaços e tamanho que se ajuste ao nosso bloco.
5° Passo:
.menu li .submenu{
width: 152px;
height: 220px;
padding: 15px;
margin-top: 16px;
background: yellowgreen;
overflow: hidden;
color: #fff;
text-align: right;
position: absolute;
top: 0px;
left: 0;
opacity: 0;
-webkit-transition: 1s left,1s width,1s opacity;
transition: 1s left,1s width,1s opacity;
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
}
Criamos agora a nossa classe que vai deslizar quando passar o mouse sobre um determinado menu.
A única coisa que talvez você ainda não usou é a ( transition: 1s left, 1s width, 1s opacity; ) com seus determinados valores de 1 segundo para ( left, width, opacity ) para termos uma animação suave.
6° Passo:
.menu li:hover .submenu{
left: 182px;
opacity: 1;
width: 276px;
}
E por fim, vamos atacar agora o Pseudo Classes ( :hover ) para fazer nossa classe ( .submenu ) deslizar ao passar o mouse sobre cada menu.
7° Passo:
<!DOCTYPE html>
<html>
<head>
<title>Menu deslizante com CSS3 e HTML5</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul class="menu">
<li>
<a href="">Home</a>
<div class="submenu">
<h1>HOME</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
</li>
<li>
<a href="">Sobre</a>
<div class="submenu">
<h1>SOBRE</h1>
<p>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</li>
<li>
<a href="">Notícias</a>
<div class="submenu">
<h1>NOTÍCIAS</h1>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</li>
<li>
<a href="">Esporte</a>
<div class="submenu">
<h1>ESPORTE</h1>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa id est laborum.</p>
</div>
</li>
<li>
<a href="">Contato</a>
<div class="submenu">
<h1>CONTATO</h1>
<p>Excepteur sint occaecat cupidatat non proident, sunt in culpa id est laborum.</p>
</div>
</li>
</ul>
</body>
</html>
Acima está nosso HTML que contém todo o conteúdo para o exemplo.
Veja o resultado final:
ATÉ O PRÓXIMO POST
Sentiu falta de alguma coisa óbvia? Comente, dei sua opinião, ajude a divulgar o Blog.
Inscreva-se no Youtube: https://www.youtube.com/htmlecsspro
Curta nossa Fanpage: https://www.facebook.com/htmlecsspro
Entre para o nosso Grupo: https://www.facebook.com/groups/htmlecsspro
Olá, deixe seu comentário para Menu deslizante com CSS3 e HTML5