Como faz um menu mobile com HTML, CSS e JavaScript #01

Nesse vídeo mostro como faz pra criar um menu mobile com HTML, CSS e JavaScript.
Vídeo do Emmet com CSS: • Emmet uma forma feliz ...
Vídeo de position: absolute: • Pare de chutar e apren...
⁉️Dúvidas⁉️ cola no Discord da CollabCode: bit.ly/discord-...
#frontend #tutorial
Contatos:
🐥 Twitter da CollabCode - / collabcodetech
👩🏻‍💻 Facebook da CollabCode - / collabcode
🐥 Twitter do Marco Bruno - / marcobrunobr
🚀 Linkedin do Marco Bruno - / marcobrunobr
👨🏻‍💻 Facebook do Marco Bruno - / marco.bruno.br

[@lucastrino1969]

Man, nao para com esse canal nao. Mt bom!

[@MarcoBrunoBR]

Não vou parar. Vou tentar até o final do ano. Depois do final do ano vejo como está o canal e vejo s posso continuar :-)

[@lucastrino1969]

+Marco Bruno Tenho certeza que vai dar certo. Sua didatica e otima. Parece q vc aprendeu mt coisa sozinho. Geralmente isso facilita a didatica msm. Esperando pelos videos de git e github. abc

[@Ra40Fa]

Com esse vídeo tive meu primeiro contato com um projeto pratico de js . Aprendi a dividir meu css em várias folhas ao invez de ficar fazendo várias seções . Comecei a entender melhor formas de nomear bem minhas classes pra não ficar perdido. Removi uma crença da minha cabeça que esse evento só acontecia por causa do Javascript que fazia alguma mágica ali no projeto. Vi que o raciocínio lógico que ele tem é fragmentado em vários pedacinhos o que faz tudo parecer muito simples. E o mais importante , entendi tudo e percebi que sou capaz de fazer também , inclusive já conhecia 90% do css , e sinto que estou evoluindo e dando mais um passinho.

[@paulorobson5715]

Preciso pegar umas aulas de JS contigo, nunca vi alguém explicar de uma forma tão sucinta sobre JS. Show parça!!

[@MarcoBrunoBR]

Paulo Robson fico bem feliz que tenha gostado. Essa semana vou começar um curso online ao vivo, por enquanto estou fazendo o site para divulgação do curso, isso está acontecendo todos os dias a noite, começa próximo das 20hrs ou 21hrs esse horário varia porque eu espero meu filho dormir pra começar a live. Se quiser aparecer só acessar o link: bit.ly/twitch-live-collabcode

[@arthurfernandesdeandrade2844]

Meu amigo que aula maravilhosa, estava com didiculdade aqui , mais sua aula foi bem esclarecedora, ótimo trabalho meu amigo , continue assim.

[@MarcoBrunoDev]

Valeu demais Arthur 💜

[@marcoaureliotellofonseca9881]

PQP, sempre pastava com esses menus mas agora é SEM SEGREDO! Didática nota 1.000!!!! Parabéns pela aula.

[@andredejesus9]

Mano, fiquei até triste quando fui olhar suas playlists e não tinha muito mais vídeos. rsrs Foi uma das melhores explicações que já vi até hoje. Continua fazendo esse trabalho, está muito bom!

[@BeroMotocicletariador]

Também fiquei triste, cara, o Marco explica de um jeito que qualquer leigo (como eu) entende.

[@HerlonCosta]

Por mais que eu já conheça o conteúdo, faço questão de assistir os vídeos porque a sua didática é sensacional!

[@annyg3411]

A didática como sempre, sensacional !

[@MarcoBrunoDev]

Valeeeu Anny :-)

[@victorribeiro6167]

To assistindo de madrugada teu vídeo. Você está me ajudando demais. Vejo suas lives do Dininho Adventures, muito top!!! Parabéns.

[@givemeatip433]

Esse cara é foda! Tô pra ver alguém melhor que ele explicando. Obrigado pelo conteúdo, Marco Bruno. Um abraço!

[@claudioadagio]

Não pare com esse bom trabalho

[@MarcoBrunoDev]

Valeu Claudio!!

[@filipeacaciooficial]

Cara... vc tem uma ótima didática! Parabéns!!! Ganhou um novo inscrito só com esse vídeo! ;-) A única coisa que eu faria diferente era: Usar um input checkbox hidden com um id, envolver o menu com uma tag label tendo o atributo for com o id do checkbox e fazer a animação via css estilizando o estado checked... (algo como: menu:checked { ... }) assim não precisaria usar javascript! Mas é com diz o ditado: "Existem mil maneiras de preparar Neston" não é?.... Mais uma vez parabéns!

[@oliveirarodrigonunes]

Muito bom cara, que didática foda! Parabéns

[@MarcoBrunoBR]

Obrigado :-)

[@elizduarte6547]

A didática desse cara e incrível

[@MarcoBrunoDev]

Valeu!

[@cassiogp]

Mais um inscrito aqui mano! Só vídeo top hein! Começando ADS agora e vai me ser muito útil seu canal... Obrigado!

[@MarcoBrunoDev]

Fico feliz que tenha gostado :-)

[@vroxlon]

Muito bom, estou acompanhando suas lives na twitch to curtindo muito a sua didática é excelente man

[@LeonardoFerreira-ux9yr]

onde assisto as lives gravadas?

[@mateusalmeida3531]

Muito bom cara!!! Agradeço de coração por ter compartilhado esse conhecimento conosco. Já estou me preparando para o curso de FrontEnd.

[@MarcoBrunoDev]

Aí sim :-)

[@pablohenrique2537]

Parabéns cara, to acompanhando bastante seu trabalho.

[@MarcoBrunoBR]

Legal Pablo. Acho que você está gostando então :-)

[@thiaguin_ferreira]

Nossa Marco, que aula!!! Parabéns pelo vídeo

[@rennnehzinha8560]

É muito mais facil entender as aulas em video, do que em live. Eu, pelo menos, consigo entender melhor, e olha que você sabe que eu sempre acompanho as lives sempre. Mas as vezes me esqueço, mas sempre estou acompanhando. E, realmente, se houver os cursos das lives em video tb, estou total dentro pra assistir. :))))))

[@elderoliveiracastro1743]

Muito bom Marco! Curti muito seu vídeo.

[@MarcoBrunoDev]

Fico feliz que tenha gostado

[@alvarorangel1858]

Mano, sem palavras! Muito obrigado pela ajuda! E meus parabéns pelo trabalho!

[@MarcoBrunoBR]

Alvaro Rangel feliz que tenha gostado é que te ajudou ;-)

[@MarcoBrunoBR]

Alvaro Rangel feliz que tenha gostado é que te ajudou ;-)

[@marlonsouza2658]

Bom pra caralho irmão!!! Muito bom mesmo!!! Parabéns e sucesso!!!

[@MarcoBrunoDev]

Obrigado cara. Aparece as 22:10 de segunda a sexta que tem umas live feliz :-)

[@JoaoVitor-be9xr]

Não sei se na época do vídeo já tinha, mas dá pra adicionar e remover a classe com toggle('menu_open'). Mas o Marco é o cara na explicação

[@wscatao]

Fala Marco tudo bem? Estou iniciando com Front - End e seu canal tem sido de grande ajuda, muito obrigado !!

[@MarcoBrunoDev]

Tudo bem. Fico feliz em poder ajudar. Sempre é legal trocar conhecimento

[@julianaamerico3722]

Meu deus que perfeição de vídeo!!

[@douglaslima1681]

Muito bom!! Simples e direto. Parabéns pelo canal!!

[@rudnascimento]

Muito bom, simples, objetivo e eficaz, era o que eu precisava!

[@mariocmario1]

Muito fácil de entender o que vc diz! obrigado! Marco!

[@fabricioguimaraes3915]

Muito boa aula e o instrutor me lembra muito o revolta do lol em seu modo de falar

[@MarcoBrunoDev]

Não entendi, mas parece que gostou :-)

[@wendelteixeiradossantosina3970]

Top demais. Mais um excelente tutorial!!!

[@fui7917]

Muito bom Vídeo cara. Bigode foi a melhor kkk

[@MarcoBrunoDev]

Fico feliz que tenha gostado :-)

[@kaiparado]

Muito bom, barbaridade, ganho um inscrito

[@MarcoBrunoDev]

Valeu

[@pidubiu]

Velho que plugin maravilhoso é esse? hahaahahah vou instalar pra ontem.. vai salvar muito tempo

[@rafaellopes9597]

Meo deos, que cara foda, que didática!

[@anselmo17]

Aula muito boa , parabéns pela didática.

[@hemilioaraujo]

Muito obrigado! Mais um vídeo show!

[@isaquebastosbernardo1158]

Cara eu tirei só nesse teu vídeo uma dúvida enorme em JS que tinha... Assistindo em 2020!!!!!

[@MarcoBrunoDev]

Aí sim :-)

[@geovaneborba]

Muito obrigado, estava procurando como fazer para abrir e fechar usando o mesmo botão, aí sem querer chutei um classList.toggle e deu certo kk

[@johnatanbarbosa9076]

CARACA VEI QUE AULA FODA

[@jefterrocha4111]

Muito bom! pensei que seria mais complicado

[@MarcoBrunoBR]

Legal que gostou. É bem simples do que parece :-)

[@altamirsantos6030]

Velho, q didática maneira em

[@edertolentino6041]

Top!!! Explica muito bem. Brigadão!!!

[@anselmosantos4955]

Vc é muito fera, por onde andavas kkkkkk. Valeu show.

[@luiscarloschaddadtridapall490]

Parabéns meu amigo! Show....

[@MarcoBrunoDev]

Obrigado! :-)

[@alexandremarcos4315]

Que didática incrível!

[@MarcoBrunoDev]

Oloko! Estudo muito pra melhorar cada vez mais. Fico feliz que tenha gostado, isso mostra que estou no caminho certo

[@serjao700]

cara, pelo amor de Deus, nao pare nunca de fazer videos!! se possivel, monte um site do zero explicando tudo e todas as propdiedades.

[@black_white_free_fire6413]

opa tu faz video aulas da hora cara parece aqueles cursos pago

[@MarcoBrunoDev]

Sim :-) Você pode ver a ementa do meu curso nesse site aqui: dofrontaoend.collabcode.training

[@paulotrajano83]

Velho, seu vídeo é muito bom, sua didática também. Mas quero te dar somente uma dica: pausas. Elas ajudam a acompanhar o raciocínio e evita que o espectador se perca. Tu parece ser um cara bem dinâmico, mas as pausas nos lugares corretos vão melhorar ainda mais teu conteúdo.

[@MarcoBrunoDev]

Obrigado pelo feedback, vou me policiar e melhorar esse ponto :-) Se puder da uma olhada no vídeo que fiz hoje e vê se melhorou e se tiver mais pontos pra melhorar por favor avise :-) kzbin.info/www/bejne/iXXOh2umhphrqqs

[@paulotrajano83]

@@MarcoBrunoDev poxa, excelente atitude a tua. Assim que voltar das férias vejo o vídeo

[@paulotrajano83]

Assisti seu vídeo sobre spread operator e melhorou sim. Excelente conteúdo.

[@MarcoBrunoDev]

@@paulotrajano83 legal, com as pausas os vídeos ficaram pouco melhor e muita mais fácil de produzir, agora eu não preciso ficar gastando 3 horas pra editar um vídeo de 40min

[@paulotrajano83]

@@MarcoBrunoDev que ganho hein!

[@bladellano]

Didática muito boa!

[@victorbohrer4094]

tu é braboo!!!

[@teoben1601]

Oi, Marco Paulo. Parabens pelo video. Me diz uma coisa: Tem alguma diferença entre usar o uppercase e digitar as letras com caixa alta ? Uma outra coisa: Tem alguma diferença entre usar, no font-size, em vez de 12px, usar 12pt ?? Obrigado. Hoje é dia 22-dez-2021, quarta.

[@MarcoBrunoDev]

Se você ESCREVE EM CAIXA ALTA alguém leitores de telas vão ler letra por letra da mesma forma que lemos CVC, por isso que usamos uppercase quando só queremos usar caixa alta em um texto comum

[@teoben1601]

@@MarcoBrunoDev O que seria "CVC" ?? Obrigado. Hoje é dia 31-dez-2021, sexta.

[@WilliamGigliozzi]

Show show show

[@luizaureliobarrosdesouza3111]

Muito bom, parabens otima diga

[@TheGlaucomarques]

e ae cara, curti seus videos... tem como trocar uma ideia rapida com voce sobre brackets ?

[@MasterMan194]

Adorei a simplicidade do menu. Copiei aqui e fiz uma versão sem JS, só HTML e CSS. Em vez das imagens, usei 2 DIVs. Mas no celular ficou ruim, pequenininho. Como adéquo na tela do mobile?

[@BrianVideosFull]

Muito bom!

[@teoben1601]

Oi, Bruno. Tudo jóia ? ONde estaria a classe wrap-menu, que seria a nav ? Eu tava procurando a largura width que vc aplicou. Hoje é dia 1-jan-2022.

[@Claudio-vj6nm]

Excelente aula, como faço assim que usuário clicar na barra e sidebar mostrar aparce no lugar do bar apareça o x(close)?

[@assasinodeabel4839]

Video excelente fiz umas pequenas alterações no codigo pois usei um botão só parar abrir e fechar o menu : $btnMenuOpenAndClose.addEventListener('click',function() { //quando $btnMenuOpenAndClose for clicado a função sera executada $menu.classList.toggle("menuDiv-open"); //a div $menu vai trocar de classe a cada clique; })

[@rodrigoofera]

Ja viu o menu da americanas.com? Não posso fazer um menu com botões e criar vários links a dentro de uma grande div e ocultar e mostrar com js. O semântico é usar lista em Menu? Pra mim poderia ser tudo button entre tags nav. So deveria informar que ali é uma area de navegacao cliques de acesso.

[@DaviSilvaGuitar]

Cara sensacional... Uma duvida o menu vc usa para mobile teria como usar dessa maneira num menu normal para desktop ??? Ficaria estranho???

[@MarcoBrunoBR]

Funciona sim no desktop, mas não recomendo usar ele porque não é um comportamento que o usuário espera no descktop e irá causar um desconforto para o usurário

[@douglasrochak]

O overflow hidden não funciona em elementos com position absolute tive que usar o position fixed, tem algum outro jeito ? Fora usar position relative no pai do elemento pq dai bugou tudo aqui

[@felipejesus5011]

Opa, muito boa a dádica. O senhor bem que poderia fazer uma aula mostrando como usar o document.getElementById.

[@MarcoBrunoDev]

Posso sim. Mas acho que você vai usar mais o document.querySelector na vida :-)

[@JobinFerreira]

Se vc colocar o toogle ao invés do add já não resolveria? Pra não precisar criar uma nova função pra remover a classe.

[@MarcoBrunoDev]

Acho que funciona sim :-)

[@teoben1601]

Qual editor vc está usando ? SEria o Sublime ? Hoje é dia 1-jan-2022.

[@felipembraga]

Olá, a animação só está sendo aplicada na hora de abrir o menu, mas na hora de fechar está fechando seco. Como eu posso arrumar isso?

[@teoben1601]

Oi. O é depois do . O meu não está funcionando. Hoje é dia 7-jan-2022, sexta.

[@bartsilva5513]

adorei o vídeo, consegui fazer porém não entendi porque meu menu ficou aparecendo da direita para esquerda.

[@renesenatech]

Muito top! Parabéns pela aula! 👏👏👏 Tem planos pra fazer um vídeo mostrando como faz aqueles carrossel de imagens com HTMl, CSS e JavaScript ?

[@MarcoBrunoBR]

Tenho sim. Acho que saí na sexta ou segunda :-)

[@OttoJuniorGames]

Qual é programa que ele esta usando?

[@teoben1601]

Oi. Vc pretende fazer algum menu igual ao da alura ? Hoje é dia 25-dez-2021.

[@MarcoBrunoDev]

Oi Teo, por enquanto sem previsão de novos cursos/aulas, mas valeu a sugestão :-)

[@teoben1601]

Senhor Marco Bruno: O hamburguinho so pode ser extensão .svg ? O meu não está funcionando. Baixei uma imagem extensão png. Eu acompanhei também o seu outro projeto do position static e relative, mas a div não quis mudar. Hoje é dia 12-jan-2022, quarta.

[@endersonfranca4569]

SOCORRO! Olhando você escrevendo o codigo sem ponto e virgula tá deixando eu louco(Pois estudei muito php, ai já sabe né....) kkkk Mas é um ótimo conteúdo, obrigado!

[@marlonsouza2658]

Ola professor fmz??? Me diga uma coisa, como uso o transform translateX & transform Scale juntos? Fiz um botão aqui, add um HOVER nele, porém ele está se mexendo para o ponto inicial antes do translateX. Teria outra forma de centralizar o botão sem o translateX?

[@thiagodiniz8224]

Qual é melhor usar, text-indent:-999 ou font-size:0 ?

[@MarcoBrunoBR]

Thiago Diniz o text-indent tem menos efeitos colaterais. Se quiser posso te explicar um pouco melhor qual a diferença de usar um ou oitro. Só aparece a live coding que estou fazendo de segunda a sexta e começa perto de 20hrs ou 21hrs, o horário de início é estranho porque eu espero meu filho dormir pra começar a live. Clica no link aparece na live d pergunta sua duvida que conversamos sobre ela: bit.ly/twitch-live-collabcode

[@marlonsouza1896]

Fala mano, sabe pq não aparece a imagem ao usar o bg image ?

[@Leo-gm5vl]

Muito bom! Como faço pra colocar subsmenu?

[@maicon484]

maravilha

[@AlexMoreira]

Maroto.😂

[@MarcoBrunoBR]

Eu gosto dessa palavra. Estou quase conseguindo ser mais natural nós vídeos...quase :-)

[@AlexMoreira]

Marco Bruno Está ótimo Mestre. Morro de rir às vezes.😂😂😂

[@camilaisabela]

Por favor, disponibiliza as imagens do menu, pois baixei umas 999 imagens e modificou toda a formatação da página, rsrs. E a fonte Roboto, vc inseriu na página usando o Google Fonts? Não entrou como padrão

[@MarcoBrunoDev]

Vixi nem sei mais onde está a imagem, desculpa. Agora sobre a font-family deveria ir normal uma vez que fez o import dela. Se tiver mais dúvida cola no Discord da CollabCode: discord.gg/FP5UaAG

[@hemilioaraujo]

Pessoal, não façam como eu e esqueçam de colocar o id do menu no href do link. Senão fica atualizando a página e a animação não acontece com o js. Menu

[@dayarakelly6112]

OBRIGADA! Fiquei um tempão tentando encontrar o que fiz de errado... 🤦‍♀️ Aí vi seu comentário.

[@padozim]

Estou usando o vue.js e fazendo ele como componente, o que acontece é que o primeiro click não funciona só no segundo. Alguém sabe o porque? Vlw, e parabéns pelos videos, estou sempre acompanhando!

[@MarcoBrunoBR]

Octavio Luiz Benetti Viana feliz que tenha gostado do vídeo. Eu não sei muito sobre VueJS. Sem olhar o código eu chuto que pode ser algo que você fez do ciclo de vida dele. Posta o seu código no Github ou um CodePen da vida pra eu dar uma olhada e ver se consigo te ajudar

[@Sallitozonaoeste]

Olá pessoal. Alguém pode me informar qual extensão do firefox ele esta usando para alterar a resolução?

[@MarcoBrunoDev]

É nativo

[@Sallitozonaoeste]

@@MarcoBrunoDev muito obrigado!

[@raquelguandalini8355]

Olá! Quando eu clico no menu ele aparece e retorna muito rápido, inclusive quando insiro console.log($menu) . Usei exatamente o código que você fez. O que será que está acontecendo? O menu não fica 'aberto' de jeito nenhum. Parei aqui: const $menu = document.querySelector('.menu') const $btnMenu = document.querySelector('.btnMenu') $btnMenu.addEventListener('click', function(){ $menu.classList.add('menu_open') }) Alguém pode me ajudar?

[@raquelguandalini8355]

Consegui gente.. O problema estava no meu HTML... eu tinha feito dessa forma: Menu . Porém o certo seria Menu Ufaaaaa

[@MarcoBrunoDev]

Cola no discord da comunidade que fica mais fácil trocar o conhecimento: discord.gg/FP5UaAG

[@matheusalff]

legal

[@youdaniellfortes]

Cara. tu tem curso de javaScript? Se tiver passa o link ai! Vlw

[@LeonardoLuzx]

Me inspiro em vc cara.

[@MatheusSantos-sw3ek]

onde consigo as imagens do hamburguer?

[@MarcoBrunoDev]

Tem muitas na internet, recomendo o site finder icon

[@wagnerengenhoca]

O Javascript eloquente em pessoa.

[@MarcoBrunoDev]

Trabalhando para virar isso, ainda falta muito conteúdo para gravar e publicar ;-)

[@tng8245]

to tentando fazer o código igual o seu para treinar e ta dando errado

[@MarcoBrunoDev]

Me conte o que está errado?

[@tng8245]

Não esta entrando os códigos fica só a tela com html

[@PhellypeChannel]

onde pego os arquivos pra eu brincar ?

[@hericlesferreira6829]

Alguem me ajuda. Fiz um site responsivo usando bootstrap. Acontece que, se eu acesso o site no meu celular, fica tudo bugado. Mostra como se fosse um site no computador, porém considerando as dimensões da tela do celular. Como eu posso fazer meu site ficar "normal" no computador, mas atender propriedades mobile?

[@kauemagalhaes262]

tu usou o

[@hericlesferreira6829]

@@kauemagalhaes262 obrigado pela respostam, Kaue. Não achei isso nas pesquisas que fiz, mas devo ter pesquisado errado. No dia que deixei a questão, fui observar outros sites responsivos e observei que nunca tinha usado essa tag . Agora aprendi, muito obrigado

[@MarcoBrunoDev]

View port é algo bem importante, expliquei sobre nesse vídeo aqui que fiz recentemente: kzbin.info/www/bejne/innLi5-DarRjg8U

[@tng8245]

você consegue mandar o código que você utilizou?

[@lucianolopezdossantos]

penso que seria mais fácil, alterar o valor -100% para 0% do que ficar adicionando uma classe

[@MarcoBrunoDev]

É uma boa abordagem também, algumas estratégias ganhamos alguma coisas e perdemos outra. Da forma que fiz só trás mais legibilidade, mas é um pouco mais trabalhosa.

[@josekinab6251]

Se desse ,eu dava mil likes nesse vídeo ( ótimo ) ...

[@thegabi997]

Quando tento inserir o javascript dá erro

[@MarcoBrunoDev]

Qual a mensagem de erro que você esta recebendo Gabriel?

[@edimirk9]

Ele ta usando o vs code ou Android stud

[@MarcoBrunoDev]

Vscode

[@phill.6789]

Achei muito dificil... faria uma coisa bem semelhante com o Jquery...

[@MarcoBrunoDev]

Sim! Com jQuery é mais feliz, mas o proposito do video é mostrar que é possível fazer sem jQuery ou qualquer biblioteca ou plugin. Ah! E com jQuery é mais simples se souber ele, mas JavaScript e CSS é algo que todos precisamos saber como dev front

[@PhellypeChannel]

o que tava na linha 5? nao mostrou ela inteira

[@PhellypeChannel]

tentando incrementar um svg no menu, mas nao aparece as imagens :/