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.
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()">☰</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("myMenunav");
if (x.className === "menunav") {
x.className += " responsive";
} else {
x.className = "menunav";
}
}
</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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNfpfSDSfzzhuzDrJK07D8ylsWCQ39zSdWt_yfmTY5Z9UKXmkDy9EK7dhX9oL9_OMSD8WGgGk0c_yN43j0__VLFGsDgo4rtBEc6684O4WXLMMS5RwbHwkJY-EqIdW7ZfOFMpemP-Bbcoo9/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.
<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.
Topp
ResponderEliminarMeu Deus até que enfim um blog ativo de html kkkkkkkkk'
ResponderEliminarEstou seguindo!
Sucesso!
www.strawberry--land.blogspot.com.br
Este comentário foi removido pelo autor.
ResponderEliminarI want to let the world know about Doctor AKHERE the Great spell caster that brought back my husband to me when i thought all hope was lost. Doctor AKHERE used his powerful spell to put a smile on my face by bringing back my man with his spell, at first i thought i was dreaming when my husband came back to me on his knees begging me to forgive him and accept him back and even since then he loves me more than i ever expected so i made a vow to my self the i will let the World know about Doctor AKHERE because he is a God on earth. Do you have problems in your relationship ? have your partner broke up with you and you still love and want him back ? Do you have problem with your finance ? or do you need help of any kind then contact Doctor AKHERE today for i give you 100% guarantee that he will help you just as he helped me. Doctor AKHERE email is: AKHERETEMPLE@gmail.com or
ResponderEliminarcall/whatsapp:+2349057261346
sabe como colocar seguir acima do blog?
ResponderEliminar