Boas pessoal, bem vindos a mais um tutorial do Uncomplicated Works, e hoje vou mostrar para vocês três diferentes efeitos para os menus do Blogger, usando apenas código CSS, outros tutoriais:
O código CSS, apenas vai modificar a aparência do menu, basicamente estive a pesquisar diferentes efeitos hover (quando colocamos o rato sobre algo) para os links e encontrei uns bastante interessantes, vamos agora passar aos menus.
Pode conferir aqui os 3 diferentes menus para o Blogger.
Primeiramente, vou ensinar como colocar o primeiro menu, depois é sempre da mesma forma, então vou explicar para o primeiro.
Menu 1
 |
| Menu 1 |
Para criar este menu, é preciso ir a Modelo -> Editar HTML -> Pressionamos CTRL + F e irá aparecer uma caixa de busca, pesquisamos por <body
A seguir colocamos o seguinte código HTML:
<nav class='menuuw1' id='menuuw1'>
<a href='#menuuw1'>Início</a>
<a href='#menuuw1'>Sobre</a>
<a href='#menuuw1'>Quem Somos</a>
<a href='#menuuw1'>Contactos</a>
<a href='#menuuw1'>Teste</a>
</nav>
Explicando o que podemos modificar:
<a href='LINK_DA_PAGINA_DE_DESTINO'>NOME DA PAGINA</a>
Feito isto pesquisamos por ]]></b:skin>
E antes colocamos o seguinte código CSS:
nav#menuuw1 { background-color: black;
height: 60px; border-bottom: 2px solid rgb(84, 84, 84);}
nav a {
position: relative;
display: inline-block;
margin: 15px 25px;
outline: none;
color: #fff;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
font-size: 1.35em;
}
.menuuw1 a {
padding: 10px 20px;
color: white;
}
.menuuw1 a::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background: #fff;
content: '';
-webkit-transition: top 0.3s;
-moz-transition: top 0.3s;
transition: top 0.3s;
}
.menuuw1 a::after {
position: absolute;
top: 0;
left: 0;
width: 2px;
height: 2px;
background: #fff;
content: '';
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
transition: height 0.3s;
}
.menuuw1 a:hover::before {
top: 100%;
opacity: 1;
}
.menuuw1 a:hover::after {
height: 100%;
}
.menuuw1 a:hover {
text-decoration: none;
}
Menu 2
 |
| Menu 2 |
Código HTML:
<nav class='menuuw2' id='menuuw2'>
<a href='#menuuw2'>Início</a>
<a href='#menuuw2'>Sobre</a>
<a href='#menuuw2'>Quem Somos</a>
<a href='#menuuw2'>Contactos</a>
<a href='#menuuw2'>Teste</a>
</nav>
Código CSS:
nav#menuuw2 {
background-color: black;
border-bottom: 2px solid rgb(84, 84, 84);
}
.menuuw2 a {
padding: 10px 20px;
color:white;
}
.menuuw2 a:hover {
text-decoration:none;
}
.menuuw2 a::before,
.menuuw2 a::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 85%;
border: 3px solid #4D4D4D;
content: '';
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
}
.menuuw2 a::after {
border-color: #fff;
opacity: 0;
-webkit-transform: translateY(-7px) translateX(6px);
-moz-transform: translateY(-7px) translateX(6px);
transform: translateY(-7px) translateX(6px);
}
.menuuw2 a:hover::before,
.menuuw2 a:focus::before {
opacity: 0;
-webkit-transform: translateY(5px) translateX(-5px);
-moz-transform: translateY(5px) translateX(-5px);
transform: translateY(5px) translateX(-5px);
}
.menuuw2 a:hover::after,
.menuuw2 a:focus::after {
opacity: 1;
-webkit-transform: translateY(0px) translateX(0px);
-moz-transform: translateY(0px) translateX(0px);
transform: translateY(0px) translateX(0px);
}
Menu 3
 |
| Menu 3 |
Código HTML:
<nav class='menuuw3'>
<a href='#'>Início</a>
<a href='#'>Sobre</a>
<a href='#'>Quem Somos</a>
<a href='#'>Contactos</a>
<a href='#'>Teste</a>
</nav>
Código CSS:
nav.menuuw3 { background-color: black;
border-bottom: 2px solid rgb(84, 84, 84);}
.menuuw3 a {
padding: 0 20px;
height: 45px;
line-height: 45px;
color: white;
}
.menuuw3 a:hover {
text-decoration:none;
}
.menuuw3 a::before,
.menuuw3 a::after {
position: absolute;
width: 45px;
height: 2px;
background: #fff;
content: '';
opacity: 0.2;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
pointer-events: none;
}
.menuuw3 a::before {
top: 0;
left: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
}
.menuuw3 a::after {
right: 0;
bottom: 0;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.menuuw3 a:hover::before,
.menuuw3 a:hover::after,
.menuuw3 a:focus::before,
.menuuw3 a:focus::after {
opacity: 1;
}
.menuuw3 a:hover::before,
.menuuw3 a:focus::before {
left: 50%;
-webkit-transform: rotate(0deg) translateX(-50%);
-moz-transform: rotate(0deg) translateX(-50%);
transform: rotate(0deg) translateX(-50%);
}
.menuuw3 a:hover::after,
.menuuw3 a:focus::after {
right: 50%;
-webkit-transform: rotate(0deg) translateX(50%);
-moz-transform: rotate(0deg) translateX(50%);
transform: rotate(0deg) translateX(50%);
}
Espero que tenham percebido e que usem nos vossos blogs, se quiserem modificar as cores de algo podem deixar nos comentários que eu ajudo, qualquer dúvida a instalar perguntem que eu irei ajudar, espero que tenham gostado dos diferentes menus para os vossos blogs, até ao próximo tutorial.
Sem comentários:
Enviar um comentário