Menu Mobile - HTML, CSS e JavaScript

[@Origamid]

Só lembrando a "gambiarra" do ícone (3 traços) do botão hamburger não é necessária, um SVG resolveria isso facilmente. Dito isso, tem alguns ensinamentos legais de transform, transition e currentColor que passo enquanto ensino o mesmo. E eu pessoalmente uso esse tipo de botão no meu site (até a Apple usa essa "gambiarra" também). No restante o código todo é baseado em boas práticas.

[@klebermaia925]

tentei fazer igual ao seu para praticar, mas quando chegou na parte do JS não pegou. ainda não fiz nenhuma aula de JS, mas gostei de como sua pagina ficou e queria aprender a fazer isso. os arquivos tem que esta na mesma pagina certo? HTML HTML HTML5 Menu introduçao paragrafos e quebra de linhas Emojis, Símbolos e Imagens Favicon Biblioteca de Tags CSS @charset "UTF-8"; body, ul{ margin: 0px; padding: 0px; } a{ color: black; text-decoration: none; font-family: sans-serif; } a:hover{ background: rgba(0, 0, 0, 0.07); } #logo{ font-size: 1.5rem; font-weight: bold; } #header { box-sizing: border-box; height: 70px; padding: 1rem; display: flex; align-items: center; justify-content: space-between; } #menu { display: flex; list-style: none; gap: 0.5rem; } #menu a { display: block; padding: 0.4rem; } #btn-mobile { display: none; } @media (max-width: 900px) { #btn-mobile { display: block; } #menu { display: none; } #nav.active #menu { display: flex; } } JS const btnMobile = document.getElementById('btn-mobile'); function toggleMenu(){ const nav = document.getElementById('nav'); nav.classList.toggle('active'); } btnMobile.addEventListener('click', toggleMenu);

[@jorgevargas5834]

​ @Kleber Maia faltou voce linkar o javascript no html... Lembrando que ele ali no video não está usando uma IDE como um VScode e sim um editor online que ele mantem no site (o link: www.code.origamid.dev/ ) Por isso ele não precisou linkar o javascript no arquivo htm.

[@klebermaia925]

@@jorgevargas5834 obg funcionou agora. :)

[@airtonnba3580]

@@jorgevargas5834 Esse linkar que vc fala e usar o include para chamar o doc js? Grato

[@comentotudo7]

@@airtonnba3580 É usar a tag

[@jorgeteixeira9184]

NENHUM curso se compara a Origamid, sempre direto ao ponto, boas práticas, didática incrível! Me orgulho de ter cursos da Origamid no currículo! Parabéns cara, você manda bem demais!

[@KawãKleber]

Aula sensacional, finalmente consegui compreender perfeitamente a estrutura de animações e a lógica de como fazer, agradeço pelo seu empenho em transmitir de forma eficiente todo esse conhecimento e ainda entregar um pequeno projeto incrível.

[@eduriodejaneiro]

Estou me transformando em um ótimo profissional com os cursos da Origamid, na boa! Feliz demais com o aprendizado de cada dos cursos, obrigado demais André Rafael, pela atenção às aulas!!!

[@nortonlui1]

Realmente muito bom mesmo.

[@Elldevv]

e ai man, como estao os seus conhecimentos em programaçao 9 meses depois desse video?

[@GiseleBrito1000]

up

[@rafaelrocha5534]

Recomendo muito o conteúdo da origamid. Melhor curso de front end que já comprei

[@lucaspraciano4640]

Onde tem?

[@danielyabu3203]

@@lucaspraciano4640 procura o site Origamid.

[@marcelomagalhaes4559]

Qual outros cursos você tem para fazer a comparação?

[@diegouniv-s7c]

Cara, de longe você foi o melhor professor de HTML e CSS que eu tive. Talvez seja pedir muito, mas não custa tentar...poderia criar o layout de um ecommerce com o header/cards dos produtos etc... Com a sua didática ficaria fácil, abçs.

[@luizaugustosilvadossantos8175]

Ele faz isso no curso de Woocommerce

[@MegaKadhu]

Muito bom mesmo, a gente não fica perdido, sabe exatamente o que está acontecendo.

[@vcosta95]

Que aula absurda de boa, comprei o seu curso e não me arrependo. Muito obrigado por transmitir seu conhecimento.

[@Os3t4God]

Esse é o video mais completo que ja vi.. quase ninguém fala de acessibilidade, mesmo sendo um ponto tão importante.

[@capybaratech377]

Professor. Não consigo te agradecer o suficiente. Eu assisti um vídeo de 4h em inglês e não deu certo. Parabéns. Deus te abençoe sempre.

[@jonnystwart7832]

Andre, MEUS PARABÉNS!!! Foi a MELHOR VÍDEO-AULA que já assisti. Uma didática SUPIMPA, com destaques nos DETALHES, de forma EXPLÍCITA, indo direto ao assunto, sem rodeios desnecessários. Estou realmente impressionado com o seu modo de transmitir conhecimentos. Meus parabéns! Sou INSCRITO, e sempre que você tiver algo de Front-end, gostaria de ser informado. Mais uma vez "Meus Parabéns, com sinceros cumprimentos" e, desejando ÊXITO em todos seus EMPREENDIMENTOS. Valeu mesmo.

[@johnnydeymisson1842]

Rapaz, a cada vídeo que o Rafael posta aqui, fico feliz demais! Obrigado meu amigo, vamos evoluir!

[@carlosmarcelino6128]

cada video é um melhor que o outro

[@rafaelmonteiro1799]

Puta merda cara, que aula... Eu to começando minha introdução na programação agora, e consegui entender a maior parte da explicação de forma fácil. Mt foda!

[@anacarolinariquierisantos9618]

tudo que o cara fez eu entendi e aprendikkkkkkk eu já vi esse mesmo menu sendo desenvolvido por umas 4 pessoas com premio de n sei oq que trabalham na empresa n sei oq q n lançaram a braba na didática igual esse mano

[@yurifreitas2775]

Você é o melhor!!!!!! comprei seu curso e não me arrependo nada!! Sucesso André, você merece o mundo irmão!

[@andersonsouza6885]

Melhor investimento que eu fiz, recomendo de mais esse curso !

[@Luquinhas1899]

André, você é sensacional, cara!! incrível!! que didática, e que leveza pra dar uma aula. Nota dez, velho!! Já vi professores bons, com bastante conhecimento, mas que não sabem transformar todo esse conhecimento em aula, você é totalmente diferente. Sabe demais e sabe explicar tudinho... Foda!!!

[@SilvanMiller]

sem duvida vc é o melhor passei o dia tentando resolver o botão hambúrguer e vc me deu a luz. Gratidão!!!!

[@rodrigosatana2884]

Só tenho a agradecer a sua didática André, no começo é tudo muito confuso sei que vou ter de voltar aqui mais umas 4 ou 5 vezes mas vale apena já por saber o tipo de conteudo que vou encontrar

[@inovativo]

Eu realmente não entendo quem da deslike em um video desses. Bom vídeo !! Parabéns !

[@felipecosta6036]

teu video me salvou muito em um teste pra vaga de emprego, achei muito completo e com ótimas dicas, parabéns

[@017chestera]

Obrigado, muito bem explicado. Conteúdo do canal parece bom, vou rever esse e procurar mais dps

[@Bread-vk8fl]

Cara, que trabalho primoroso!! Fui fazendo junto e é muiiito fácil de entender. Mas já esqueci tudo obviamente e se for pra fazer sozinho não consigo, sou iniciante ainda. Mas o jeito que o cara explica é de outro mundo!! Diferente de muito youtuberzinho por ai… aqui o nível é outro mesmo!!

[@jdribeiro]

Olha, eu não sei mensurar o tanto que aprendi nessa aula. Muito muito obrigado!!!!

[@Daniel_Griebeler]

O cara tem um conhecimento absurdo dessas tecnologias.

[@pablobombonato]

Estou aprendendo programação e tenho assistido muitos vídeos recentemente. Esse é o primeiro vídeo desse canal que eu assisto e tive que parar para elogiar! Você ensinou de um jeito muito claro e objetivo, tirou várias dúvidas minhas rapidinho. Agradeço pela aula e te desejo muito sucesso! Já me inscrevi no canal e vou continuar aprendendo. 👍

[@eduardobertozi8506]

Muito bom! Didático demais, não fica só no faz isso, faz aquilo. Tudo foi muito bem explicado em detalhes. Por causa disso, em breve vou adquirir um curso da Origamid! Parabéns.

[@gabrielduarte4359]

cara, vc me convenceu a comprar seu curso com esse video. parabens! didática foda!

[@Elldevv]

kkkk, se eu nao tivesse assinado alura e comprado o programadorBr eu compraria esse agora depois desse video, mas o curso da Origamid será o próximo da minha lista

[@lordpain1]

@@Elldevv eae irmão como você tá hoje em dia, conseguiu algum job com esses cursos ?

[@Elldevv]

@@lordpain1 opa kk, ainda estou estudando amigo, não procurei job ainda, comprei curso da Origamid que inclusive hj esta na promoção o Vitalício por 384 rs

[@daviddean5803]

Sensacional, me interessou mais em conhecer a plataforma de ensino, muito bom mesmo o conteudo. Parabens.

[@matheuscruz3118]

toda vez que vou fazer um menu venho ver as dicas de acessibilidade hahaha muito bom !

[@alvarodinamo8397]

Minha cabeça chegou a doer de tanta informação. É ótimo que ele explica cada linha de código

[@Sanm-duiche.]

Sou iniciante, vejo seus vídeos e aprendo muito. Obrigado.

[@jackychou2644]

yeah,what box hidden and visible transition is very useful!thanks!

[@euandrebastos]

A melhor aula e explicação que vi até hoje. Apesar de já fazer com algumas ferramentas, sempre quis aprender usando um código limpo e seu tutorial é perfeito. Parabéns e muito sucesso pra você!

[@veto4779]

Vale mto a pena o investimento nos cursos da Origamid só conteúdo top

[@victorparizio5699]

Incrível!!! Estou sem palavras para o tanto de coisa que aprendi nesse vídeo, toggle é uma delas... acessibilidade 🤯🤯🤯 é coisa que nunca vi Muito Obrigado pelo conteúdo

[@mefilipem]

Nossa, extremamente grato por ter um conteúdo com tanta qualidade disponível assim abertamente no youtube, estou começando minha jornada agora no aprendizado de web e esse tipo de coisa incentiva muito a continuar aprendendo. Muito obrigado!! Já vou me inscrever no canal.

[@oldmilhas]

Estou a fazer um projeto grande e quero agradecer... Muito obrigado por fornecer seu tempo para ensinar fazer tal coisa que me atromenta durante anos.

[@leandrosargi]

Cara que video excelente!! Um ótimo profissional, queira eu um dia chegar ao seu nível. Muito obrigado por compartilhar esse conhecimento. Estou aqui fazendo meu primeiro site, e depois de muito pesquisar, achei seu video e fiquei surpreso com a riqueza de detalhes, isto sim é um menu feito de forma profissional!! Obrigado!!

[@ronaldsena9078]

Que aula maluco _ A melhor vista ate hj, Parabéns .

[@eduardohenriquedeassis9729]

Você é muito bom professor!! Sempre que preciso aprender algo é só correr aqui que o problema tá resolvido!!

[@fabiojonatas1560]

Topppppp d+, curti a vídeo aula, muito bem explicadinho. Parabéns irmão

[@rafaelsousa7659]

Caraca, que aula da hora. Eu ainda não tinha visto em lugar nenhum essa questão da acessibilidade.

[@moufiu]

Rapaz que aula em parabéns Bem explicativa me ajudou muito a entender as tags

[@victorsaad59]

Várias dúvidas esclarecidas em um só vídeo! Obrigado, Origamid

[@onlineglobaldigitalnetwork1058]

👍muito bom este vídeo. É o primeiro que eu vejo que ensina essas tecnicas

[@alexsandropereira7321]

Melhor conteúdo do mundo, não canso de me surpreender com as explicações do André, ele consegue fazer e explicar um menu mobile em menos de 10 linhas de códigos, sempre achei q eram muitas kkkk

[@caiozowyecamachocabral5413]

Conteúdo brazuca de altissimo nível! Parabéns

[@oaragao_investidorsolitario]

Sua explicação foi espetacular. Consegui resolver um problema que vinha tentando resolver há dias.👋👋👋👋👋

[@MaiconDouglasDEV]

obrigado mestre , adquiri seus cursos e nao me arrependo , didática otima! ótimo conteudo to utilizando seus videos pra me auxiliar no projeto do senai!

[@Macdest1]

Origamid te amo! kkkk fiz só umas pequenas mudanças aqui e ficou do jeito que eu queria. Muito Obrigado!

[@janeltonvunge9986]

Isso é um conteudo muito fantastico muitos parabens explica muito melhor que muitos professor da universidade

[@sr.belihovelli]

gostei o prof fala certinha os macete encina mt bem +1 inscrito

[@gleyciannemaria672]

Eu simplesmente adorei o vídeo, explicação muito fácil de se compreender.... Vlw e parabéns!!!

[@endriwbraga7583]

Oii, aula incrível, abriu meus horizontes em css, muito obrigado por essa aula 😆!

[@ViniciusAlves-qw3rb]

André sua didática é muito boa, agradeço pela vídeo aula. Se for possível faça também uma aula ensinando o carrossel animado de cards, semelhante aqueles usados em lojas virtuais.

[@junheras]

esse e de longe o melhor tutorial que ja vi

[@robertavitoria1165]

Caramba, que aula, meus amigos! Gostei muito, já me inscrevi pra aprender mais ainda com esses conteúdo show! Suceso

[@mbs2488]

S E N S A C I O N A L ! TUDO Muito bem explicado ! ! Parabéns pelos vídeos ! ! !

[@isabaelle1391994]

Simpl3smente o melhor curso do mercado

[@lebesgue-integral]

Manjo nd de front mas agora fiquei com vontade de aprender!

[@lorrainefreitas8570]

Comecei a aprender ontem, é viciante haha

[@Brenogss]

Dois cara!! Eu comecei a estudar lógica de programação há quase dois meses. E decidi que vou seguir front end, achei muito louco o vídeo.

[@bcos182]

Começando a assistir agora, mas ja deixei o like pq seus conteúdos são f#das!!! Obrigado por disponibilizar no youtube

[@RodolfooMS]

Melhor curso que eu comprei até hoje!

[@AGENTEBRABET]

Excelente vídeo !! Espero chegar um dia nesse nível...

[@alexsandropereira7321]

Já vou atualizar o menu do meu portifólio q estou montando rsrs, sem dúvidas esse é mil vezes melhor hahaha

[@TutoMaster]

que didática foda, sem enrolação e mt bem explicado!

[@TutoMaster]

Da gosto de assitir!

[@superbr1570]

Só tenho a agradecer, é muito bom praticar com a ajuda de seus vídeos, muito obrigado!!!!

[@vanderleme1]

Parabéns! Ótimas explicações sobre menu responsivo. Provando como pode ser simples a sua construção.

[@demervalleite5891]

Gostei muito da didática, conteúdo proveitoso sem dificuldades.

[@robertbruce114]

Nossa! Muito obrigado! finalmente aprendi como programar esse menu

[@TechTejota]

Muito obrigado. Conhecimento e didática de outro nível!

[@daviddasilvagomes459]

incrivel ! muito legal aprendiz de dev aki

[@JoelsonMedeiros]

Cara! Que aula top! Nem vi o tempo passar. Bom demais!

[@randerins]

Didática muito boa com os mínimos detalhes. Mais um inscrito!

[@zaaaaaaad]

Gratidão, moço. Explica de forma muuuuito clara. Tu é foda!

[@edsainf]

Excelente conteúdo, muito prático e objetivo. Parabéns por compartilhar!

[@pablohenriquedasilvacunha5981]

Cara, parabéns pelo conteúdo transmitido. Estou impressionado pela gama de conteúdos disponíveis no canal e no site.

[@lucassousa6435]

Didática Incrível, ótima aula!

[@atrativapropaganda8183]

Top, vc é fera... Mto obrigado pela aula..

[@mobties8370]

melhor aula de front que já vi

[@evandroezegram]

não tem uma aula da Origamid que eu não aprenda algo kkkk nessa foi mais sobre acessibilidade

[@umcaraqualquer2108]

Obrigado por me ajudar tô editando um vídeo pro meu canal programando esse menu eu dei os créditos a vc

[@dels2650]

melhor professor de todos, obrigado pela aula

[@carlosalbertozenatti1000]

Parabéns, melhor explicação sobre menu que assisti.

[@welitonpe]

Assa aula muito foi muito boa, sempre trazendo novidades

[@rcanallitech5703]

cara muito bom seus videos,parabéns mesmo,muito conhecimento para aprender com voce,ganhou um novo seguidor xD

[@tiagorodrigues4523]

muito massa!!! já estou aplicando em um projeto que tenho no github. só uma duvida, quando clicar em um ink do menu, como faz ra esconder?

[@fackzera]

Conseguiu?

[@cmservicossolucoes]

obrigado, por compartilhar seu conhecimento.✌

[@kakalele2]

Mestre. Vou comprar seu curso para. Tudo que procurei na web , ninguém tem a didática e a propriedade que você tem para passar conhecimento de Front-end. Já refiz esse seu tutorial umas 20x. Mas estou tendo uma dificuldade para colocar esse menu por cima de um carousel, e ele com transparência. Ja tentei com todas as formas possíveis, no passado eu fiz isso com bootstrap, mas lembro que não foi simples, já to quase desistindo, espero que no curso eu encontre a luz.

[@CimitarraNoDemiurgo]

faz um modal

[@Ramowwn]

O maluco é brabo. Parabéns.

[@ricardoalmendroruiz]

Top d+!!!! Sempre conteúdo de qualidade e direto ao ponto!!!!

[@emersonhenrique1789]

Isso é tão incrível, eu queria muuuuito ter inteligência para trabalhar como web design/programador web. Eu jamais conseguiria fazer algo assim :'(

[@luispaulocavalcante1459]

Show!!! Tomara que continue com esses tutoriais.

[@yureribeiro9475]

como abro um arquivo js no vs code? html é index.html css é Style.css e o js é como?

[@giljunior6608]

Gostei da explicação então vou te seguir!

[@danieldamasio4050]

Achei incrivel! tem como fechar o menu ao clicar em uma opção (link) ou fora do menu?

[@djota5238]

tem

[@Lucao477]

@Psilva obrigado mano, consegui resolver com uma linha de código kk salvou

[@viniciusmantovani8619]

@@Lucao477 como vc resolveu isso mano?

[@Everton-pd7ze]

@@Lucao477 Eu também quero saber como você conseguiu

[@MsAmizades]

ótimo video. Fiz aqui e funcionou bém. Obrigado!

[@Freg12345]

Boa tarde, eu utilizei apenas estes com onclick direto no nav-list funcionou também.... function toggleMenu() { const nav = document.querySelector('nav#nav'); nav.classList.toggle('active') }

[@SafirahConnect]

Valeeu, consegui aplicar na minha aplicação, obrigada!!

[@ruanalmeida2046]

Que aula fera, mano do céu 👏🏾👏🏾👏🏾👏🏾

[@planetanomad]

Parceiro não estou conseguindo tornar o menu do mobile um link responsivo. Alguma ideia de onde posso mexer!?