Criando um menu hambúrguer - @Curso em Vídeo HTML5 e CSS3

[@pepo8226]

Pra quem pegou o icon do google e não estava igual a do Guanabara, basta olhar no o que está escrito após "material", no caso do Guanabara estava "icon", por isso o class o dele era "material-icon"

[@alexandreisrael4262]

Cara você é Top demais. Melhor professor mano.. Poderia fazer uma série de 5 Módulo com Javascript também, mais detalhado como está fazendo com HTML e CSS. Seria Top Top demais.. Valeu

[@pedrosa21]

Up

[@fernandamaria449]

Ideia, excelente!

[@Explorador170]

Com ele o aprendizado é garantido. Afinal, não dá para pular etapas! E ele coloca elas organizadas.

[@mercesleonardo]

Lembrando que vocês podem fazer ao contrário também: function clickMenu() { if (itens.style.display === 'none') { itens.style.display = 'block'; } else { itens.style.display = 'none'; } }

[@Mrguaxinim]

Mas alterar estilo pelo javascript já não é algo legal cara, pra isso existe css

[@Nathan-ft3dc]

O menu desse exercício é feito para a interação do usuário, por isso usa-se o JavaScript e também é muito mais vantajoso do que fazer por CSS usando checkbox

[@gilbertobombinho5544]

Curso em vídeo é patrimônio cultural do Brasil!!

[@henriquemafortt]

Parabens Guanabara você não tem ideia de como mudou minha vida. eu não sabia nada e graças a você eu tenho muito conehcimento hoje. Aprendi todos os conceitos basicos comvocê e agora estou me aprofundando. Fiz seu curso de logica de programação e algoritimos depois java script e agora html e css. Vou focar em aprender os 3 muito bem e depois ir para php ou C# e aprender banco de dados

[@renatoorosco]

Como vai o progresso?

[@henriquemafortt]

@@renatoorosco opa beleza ? Sigo estudando. Sempre revejo conceitos de HTML e css. Hoje estou aprendendo react e trabalho em uma empresa de desenvolvimento, apesar de não ser programador eu estou aprendendo muito nela. Vi o básico de C# e banco de dados para eu entender bem como funciona o back end mais proplvavelme irei focar em front end mesmo.

[@renatoorosco]

@@henriquemafortt Beleza, Henrique. Parabéns pelo progresso :) Com o curso de JavaScript e Algorítimos do Guanabara já te deu uma boa base pra aprender React?

[@henriquemafortt]

@@renatoorosco Olha da uma boa base sim, porém seria uma ótima ideia voce pesquisar mais sobre javascript estudar mais funções, matrizes, arrow function e principalmente Orientação a objetos. o React tem um estilo muito semelhante que é a componentização dos objetos. To gostando bastante da biblioteca

[@renatoorosco]

@@henriquemafortt Valeu pelas dicas, Henrique :)

[@technologyfacts.]

Esse sistema de abrir e fechar menu da para ser feito no CSS mesmo. Vc envelopa menu em um e conecta ele em um input[Type="Checkbox"]. Com isso feito em HTML podemos passar para o CSS; Caso o input[checkbox] estiver checado ele abrira o menu. EX: HTML: /*itens*/ CSS: input[type="checkbox"]:checked ~ header menu { display: block; } TIPO ISSO!

[@luantoningalvan8512]

ótima menção!

[@Mrguaxinim]

Mas fazendo com css puro não tem tanta acessibilidade quanto fazendo com javascript

[@アラウーホムリーロ]

Sua didática é incrível. E como sempre, trazendo conteúdo fácil, rápido e eficiente!! Olhei em muitos lugares sobre como fazer esse menu, e alguns deles utilizaram frameworks ou alguma técnica muito avançada pra mim, que estou iniciante ainda no JavaScript. Inclusive, eu fiz o seu curso de javaScript e é muito bom. Recomendo a todos a darem uma olhada, vale muito a pena!!!

[@flaviocunha1349]

Hoje em dia o google usa a tag e não mais a tag . Só a titulo de curiosidade kk

[@keytoncunhabatista4009]

Observei isso também.

[@JoseCarlos-rm9nv]

acabei de notar isso

[@aninha22ist61]

Uma luta pra achar o novo site, eu tentei trocar por e dá certo, mas fiquei com o pq é o atualizado.

[@julinhodoceu]

Galera para quem está com o menu aparentando não estar "clicável", eu resolvi o problema aqui ajustando o "display: none" que estava na CSS do "menu > ul > li > a", coloquei "display: block"

[@laylasousa8344]

obrigado amigo me salvou nessa

[@augustobrito4569]

salvou!

[@pointdoscuriosos2810]

Outra observação, adicionar a tag , é uma boa prática, tanto para SEO, quanto para acessibilidade. A tag nav Deve englobar as tags ul, li, a, espero ter colaborado.

[@emanuelmarques1035]

Show! 🚀🚀🚀🚀

[@Mateus.95.]

Sensacional esse Icons e Material Design, fiquei um tempão vendo todos, show de bola!!!

[@anarktv8098]

Para quem ainda não viu Javascript e quiser implementar isso apenas com CSS, basta caracterizar este ícone dentro de um , e colocar dentro também um . No CSS, você vai configurar esse input com uma pseudo -class :CHECKED. Isso significa que quando a pessoa clicar neste label, ele executará o display block.

[@lucasxavier4333]

mas e quando clicar de novo, ele esconde?

[@anarktv8098]

@@lucasxavier4333 sim

[@apolo3145]

não deu

[@JuniorSantos-vf7zy]

pessoal, para quem estiver fazendo o curso no ano de 2023, na parte de javascript, em function clicMenu. deve se adicionar a seguinte tag: var itens = document.getElementById("itens"); seguido do restante do codigo, caso contrario nao vai funcionar. /* function clicMenu() { var itens = document.getElementById("itens"); if (itens.style.display == 'block') { itens.style.display = "none"; } else { itens.style.display = 'block'; } } */

Olá 🦗! Muito obrigado pela sua contribuição! É incrível ver os alunos se ajudando e compartilhando conhecimento. É assim que construímos uma comunidade de aprendizagem forte. 😄🚀 Aqui no Curso em Vídeo, acreditamos que o aprendizado é uma jornada contínua e adoramos quando nossos alunos assumem o volante. Continue assim e não se esqueça de praticar! 💻 E lembre-se, a cada desafio superado, você está um passo mais perto de se tornar um expert. Considere se tornar Estudonauta ou Aluno Apoiador em nosso site para ajudar no seu aprendizado. 🖖

[@joaovictorsantos5718]

Mesmo fazendo isso nao estou conseguindo, pode me ajudar?

[@JuniorSantos-vf7zy]

@@joaovictorsantos5718 olá joao, cara em ultimo caso eu copio todo o codigo e coloco no chatgpt, para verificação. as vezes é uma virgula um ponto ou uma letra que a gente esquece, espero ter judado.

[@ElevaTe.]

Fiz idêntico ao que o Guanabara fez no vídeo e funcionou pramim.

[@flavianafernandes8069]

Muito obrigada! O meu não estava funcionando, daí vim conferir os comentários. Agora deu super certo😊

[@novusordoindividualis]

Estou fazendo um site pra um sistema de rpg de mesa meu e dos meus amigos e sua aula veio até mim na hora exata! Já havia feito um menu desses meses atrás mas havia esquecido kkk Aula top!

[@cristovaocavalcante2958]

Muito bom professor! uma sugestão é que posteriormente lançar um curso de front-end mistirando HTML e CSS com JAVASCRIPT.

[@kllz_03]

gostei da ideia, se tivesse no studonauta eu assinava na hora

[@juniorsoprano2]

@@kllz_03 udemy tem vários top por 20 pila

[@TecnosHard]

incrível suas aulas, só não aprende quem não quer, muito boa a didática, estou aprendendo bastante.

[@lucienelima8]

Muito obrigada! Adorei a forma objetiva que você ensina.

[@renatoorosco]

Meu primeiro contato com JS...um grande marco pra mim :)

[@Crauzinh]

Parabéns, está no caminho certo!

[@Umgolbege]

@@Crauzinh hoje foi meu primeiro contato achei estranho mais interessante aparenta ser "facil"

[@alinetguimaraes]

Que didática maravilhosa! Muito obrigada!

[@jair-araujo]

Muito boa a aula como sempre Guanabara, um grande abraço!!!

[@edu_dev]

Estava esperando essa aula desde o inicio do curso! inclusive professor poderia nos explicar as novas propriedades do css has, where e is ?

[@glaskario4836]

eu também akakka

[@anarktv8098]

esse has vale a pena conhecer

[@emilly5897]

Deus te abençoe

[@vilhalva100]

Vou fazer o curso de JavaScript assim que terminar esse. É porque não tenho tempo agora: Preciso cuidar dos meus projetos em Python e o novo site que criei.

[@renatoorosco]

Se quiser e puder, gostaria de ver seu site :)

[@vilhalva100]

@@renatoorosco O nome do site é STYLER.

[@FabioJunio43]

otimo video!

[@maathmatics]

Sensacional meus amigos

[@paullinhafortes]

11/2024... o site google icons não existe mais, juntaram tudo no google fontes, na lateral esquerda contem fontes, ícones, entre outros, ai vc procura o ícone que precisa e clique encima, que aparece o codigo (igual como se faz com a fonte). Espero ter ajudado, levei um tempo para descobrir kkkk

[@Onsllaught]

vim la do curso javascript so pra da uma olhada. 😀 Terminando la virei pra esse.

[@periclesperesoficial]

Eu vim de lá, pois não estava conseguindo aprender, daqui, volto pra lá kkkkkk

[@lucasvilasboas7326]

Nao consegui fazer pelo site , acho que mudou ... mas fiz por uma aula dele laaa atras usando um CLASS e ai deu tudo certo !

[@aninha22ist61]

vc tem que entrar no google fonts, clicar em ícones e lá vai ter o menu, só copiar o código HTML e depois usar oq tem a tag e usar o código de JS lá no final do código.

[@liosvaldolima4260]

Fala Gustavo, mais uma aula top. Obrigado!

[@onlineglobaldigitalnetwork1058]

Oi Guanabara. Gostei muito desta aula. Agora só vou fazer assim

[@glaskario4836]

esperei tanto por esse vídeo

[@tawanmatos5276]

Aula muito maravilhosa.

[@adervarellus]

Guanabara faz um vídeo mostrando como se faz o sistema de pagamento / quero fazer minha loja virtual e ninguém ensina isso e eu to pra ficar louco💔💔💔🥲🥲

[@fabriciobrandao9188]

fez já?

[@cantodobrasil4047]

​@@fabriciobrandao9188ele ainda não fez nem o último módulo de HTML 😢😢

[@lsl4k598]

Geralmente e feito usando apis, tem algumas gratuitas.​@@fabriciobrandao9188

[@EmlioGen]

​@@fabriciobrandao9188 sumiu do KZbin

[@joaomatheusjoao9771]

Oi cara, geralmente para fazer sistema de pagamento se usa PHP então entendo um pouco acho que dá para fazer

[@douglasalves9121]

Top

[@toddynho_0139]

Excelente!

[@guilhermesantos3301]

Obrigado, Professor!

[@Familyhayzn]

tope, tope meu rabi

[@GleidysonBarbosa]

Like número Mil !!!

[@whoisducky]

Conteúdo top!! Daqui é Portugal

[@pointdoscuriosos2810]

Gente outra coisa bem interessante, para chamar algo no CSS que tem o id basta por #nomedoobjeto, sem a necessidade do "i" antes da #, atualmente o google usa span, se tu der um id para esse spam basta chamar # mais o nome que dá certo Exemplo: Body Sapan id="menu" CSS #menu{ }

[@periclesperesoficial]

Adorei isso kkk muito bom.

[@Mrguaxinim]

Da pra fazer assim .mobile-menu div { width: 32px; height: 2px; margin: 8px; background: white; }

[@FNETinhO13]

Fui ao site e os links mudaram um pouco, alguém sabe dizer se não é mais indicado fazer do modo ensinado na aula?

[@dan_barreira]

🥇🥇

[@henriquesilva6249]

Eu fiz essa parte adicionando uma página de HTML sem o menu e outra com o menu. Quando clica no ícone ele muda de página: 1ª página: ul{ list-style-type: none; background-color: rgb(126, 126, 126); color: white; padding-left: 0px; text-align: center; margin-top: 0px; display: none } li{ padding-top: 5px; padding-bottom: 5px; border-top: 2px solid rgb(255, 255, 255); } li#opcao1{ border-top: 0px } menu{ padding: 0px; } img{ width: 30px; height: 30px; } div{ width: 100%; background-color:rgb(62, 62, 62); text-align: center; align-items: center; padding: 3px } Opção 1 Opção 2 Opção 3 Opção 4 Opção 5 2ª página: Mostrar Senha ul{ list-style-type: none; background-color: rgb(126, 126, 126); color: white; padding-left: 0px; text-align: center; margin-top: 0px } li{ padding-top: 5px; padding-bottom: 5px; border-top: 2px solid white; } li#opcao1{ border-top: 0px } menu{ padding: 0px; margin: auto; } img{ width: 30px; height: 30px; } div{ width: 100%; background-color:rgb(62, 62, 62); text-align: center; align-items: center; margin-bottom: 0px; } Opção 1 Opção 2 Opção 3 Opção 4 Opção 5

[@lucasvilasboas7326]

Voce achou esse site que ele ta usando ? oque coloquei e ele me redirecionou para outro

[@danivieira8050]

Meu sonho vc montar um curso de administração Oracle! :(

[@Matheus-fi7sj]

esse vídeo tem no módulo 4 do html5 e css3 do site curso em video, né?

[@aninha22ist61]

sim!

[@neves_davy22]

Este site do Google mudou muito, poderia dar uma atualizada como busca este icone do menu

[@rnz4974]

O Curso de JS do curso em vídeo ta desatualizado?

[@thealyssonramon216]

Olá professor Gustavo tudo certo

[@allanrsf2327]

te amo

[@suelencabral2862]

Olá! tentando fazer hoje esse menu hamburguer, mas infelizmente não funciona. Alguem pode ajudar? eu li os comentários e tentei fazer com operador ternário e tudo mais, porem sem sucesso.

[@na_panfletos_e_cartoes]

Pensei em por um a:hover para que o menu desça devagar, onde eu colocaria esse comando na css referente ao idburguer??

[@alvinho1344]

const button = document.querySelector('button') button.addEventListener('click',function(){ const nav = document.querySelector('nav') nav.classList.toggle('active') }) vocês pode fazer assim também,usando o método toggle

[@benjamimmaciel2249]

😊

[@mayuyu4ever]

obrigadoooooooooooooooo

[@GarimpandoGeral]

Maravilha! Alguém sabe como inserir no JS suavização no rolar do menu, tipo um smooth?

[@wmo4web481]

Olá, tudo bem? Procurei o módulo 5 no curso HTML e não encontrei, alguém consegue me ajudar e informar ?

[@aninha22ist61]

O módulo 5 ele só está disponível pra quem é colaborador do site, está no estudo nauta!

[@sandwicheems]

3:12 quando a pessoa estuda na escola de inglês do Joel santana

[@isaiascaetano5888]

O text-align:center; no menu não funcionou no meu. Fiz de outro jeito. Position-relative; left 50%;

[@IuryNovarino]

Minha cabeça explodiu agora eu havia pensado em usar esse menu hamburguer através da tags x(

[@salazarkenway7139]

caralho c ta velho em to vendo seus videos de javascrpt e agora te vejo assim kkkkk

[@sandwicheems]

8:24 Curso de HTML/CSS: faz tanto tempo que nos conhecemos, talvez poderíamos nos casar. JavaScript: você não gostaria de tomar uma xícara de café? 👀

[@luiznogueira7311]

Só o meu menu hambuguer não deu certo? ao clicar no menu, não aparece as opções, como proceder?

[@juansousa4985]

o meu também não, você conseguiu concertar?

[@suelencabral2862]

Eu tb n consegui =( lendo os comentários e ajustando, mas ate agora nada.

[@monteiro1420]

Quero saber como crio uma página dentro do hambúrguer nas funções daquelas opções

[@WendyMelissaMikkelsen]

Cria outro documento html, e invés da hashtag nos links das opções vc linka essa nova página html

[@Detudi1pouco]

meu menu deu errado troquei o link por outro que eu achei parecido e ficou tudo igual ao exemplo do Professor

[@franciscohydglan5159]

Rapaz, quando vou tentar seguir a URL pra abrir o site, acabo indo somente pra página do github onde tá hospedado o exercício, alguém sabe me explicar o que houve? Posso ter deixado passar alguma coisa na parte do Git e Github :(

[@henriquetavares8059]

você chegou a ativar o github pages no repositório do seu projeto?

[@MarcosFelipe-up9lc]

Fiz o meu JS assim sem onclick: const clickMenu = document.querySelector('#burger').addEventListener('click', () => { let itens = document.querySelector('#itens'); if (itens.style.display == 'block') { itens.style.display = 'none'; } else { itens.style.display = 'block' } })

[@joseph6181]

recado da Record

[@estevam1223]

alguém sabe como posso abrir o menu de uma forma mais suave com o transition?

[@danilogoncalves2155]

Eu fiz assim para colocar a transição... javascript: function clickMenu() { if (itens.style.display == 'block') { itens.style.opacity = '0' setTimeout(() => { itens.style.display = 'none' }, 2000) } else { itens.style.display = 'block' setTimeout(() => { itens.style.opacity = '1' }, 500) } } CSS menu { display: none; opacity: 0; transition: 2s; }

[@danilogoncalves2155]

Mas trabalhar com JQuery, que é uma biblioteca do JavaScript, acho que seria melhor.

[@wagnerpedroo]

13:19

[@hiury8902]

Eu já tenho um conhecimento prévio de JS (bem básico), e ocorreu algo no exercício que me deixou em dúvida; Escrevi a função para ocultar e exibir o menu, entretanto, quando a página é atualizada, por algum motivo a primeira vez a exibir o menu, é preciso clicar 2 vezes, logo em seguida, com apenas um click a ocultação ou exibição do menu ocorre normalmente. Escrevi a função de várias formas, da forma ensinada no vídeo, e de outras, inclusive com operador ternário, e esse comportamento continua a ocorrer. Alguém faz ideia do motivo disso acontecer?

[@arthurarruda6655]

Olá, Hiury! Tive um problema parecido. Ao invés de fazer a primeira checagem para ver se o display do nav está none, checa primeiro se ele está block. Assim: function mostrarMenu(){ if(itens.style.display == 'block'){ itens.style.display = 'none'; } else{ itens.style.display = 'block' } }

[@arthurarruda6655]

Agora um problema que tive, e não consegui mudar de jeito algum, foi quando o menu está estreito, quando clico no "burguer", ele abre a lista suspensa, quando clico novamente, ele fecha. Até ai, tudo bem, mas quando aumento a largura da tela, mesmo colocando no media query que a partir de tantos pixels o display do nav volta a ser block, é como se o JavaScript estivesse sobrescrevendo essa propriedade. É como se quando o javascript fizesse o display:none, fosse impossível "desfazer" com o CSS.

[@hiury8902]

@@arthurarruda6655 tenta colocar o display block com o próprio JS

[@arthurarruda6655]

@@hiury8902 vei, desde ontem tô quebrando a cabeça com isso, mas no vídeo seguinte ele explica como resolver esse problema 😅

[@gcbicca]

E se eu coloquei o meu container pai como display: flex. Como fica no JS? . Rrsrsrs!

[@Pedro-augusto]

qual git é esse que ele ta usando??

[@periclesperesoficial]

github desktop

[@DCMapas]

Salveee

[@gab5573]

meu vscode não tá rodando JS alguém me ajudaaaaaa

[@eduardoportela9437]

up

[@eduardoemydio7628]

Man mas vc n fez alista vc já começou com ela promta

[@MateusPaulino-w9y]

deixa só eu fala um negócio eu nao sei javascript mais e isso ai foi aquilone´ eu estacionei meu carro la em casa so que eu nao tenho carro tchau brigado kkkk

[@ThiagoSilva-jq6sv]

Quando eu abro com o github pages no modo retrato, o site fica quebrado. Mais alguem com esse mesmo problema ?

[@Yuri-Vargas]

Cara, eu tentei fazer antes de ver o vídeo... Oq eu quebrei a cabeça pra tentar fazer esse fdp de menu só com CSS n tá escrito vei... Frustado pra carai vim ver como q funciona e descubro q precisa de JS... mdsssss

[@Franceskini81]

Ok que é grátis, mas este curso de HTML e CSS, está longo pa crlh, já tem uns 2 anos.

[@RayalissonPastor]

O Guanabara estava enfrentando alguns problemas e não pode postar os vídeos e tal, foi o que percebi, retomou agora postando 03 videos por semana, mas acho que como já tem 02 anos que foi feito e atrasou, ele poderia postar logo tudo. kk

[@henriquemafortt]

Meu amigo por mim poderia continuar por mais 2 anos esse curso que eu ia assistir sem reclamar. Tudo detalhado ensinado com carinho.

[@MarcosFelipe-up9lc]

@@RayalissonPastor Os caras faz de propósito, tudo enrolação. É programador mas também é criador e vendedor de conteúdo, existirão varias promessas...

[@gersonhenrique7875]

Infelizmente esse código não está funcionando. Já tentei várias vezes mas sem sucesso function clickMenu(){ if (itens.style.display == 'block') { itens.style.display = 'nome' } else { itens.style.display = 'block' } }

[@lucasgoncalves4151]

o meu também estava dando errado ai eu peguei o link do icon do mesmo do video , e tb coloquei com ta tag e deu certo

[@berkudo_ofc]

é 'none' e não 'nome'

[@thiagogomes977]

ou itens.style.display == 'block' ? itens.style.display = 'none' : itens.style.display = 'block';

[@Mrguaxinim]

Setar style de itens em um código js não é o mais apropriado

[@thiagogomes977]

@@Mrguaxinim cara, eu fiz a mesma coisa que o guanabara, eu só usei operador ternário pra ficar um código mais limpo