A navegação em um blog é uma coisa muito importante, ter um menu que se adapte aos mais variados tipos de tela é, sem dúvida, algo crucial. Um menu fixo, que é responsivo e que apresenta uma caixa de pesquisa é um diferencial que vai agradar a todos os seus leitores, pois torna a navegação em seu site/blog mais simples e ágil.
Aprenda a como fazer o menu continuando a ler a postagem!
1 Vá para Tema > Editar HTML > Clique na caixa de código e aperte Ctrl + F ou F3 > Procure por <head> > Cole a linha abaixo:
Se você ainda não tem as fontes do Material UI importadas no seu blog, adicione a linha abaixo logo após a linha adicionada anteriormente:
2 Agora, procure por ]]></b:skin> e cole a seguinte parte de código acima:
3 Faça as alterações necessárias, como cores de fundo e texto.
4 Em seguida, procure por <body> (ou pela parte que você achar melhor colocar o menu) e cole a seguinte parte de código abaixo
5 Faça as alterações necessárias, adicionando os.
6 Procure por </body> e cole a seguinte parte de código acima:
7 Salve.
Créditos: Base por emre, com ajustes nossos.
Aprenda a como fazer o menu continuando a ler a postagem!
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js' type='text/javascript'/>
Esta linha irá importar o jQuery na versão 1.7.0, mas qualquer versão deve funcionar para o tutorial. Caso não funcione, adicione a linha acima para importar esta versão.Se você ainda não tem as fontes do Material UI importadas no seu blog, adicione a linha abaixo logo após a linha adicionada anteriormente:
<link href='https://fonts.googleapis.com' rel='preconnect'/>
<link crossorigin='true' href='https://fonts.gstatic.com' rel='preconnect'/>
<link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'/>
Obs.: As duas primeiras linhas são necessárias para importar as fontes do Google Fonts, se você já tem elas importadas, adicione apenas a última linha.
nav.menu {
z-index: 999;
position: fixed;
width: 100%;
background: #233541;
}
nav.menu .menu-content {
max-width: 800px;
width: 100%;
margin: 0 auto;
font-size: 16px;
}
nav.menu .menu-content div {
padding: 15px 10px;
line-height: 20px;
}
nav.menu ul {
margin: 0 !important;
padding: 0px;
}
nav.menu ul li {
margin-right: 10px;
}
nav.menu ul li:last-child {
margin-right: 0px;
}
nav.menu ul li a {
color: white !important;
}
nav.menu ul li a:hover {
color: #ccc !important;
font-style: italic;
}
nav.menu ul,
nav.menu ul li {
list-style: none;
display: inline-block;
}
nav.menu .menu-title a {
color: #1ea896 !important;
font-weight: 700;
}
nav.menu .menu-title,
nav.menu .menu-items {
float: left;
}
nav.menu .menu-search {
float: right;
padding: 0 !important;
width: 300px;
}
nav.menu .menu-search form {
float: right;
}
nav.menu .menu-search input {
height: 50px;
color: white;
padding: 10px 10px 10px 40px;
border: none;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 50px;
float: right;
background: transparent;
backdrop-filter: blur(5px);
}
nav.menu .menu-search input + label::after {
font-family: "Material Icons";
content: "\E8B6";
color: white;
font-size: 18px;
height: 50px;
line-height: 50px;
padding-left: 13px;
display: block;
position: absolute;
cursor: pointer;
}
nav.menu .menu-search input:hover + label::after, nav.menu .menu-search input:focus + label::after {
color: #1ea896;
}
nav.menu .menu-search input:focus {
outline: none;
width: 300px;
background: rgba(0, 0, 0, 0.25);
}
nav.menu .menu-button,
nav.menu #menu-head-mobile {
display: none;
}
nav.menu .menu-search input,
nav.menu .menu-search input + label::after {
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
/* Resolução em que o menu é ajustado */
@media screen and (max-width: 700px) {
nav.menu .menu-title {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 46px;
text-align: center;
padding: 10px 0 0 0;
float: none;
}
.menu-button {
width: 55px;
height: 46px;
position: absolute;
left: 0;
top: 0;
padding: 0 !important;
cursor: pointer;
z-index: 12399994;
}
.menu-button:after {
position: absolute;
top: 22px;
left: 20px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid white;
border-bottom: 2px solid white;
content: "";
}
.menu-button:before {
position: absolute;
top: 16px;
left: 20px;
display: block;
height: 2px;
width: 20px;
background: #ddd;
content: "";
}
.menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 19px;
background: white;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.menu-button.menu-opened:before {
top: 23px;
background: white;
width: 19px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.menu-button.menu-opened:after,
.menu-button:before {
-webkit-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;
}
nav.menu .menu-button {
display: block;
}
nav.menu .menu-items {
background: #233541;
border-top: 1px solid rgba(0, 0, 0, 0.25);
width: 100%;
position: fixed;
top: 50px;
padding: 0px !important;
}
nav.menu ul {
width: 100%;
}
nav.menu ul li {
width: 100%;
padding: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
nav.menu ul li:hover {
background: rgba(0, 0, 0, 0.25);
}
nav.menu #head-mobile {
display: block;
padding: 23px;
color: #ddd;
font-size: 12px;
font-weight: 700;
}
nav.menu .menu-content div {
padding: 15px 0px;
}
}
<nav class='menu' id='main-menu'>
<div class='menu-content'>
<div class='menu-button' onclick='toggleMenu()'/>
<div class='menu-title'><a href='/'>Título</a></div>
<div id='menu-head-mobile'/>
<div class='menu-items'>
<ul>
<li><a href='#'>Início</a></li>
<li><a href='#'>Sobre nós</a></li>
<li><a href='#'>Categorias</a></li>
<li><a href='#'>Contato</a></li>
</ul>
</div>
<div class='menu-search'>
<form action='/search' id='menu-searchbox' method='get'>
<input autocomplete='off' id='search-field' name='q' placeholder='Digite qualquer coisa e dê enter...' type='text'/>
<label for='search-field'/>
</form>
</div>
</div>
</nav>
<script>
//<![CDATA[
const menuResizeWidth = 700;
$(document).ready(function() {
resizeMenu();
});
$(window).on('resize', function() {
resizeMenu();
})
function toggleMenu() {
$(".menu-button").toggleClass("menu-opened");
var list = $("#main-menu").find(".menu-items");
if (list.hasClass("open")) {
list.slideToggle().removeClass("open");
} else {
list.slideToggle().addClass("open");
list.find(".menu-items").show();
}
}
function resizeMenu () {
var mainMenu = $("#main-menu");
if ($(window).width() > menuResizeWidth) {
mainMenu.find(".menu-items").show();
} else {
mainMenu.find(".menu-button").removeClass("menu-opened");
mainMenu.find(".menu-items").hide().removeClass("open");
}
};
//]]>
</script>
Perceba que o valor 700 (Resolução em que o menu é ajustado) está presente no código CSS e no código JavaScript. Alterando um lugar, o outro deve ser alterado também.
Créditos: Base por emre, com ajustes nossos.
Adorei o tutorial, vou colocar o menu no meu próximo layout :)
ResponderExcluirCat Girl
Que bom que gostou, fico feliz que vai colocar ><
ExcluirEu gostei desse menu fica muito bonitinho!
ResponderExcluirCara parabéns pelo lay tá incrível !Sério!! Tá divino !
Parabéns suas criações são incríveis!
Muito Obrigado! Que bom que gostou <3
ExcluirEU ACHO QUE VOU CHORAR, QUANDO ENTREI NO BLOG E VI A CLARICE EU TIVE UM ATAQUE, MDS, SOCOORRRROOOOOOOOOOOOOOOOOOO -q
ResponderExcluirO menu é foda *0*, já salvei aqui nos favoritos B|
Eba s2
ExcluirNossa, eu estava doida nesse tuto! Eu tô realmente apaixonada nesse layout da Clarice ♥ Mesmo não sendo fã, eu amei, achei muito bonito!
ResponderExcluirhttp://theluxurybeats.blogspot.com/
Que bom que achou o tuto e que gostou do blog, obrigado!
ExcluirEu sempre quis saber como se fazia esse menu, obrigada por postar ^^
ResponderExcluir{euamohtml.blogspot.com}
Eu também sempre queria saber como fazer, então decidi procurar e fiz um :v . Que bom que voltou, tava com saudades de você s2
ExcluirObrigada pelo tutorial. Estou a mudar o design do meu blog e andava a perguntar-me como se faz este menu. :)
ResponderExcluirJá agora, vocês têm FB ou Twitter para poder ir acompanhando as vossas actualizações?
Que bom que gostou, espero que tenha ficado legal no seu blog :3 Os links para redes sociais estão na sidebar ^^
ExcluirTava mesmo precisando, to fazendo um lay novo e queria colocar a caixa de pesquisa no menu *-*
ResponderExcluirQue bom que achou :3
ExcluirOi, você poderia me ajudar? Gostaria de saber onde tenho que modificar para o texto, assim como a caixa, ficar no centro do menu.
ResponderExcluirbem, se você quiser um menu como o blog tá agora(centralizado), eu não vou ter como ajudar por aqui porque eu modifiquei o código. Mas se quer apenas o texto, bota um < center > < / center> (sem espaços) entre os seus link, talvez funcione.
ExcluirOi, tudo bem?
ResponderExcluirTenho uma dúvida: nesse menu, dá para colocá-lo descendo junto com a barra de rolagem? Como se ficasse fixo no topo mesmo, com o seu?
Beijos <3
Atualizei o tutorial e agora ele funciona direitinho, os códigos estão até menores, espero ter ajudado!
ExcluirOi, Alan!
ExcluirEntão... aqui não pegou! hahahaha Esse seu tutorial é o único que funciona no meu layout, ele formata direitinho o menu, o único problema é que ele não rola junto, não fica fixo, sabe? :( Você pode me ajudar?
Hum, veja se na parte do css, no primeiro código #NavbarMenu { tem position: fixed; z-index: 9999;. Você também pode tentar excluir todo o menu(HTML e CSS) e dai tentar colocar ele de novo. Se não funcionar, entre em contato de novo :3
ExcluirUma dica: Para centralizar os links, é preciso colocar este código:
ResponderExcluirborder-left: 200px solid #CD6090; /* Tamanho e cor da borda - não retire pois ela centraliza o menu */
Abaixo da parte que está definindo a cor do background do menu.
É preciso colocar a mesma cor do background do menu nesse código.
Exemplo, se seu background é #FFFFFF no código que passei também coloque esta cor.
Fiz isso e deu certo no meu.
oooooooobrigada sua linda, finalmente consegui centralizar!
ExcluirCom a postagem atualizada, o menu fica centralizado automaticamente!
Excluirvamos fazer parceria beijos e obg ...http://a-culpa-e-suaee.blogspot.com.br/
ResponderExcluirObrigado! Vc me salvou! ♥
ResponderExcluirEu não consegui :/
ResponderExcluirO que exatamente você não conseguiu? Algum erro no código?
ExcluirAdorei! Mas como eu poderia tirar a caixinha de pesquisa?
ResponderExcluirAdorei! Usei no meu blog! Obrigada!
ResponderExcluirMds, como eu amo esse blog!!!
ResponderExcluirA maioria dos tutoriais que eu uso no meu blog são só indicados por você. Você é demais, obrigado!
Me ajudou muito até que enfim depois de varios tutoriais desse menu esse foi o unico que deu certo! Ameiii ♥
ResponderExcluirCara você é muito genial! Obrigada ^^
ResponderExcluirBlogueira♡Bipolar
Amei o tuto, muito obrigada
ResponderExcluirolá, você pode me ajudar?Eu queria colocar borda nesse menu. Eu já adicionei o código border-dottom:1px dashed #FF69B4, mas ele não funciona, o que eu faço?
ResponderExcluirhttp://cute-universe.blogspot.com.br/
Bem, um dos possíveis problemas de não estar funcionando é que o código que você escreveu está errado. O certo seria:
Excluirborder-bottom:1px dashed #FF69B4;
Caso o problema continue, entre em contato de novo! ^^
Finalmente um código que funcionou perfeitamente! Muito obrigada por disponibilizar!
ResponderExcluirZona de Conspiração
Não entendi... o código cadê é invisível??? ou isso é brincadeira??? o pessoa ver e eu não!! sacanagem pura!!
ResponderExcluirNa postagem tem o link para os dois códigos, é apenas clica em 'este código' que está destacado. É um link, não coloquei ele na postagem pois era muito grande.
ExcluirOlá. Você dizer como inserir ícones de redes sociais alinhados à direita, antes da caixa de pesquisa? Obrigada desde já.
ResponderExcluirHeey!
ResponderExcluirBem, eu utilizei o código no meu blog de teste, porém quando eu vou digitar na caixa de pesquisa, não aparece o texto.
Isso acontece somente comigo?
Bem, isso não era para acontecer, eu vou tentar resolver o problema, fique de olho na postagem durante essa semana, qualquer coisa eu atualizo!
ExcluirOi, adorei o tutorial <3
ResponderExcluirSó uma dúvida: se eu quisesse que o menu não descesse conforme eu rolo a página, como eu teria que fazer?
Um beijo e desculpa e incomodar, mas não encontrei em nenhum lugar a resposta pra minha dúvida =(
Consegui com o seu código! Queria saber se posso publicá-lo no meu blog, com as modificações que eu fiz, mas dando os créditos a você e fazendo uma chamadinha de divulgação do seu blog <3
ExcluirUm beijo!
Claro que pode! ^^
ExcluirA imagem não está aparecendo :c
ResponderExcluirAjudem-me! Eu fiz tudo como descrito, mas olha o que aconteceu no meu blog: http://ageekgirlsblog.blogspot.pt/
ResponderExcluirComo resolvo isso? URGENTE!
Me desculpa, finalmente consegui! Mas obrigada na mesma :)
ResponderExcluirOlá! Não consigo visualizar a imagem :( helpp
ResponderExcluireu não achei aquele ]]> que você colocou
ResponderExcluirClique na caixa de códigos, aperte Ctrl + F ou F3 e procure pelo código novamente.
ExcluirOlá, eu gostei muito do tutorial porque me ajudou, mais houve um problema, fica uma lista preta descendo junto embaixo do menu, o que eu faço?
ResponderExcluirTente ver se não cometeu nenhum erro na hora de realizar o tutorial, ou se não esqueceu de aplicar o CSS.
ExcluirOi! Obrigada pelo tutorial...
ResponderExcluirFuncionou direitinho, mas preciso saber como dar espaço em um link e outro, ficou tudo colado :/
Beijos!
Obrigado por utilizar um de nossos tutoriais!
ExcluirNa linha " menu a { " coloque margin-right: VALORpx
Em valor coloque a distância que preferir!
Não conseguir fazer ... o menu nao ficou fixado bem no blog ... poderia dar uma olhada ?
ResponderExcluirwww.filmeseseriespower.com
Como assim ele não fica bem fixado no blog?
Excluireu nao consegui=/ fica o texto todo aparecendo qd visualizo só consegui a parte dos links msm=/ oq sera?
ResponderExcluirVeja se não teve nenhum erro na parte de colocar o CSS, como local, talvez alguma parte faltando...
ExcluirEntão, eu apaguei a parte que você pediu la em cima, e mesmo seguindo todos os passos, não fico com o menu fixo. Pior, que apaguei e esqueci de abrir os >...< pra copiar junto, e agora perdi ;s
ResponderExcluirOie!
ExcluirA parte que eu disse que era pra apagar não é/era obrigatório. Apenas se você não quer a caixa de pesquisa você apaga, mas do mesmo jeito deixei a parte que era pra apagar, caso queira, destacado em laranja.
Eu revisei o código e não achei nenhum erro que impedisse que ele ficasse fixo no topo do blog, eu posso testar em alguma outra hora para conferir se não tem nada de errado mesmo.
Reveja se copiou todo o CSS corretamente ou se não tem algum outro código com o nome menu que pode estar em conflito com o código deste tutorial! Caso tenha, coloque um número 1 do lado do código menu em todos os 'menus' que tem nesse código.
Obrigado por usar um dos nossos tutoriais, fico muito feliz. Espero que tenha ajudado, qualquer dúvida entre em contato novamente! <3
Adorei! Muito obrigada! https://brilhamulher.blogspot.com.br/
ResponderExcluirAmei o menu! Obrigada <3
ResponderExcluirhttp://heybrina.blogspot.com.br/
Muito Bom eu coloquei no euamoitapema.com parabéns pelo tutorial 💜
ResponderExcluirteria como colocar ele no centro?
ResponderExcluirMuito bom!!! Obrigada por disponibilizar!
ResponderExcluirFicou perfeito, obrigada!
ResponderExcluirQue blog incriveeeel, ta servindo como inspiração pra mim kkk
ResponderExcluirFico muito feliz em saber que gostou!
ExcluirEspero que o tutorial tenha sido útil, volte sempre!
Boa noite Alan.
ResponderExcluirFuncionou bem. Fixado, pesquisa funcionando. Só não abre as opções do menu no celular. No painel do blogger, em Tema, é para deixar Sim ou Não em Escolher tema para dispositivos móveis?
Pergunto porque segui outro tutorial para deixar todo o blog responsivo, onde é preciso selecionar Não nesta opção.
Oi Cristiano Santos!
ExcluirNo painel do Blogger, em Tema > Escolher tema para dispositivos móveis, você pode escolher a opção "Computador". Acredito que, dependendo do seu template, mesmo com a opção "Dispositivos móveis" selecionada o menu irá aparecer e funcionar corretamente. Vale a pena conferir se o viewport do seu template está correto.
O tutorial foi atualizado recentemente, tente aplicá-lo novamente e verifique se o problema continua. O template utilizado no blog de exemplo está para ser visualizado como "Computador" em dispositivos móveis e apresenta o comportamento esperado. Caso o problema continue, entre em Contato.
Valeu!
Alan, bom dia!
ResponderExcluirSegui esse tutorial e quando o menu fica responsivo ele não abre as opções.
Verifiquei o seu blog de testes onde consta o menu e vi que no código de lá, está com o jQuery 1.7, esse que está na postagem 1.11 não está funcionando, pelo menos não no meu. Fazendo a mudança para o jQuery 1.7 funciona tudo normalmente.
Também nesse código postado aqui, ficou faltando fechar o input... Só avisando... Pois o blog não permitiu salvar e subiu falando para fechar o input, quem entender um pouquinho consegue alterar numa boa.
Enfim, obrigado pelo tutorial.
Obs.: Sobre o comentário do Cristiano Santos acima, após a realização do tutorial para deixar o blog responsivo, para funcionar bem, deixei desativado a função para celulares, deixei apenas para computador e também alterei o meta viewport, inclusive, notei que fica melhor com a escala inicial em 2, ao invés de 1.0.
E o Tom faz tudo!
ExcluirOie, obrigado por avisar que o tutorial estava errada. Aproveitei para refazê-lo e corrigir este problema.
Valeu pelas dicas!
Kkk, nem faço. Tenho muito o que aprender ainda, mas, fiz uns cursinhos online de HTML & CSS para tentar melhorar um pouco os meus conhecimentos na edição do meu layout.
ExcluirVou refazer o tutorial então. :) Desde de já fico grato.
Voltando novamente para dizer que o menu ficou lindo! Inclusive percebi que alterou algumas coisinhas... Ficou bem mais bonito. :)
Excluir