15.7.18

Menu responsível: softy


Ohayou! 

Não tenham grande esperança para que este blogue volte a ficar ativo, mas volta e meia eu continuarei sempre a aparecer por aqui com tutoriais novos. Neste momento vim partilhar um menu que criei para um dos meus layouts mais recentes, um layout minimalista (falando nisso, tenho layouts para disponibilizar no [blue design]. É um modelo responsivo, suave, e que de qualquer forma podem personalizar se não gostarem do estilo.

Pŕevia: www

[créditos pelas imagens larguinhas: www]

Tutorial:

Num gadget HTML/Javascript, colem isto. As margens dentro do primeiro style servem para que possam posicionar o menu onde quiserem, e não se esqueçam de substituir o nome das páginas e os links(#).
<div class="menunav" id="myMenunav" style="margin: 0px 0px 0px 0px;">
<a href="#">Pagina 1</a>
<a href="#">Pagina 2</a>
<a href="#">Pagina 3</a>
<a href="#">Pagina 4</a>
<a href="#">Pagina 5</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>

Agora abram theme» editar html
Procurem por </body> e em cima colem o seguinte bloco de código:
<script>
function myFunction() {
    var x = document.getElementById(&quot;myMenunav&quot;);
    if (x.className === &quot;menunav&quot;) {
        x.className += &quot; responsive&quot;;
    } else {
        x.className = &quot;menunav&quot;;
    }
}
</script>

Agora, procurem por /b:skin e colem em cima o bloco seguinte. Se quiserem usar este modelo, têm de adicionar a fonte "Rambla"*Esta é a parte do css, o que significa que a podem alterar de modo a persoanlizar o modelo que querem, ou podem deixar como está se preferirem manter o modelo da pŕevia. Num caso ou noutro, não se esqueçam de creditar a base!
.menunav { /*menu responsivo*/
background: url(https://2.bp.blogspot.com/-BD82WICThlI/W0Sy5Wj-SSI/AAAAAAAAxBQ/zyYU7nBiRbcbR92X5YwpGfBbbP0OItL8gCLcBGAs/s1600/fundomarble1.jpg);
box-shadow: inset 0px 0px 20px rgba(147,148,138,0.5);
overflow: hidden;
height: 33px;
border-radius: 2px;
-webkit-transition-duration: .80s;
-moz-transition-duration: .80s;
-o-transition-duration: .80s;
transition-duration: .80s;
}
.menunav a {
border: 1px solid #131a19;
text-shadow: 1px 1px 0px #1e2625;
background: #272e2d;
box-shadow: inset 0px 0px 5px #1e2625, 1px 1px 3px rgba(0,0,0,0.4), inset 0px 0px 2px #777d7c;
border-radius: 2px;
float: left;
margin: 4px 2px 2px 4px;
display: inline-block;
color: #fff!important;
font-family: Rambla;
text-shadow: 1px 1px 3px #131a19!important;
text-align: center;
padding: 2px 10px 2px 10px;
font-size: 14px;
text-transform: lowercase;
outline: 1px solid transparent;
outline-offset: 0px;
-webkit-transition-duration: .80s;
-moz-transition-duration: .80s;
-o-transition-duration: .80s;
transition-duration: .80s;
}
.menunav a:hover {
background: rgba(212,150,129,0.4);
outline-offset: -6px;
outline: 1px solid #fff;
border: 1px solid transparent;
box-shadow: inset 0px 0px 10px rgba(212,150,129,0.9);
text-shadow: 1px 1px 3px #d49781!important;
margin: 0px 2px 0px 4px;
padding: 6px 10px 6px 10px;
-webkit-transition-duration: .80s;
-moz-transition-duration: .80s;
-o-transition-duration: .80s;
transition-duration: .80s;
}
.menunav .icon {display: none;}
@media screen and (max-width: 991px) { /* para ecrãs entre 0 e 991 px de largura, não mexer!*/
  .menunav a:not(:first-child) {display: none;}
  .menunav a.icon {
    float: right;
    display: block;
  }
.menunav.responsive {position: relative;}
  .menunav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .menunav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
* Para usar a fonte Rambla, devem procurar por <head> e colar em baixo:
<link href='https://fonts.googleapis.com/css?family=Rambla' rel='stylesheet'/>


E voilá, era tudo. Simples, certo? Vou tentar trazer mais modelos para menus responsivos em breve, porque há muita coisa que pode ser criada, e assim também me motivo mais a criar modelos originais para os meus próprios templates. Também vou tentar adaptar antigos menus famosos de outros blogs por aí de modo a que fiquem responsívos, obviamente dando os créditos pela inspiração. 


Sem comentários:

Enviar um comentário