Como criar um Menu Animado Usando CSS, HTML e JavaScript

seja muito bem-vindo ou bem-vinda a mais um vídeo do canal e no vídeo de hoje a gente vai fazer esse super menu animado aqui utilizando HTML CSS JavaScript a gente vai aprender sobre animações no CSS vai aprender muito sobre JavaScript e além de tudo isso a gente vai publicar esse site eu vou te ensinar como você coloca esse site na internet e aí ó no vídeo eu vou te ensinar também como você ganha dinheiro com sites como esse eu sou Rodolfo mor seja muito bem-vindo bem-vinda a mais um vídeo do canal Bora lá então galera

vamos fazer esse menu aqui com HTML CSS JavaScript só um detalhe se você quiser conteúdos avançados de programação a gente tem o canal Dev CL pro então o canal Dev Club pro O link tá aqui embaixo lá a gente fala de programação ó no nível bem avançado aproveita que você vai se inscrever no Dev Club pro já deixa seu like aqui também e se inscreva nesse canal aqui para você aprender programação do zero combinado então vamos lá eu vou abrir meu vs code aqui você abra o seu aí aqui no canal tem vídeo de vs

code do zero também para você instalar vou criar uma pasta aqui na minha área de trabalho chamado menu e vou abrir essa pasta no vs code alguns detalhes importantes primeiro a gente vai colocar essa aplicação no ar até o final do vídeo então fica comigo porque eu vou te ensinar como publicar essa aplicação outro detalhe A gente vai utilizar HTML CSS JavaScript se você não conhece as tecnologias Tá Começando aqui no canal tem curso dessas tecnologias saindo do completo zero link aqui no card na descrição aqui no canal tem tudo para vocês né Vocês estão

vendo como vocês são muito bem tratados aqui né Vamos criar três arquivos aqui a gente vai criar um arquivo que vai ser o nosso HTML vai ser o index P HTML eu vou criar nosso arquivo CSS e o JavaScript também então scripts.js e o styles.css beleza vamos começar pelo HTML lá no nosso curso de html eu ensino do zero o que que é cada tag mas aqui pra gente acelerar Eu vou digitar HTML e depois a gente escolhe essa opção HTML 2.5 Tá certo ele vai montar uma estrutura padrão uma página HTML eu só vou

trocar a língua aqui para PTBR Ok e aqui eu vou chamar de Dev Club e vai ser a página do Dev Club aqui e ali vai ser o menu do Dev Club Combinado então vamos botar a mão na massa e vamos começar a criar a estrutura então eu vou criar toda essa estrutura HTML e depois a gente começa a estilizar com o CSS a gente vai criar as animações também e muito importante fazer tudo isso funcionar com o JavaScript primeira coisa que a gente vai fazer agora é colocar esses ícones aqui ó para isso a

gente vai utilizar um cara chamado cdnjs nesse cdnjs a gente consegue utilizar várias bibliotecas JavaScript somente puxando um link ali dentro do nosso código a gente vai ver isso na prática a biblioteca que eu quero essa aqui chamada fonte aner o Font Cher é uma forma da gente colocar ícones na nossa aplicação por exemplo eu quero esse ícone aqui isso é esse ícone eu vou pesquisar aqui tem que ser em inglês é vou pesquisar por Bars que seriam Barras Ah então eu já vi que é esse aqui ó Bars Ah esse cara aqui porém eu

não posso simplesmente pegar e copiar esse cara aqui ó V quer ver ó vou copiar vou criar aqui um botão botão Eita e dentro do botão eu vou colocar o ícone ali um exemplo se eu só fizer isso e tentar rodar não vai funcionar mas primeiro vamos rodar que eu quero te mostrar vai aqui no nesses quatro quadradinhos pra gente rodar nosso site extensões E aí você vai pesquisar por essa extensão aqui ó chamada Live server instalou o Live server fica muito fácil a gente rodar nosso site aqui no seu computador tá a gente no

final da aula a gente vai aprender como você coloca seu site no ar mas por enquanto vamos focar em apenas rodar no nosso computador depois que o Live server esver instalado posso fechar aqui clico com o botão direito do mouse aqui no index HTML e Open wif server que é a primeira opção E aí ele vai abrir ele abriu ali na outra tela mas ele vai abrir aqui perceba que não aconteceu nada tá vendo não tem ícone nenhum ficou um botão vazio porque só eu colocar o ícone não vai dar certo eu preciso instalar a

biblioteca no meu código mas para facilitar isso o cdnjs Ele conta com várias bibliotecas que eu só coloco um link e aí ela funciona no nosso site eu vou clicar aqui em libraries tá vendo aqui ó libraries e aí eu vou pesquisar pelo fonte em ure ó fonte ure Beleza eu vou pegar o primeiro link aqui a gente vai pegar essa opção ó copy link tag ó clica aqui ó em copy link tag porque ele já deixa bonitinho para nós é só ir aqui no R colar em qualquer lugar do r mesmo tá E aí

esse link aqui ó toda essa linguiça vai ser responsável por a gente conseguir puxar os ícones que a gente quer eu vou salvar aqui e agora você vai ver que milagrosamente vai aparecer o ícone que a gente quer ó Olha uma salva de likes aqui pro Canal ah inclusive comenta aqui embaixo o que que você quer ver aqui no canal inclusive alguns Alguns inscritos aqui do canal Já me deram ideias sensacionais que estão chegando vídeos no canal da ideia das ideias que vocês deram então talvez a sua ideia esteja chegando aqui no canal se você

não deu a sua ideia o que você quer aprender as tecnologias que você quer aprender coloca aqui embaixo porque os próximos vídeos podem ser para você cara olha só que Que honra Ah vamos continuar beleza criei meu botão eu já vou deixar uma classe criada nessas crianças porque a gente vai utilizar classe para tudo esse cara aqui eu vou chamar ele de tuggle tuggle seria um um botão que que troca ali eu vou usar as classes em inglês vou usar em português mas eu vou chamar esse aqui de Botão menu tá vamos fazer em português

que fica mais fácil para todo mundo ok Aí depois desse botão eu vou ter aquele menu lateral ali eu vou chamar esse menu de nave Por que nave nave é uma tag para menus de navegação ela é uma div é uma caixa só que quando a gente usa a tag nave Quem bateu o olho no nosso código vai saber que é o menu de navegação quando o nosso site foi indexado também pelos meios de busca como Google eles vão saber que ali no site tem um menu de navegação tá eu já vou deixar uma classe

aqui chamado de vou chamar de menu eh lateral Ok o famoso sidebar mas vamos usar tudo em português e aí eu vou criar umas o Ls e Lis que que é o l o l é uma lista e li é os itens da lista então cada item da lista vai ter ali o seu ícone Então vamos pegar lá os ícones então eu vou ter um ícone de informação um ícone de home um engrenagem uma cartinha Então vamos ver casa é home Então vou pegar esse cara aqui ó o house fa Solid F House vou colar

aqui dentro da primeira li a segunda Li é a de informações Vamos pesquisar aqui ó info é esse cara aqui esse cara eu acho que é esse aqui ó fa Circle info ou tem esse aqui também Fast Circle info ã pode ser esse aqui mesmo esse aqui beleza fa regular fa se não ficar boa a gente pega outro ali o próximo éa engrenagem essa engrenagem eu não tenho a mínima ideia como que ela se chama deixa eu tentar com CS Ah é isso aqui mesmo cogs engrenagens eu acho que essa aqui ó Gears F Gears

bem que eu acho que eu tinha pegado um que chamava fogs ã t t tã Deixa eu ver se eu encontro aqui ó fa cogs pesquisando assim então vai aquele mesmo tá eu não lembro exatamente qual que eu peguei então vai esse aqui mesmo fao e aí por último a gente vai ter o e-mail ali Então vou colocar aqui e-mail o mail Tã vou pegar esse F envelope aqui ó pronto Beleza já criamos aqui já pegamos todos eu já vou até fechar o Font Cher deixa ele aberto vai que a gente tem que trocar algum

ícone Mas a gente pode ver que já tá aqui os ícones estão meio feios ainda ã teve alguns que não carregaram deixa eu substituir Então os que não carregaram eu deixei aqui uma colinha do nome dos que eu queria então eu eu vou pegar eu vou ter que apelar para a minha colinha ãã esse aqui vai ser esse e o outro que deu o problema foi o último né deixa eu pegar aqui por que que aqueles lá não foram alguns Alguns ícones eles são pagos alguns ícones estão na CDN outros não tão Então tem que

ir testando eu já tinha separado alguns que funcionou então agora todos funcionaram então o último ficou como faz fa envelope o penúltimo faz Solid F Gears esse aqui ó faz fa info Circle e fa Solid fa House cominado Ufa temos tudo que precisávamos aqui e já tá pronto o nosso menu de navegação agora eu vou criar uma div que eu vou ela vai ficar vazia Tá certo que vai ser depois vocês vão entender que que essa div vai fazer mas por enquanto deixa ela vazia sei lá vou chamar ela de background E aí por fim

eu vou ter uma última div Na verdade eu vou até colocar uma tag Main porque vai ser este a parte principal aqui ó tá vendo ó conteúdo principal Ok então vou ter uma tag M dentro dela eu vou ter o vou chamar aqui ó Dev Club formação de devs tá colocando qualquer coisa aqui vou colocar aqui um parágrafo também escrever Loren Ó você escreve Loren e Dá um enter ele vai colocar um texto aleatório eu vou salvar aqui e aí ó o nosso já tá assim não o nosso tá assim ainda tá tudo muito feio

tudo estragado mas é normal só com HTML as coisas não andam Deixa eu só colocar uma classe aqui chamar de conteúdo e acabou acabou acabou agora a gente vai pro CSS para deixar tudo bonito mas não vai funcionar ainda primeiro a gente vai aqui trabalhar com CSS e depois a gente vai lá pro JavaScript para botar tudo para funcionar mas já vamos pro CSS só antes de gente ir pro nosso arquivo CSS eu tenho que linkar o meu CSS com a minha aplicação aí eu vou novamente aqui no R E aí eu tenho que linkar

Então vou vou colocar esse cara aqui ó o link link CSS ele já completou para mim só Garanta que este arquivo tem o mesmo nome desse aqui ó Então o meu é Styles aqui é Styles também se você errar o nome ele não vai puxar o o seu CSS e vai dar pau tá certo então agora que tá tudo alinhado vamos começar nosso CSS para começar eu separei aqui algumas cores Tá certo então a gente tá criando variáveis colocando uma cor dentro então quando eu quiser puxar essa cor é só chamar este valor a gente

vai ver isso na prática tá vou deixar esse pequeno documento aqui embaixo para você copiar Ou senão só vai copiando aqui como você preferir no nosso Body eu vou tirar a margem eu vou tirar o pading eu vou escolher uma fonte aqui também ã pode ser essa aqui ó eu gosto dessa fonte aqui ó sey ou você pode escolher a fonte que você quiser e vou colocar um background color E aí eu já vou usar uma das variáveis para usar variáveis aqui no CSS eu escrevo var e coloco aqui ó já até completou para mim

o valor eu vou escolher essa text color para o o background aqui do nosso Body depois a gente vai continuar a gente vai estilizar esse cara aqui ó menu lateral Ah olha só eu acabei de fazer uma cagadinha esse aqui que eu tinha copiado eu coloquei um link tá vendo e os outros não então vamos vamos acertar isso aqui vai ser li dentro da li vai ter um link então colocar só R tag aqui não vai levar para lugar nenhum aí vai ter o izinho Deixa eu formatar aqui ah ele não fez o que eu

queria eu queria que ele fizesse isso aqui ó eu quero que ele faça isso aqui para você conseguir enxergar bonitinho que tá acontecendo tá vendo Deixa eu ver se eu formatar agora ele vai formatar não vai formatar mas esse é o ponto Vou colocar aqui ó bonitinho mas para você conseguir enxergar eu sou uma pessoa muito visual tá galera Então eu preciso enxergar o que tá acontecendo de uma forma bem separadinha para eu poder funcionar aqui também e assim galera eu não sei vocês mas quando Comecei na programação eu tive algumas dificuldades de aprender e

tal e então eu quero facilitar o máximo para você eu quero que seu aprendizado de programação seja leve Inclusive eu queria saber se vocês estão gostando do dos vídeos Eu gosto muito de de ver os comentários ler os comentários não é ninguém da minha equipe que responde os comentários do YouTube tá sou eu próprio que respondo que leio então eu gosto muito quando vocês vão lá comentam eu interajo com vocês eu tiro um ou dois dias da semana ali para responder todos os comentários então se não responde o seu ainda vou responder então por favor

não sai desse vídeo sem comentar aqui embaixo Beleza então Ó coloquei todos aqui tá eh eu esqueci de escrever também olha só na pressa eu esqueci de escrever então contato serviços sobre página inicial então isso aqui ó serviços sobre esse aqui ó escrever home menorzinho escrever página inicial Beleza agora ficou certinho bonitinho esse aqui é nosso menu lateral ó aul li dentro de cada Li a tem o link dentro do link tem o nomezinho E tem também o nosso ícone tá bom dentro do link tem o ícone e o nome salvei aqui agora vamos lá

utilizar esse deixa eu colar aqui ó menu lateral nosso menu lateral eu vou posicionar ele de forma fixa eu vou fixar ele numa certa posição ali na minha tela Além disso eu vou fixar ele não em qualquer lugar eu vou fixar ele em men 300 pixels Ou seja eu vou fazer ele desaparecer da tela ó se eu salvar aqui você vai ver que ele vai desaparecer por qu eu joguei ele aqui para dentro então ele tá fora só que quando eu clicar nesse botão ele vai entrar pra tela de volta mas esse aqui é o

estado Inicial dele e daqui a pouco com JavaScript a gente vai fazer ele pro lugar que a gente quer eu vou dar um left menos 300 e o top zero então ele vai ficar certinho lá no topo o it dele vai ser 300 pixels por isso que eu vou entrar menos 300 para ele não aparecer se ele tivesse 400 pixels ó vou salvar aí ele apareceria um pouquinho aqui não apareceu porque eu não coloquei background não coloquei nada não vai aparecer mas ele apareceria beleza vou colocar um height dele de 100% para ele ocupar Todo

o espaço de height vou colocar um background color nele vou utilizar esse background color aqui combinado por enquanto é isso deixa eu ver que que falta mais vou colocar uns index nele também para garantir que ele vai ficar na frente de todo mundo e vou colocar um box Shadow para ficar uma sombrinha Ah esse Esses códigos mais chatos eu deixo eles anotados aqui porque eu não vou gravar isso aqui 0 0 20 então eu deixo uma colinha desses códigos mais mirabolantes beleza aí eu vou pegar esse menu lateral só que agora eu vou estilizar ele

vou estilizar a minha o l tá por qu dentro do meu menu lateral que é um nave eu tenho o l tenho o li tenho o link tem o Icone então eu vou estilizando um por um de forma separada então aqui a minl não tem muito o que fazer não Eu só vou colocar um list Style list Style Type como nome que esse list Style Type sabe quando você cria uma lista e fica uns pontinhos do lado eu não quero aqueles pontinhos do lado né vou zerar o pading da lista e o margem eu vou

dar uma margem em cima de 60 pixels e o resto deixa tudo Zerado tá só quero margem em cima ou eu poderia fazer tudo Zerado mesmo fazer isso aqui ó margem top 60 pixels combinado E aí o nosso menu lateral também ele vai ter duas fases a ativa e a inativa tá lá dentro do JavaScript a gente vai adicionar uma classe nele que vai ser a classe ah ativa menu ativo quando ele tiver ativo eu já tava até esquecendo o left dele vai ser zero então ele normal é - 300 quando ele tiver ativo vai

ser zero a gente faz dessa forma aqui quando ele tiver a classe menu lateral e a classe ativo ele vai para zero a gente vai fazer isso eh automaticamente com o JavaScript mas é como se a gente tivesse colocando a classe ativo aqui dentro e quando eu colocar a classe ativa aqui dentro ele vai aparecer aqui para nós tá bom como a gente tá estilizando esse cara deixa ele assim ativo que daqui a pouco a gente vai a gente conserta tudo na continuação eu vou pegar meu menu lateral só que agora eu vou entrar na

l e estilizar as Lis tá então eu tô andando ó estilize aqui aqui agora aqui depois o azinho e depois o izinho tá vamos utilizar um por um aqui no na nossa li eu vou colocar um pading nela de 15 pixels em cima e embaixo e dos lados 30 pixels tá na vídeo passado do canal expliquei melhor sobre esses atalhos mas é basicamente isto aqui continuando é só isso aqui mesmo só que continuando eu quero estilizar agora o link o link eu já vou tirar o text decoration colocar o text decoration n text decoration é

este aquela linhazinha que ficava aqui embaixo sabe que fica então eu não quero aquela linhazinha que fica em em links o Color dele eu vou colocar o var text color Beleza já vou mexer aqui no Font size dele também vou colocar 18 pixels vou colocar um display Flex nesses cara e o align items vou colocar como Center para ficar alinhadinho os dois ícones combinado A gente pode colocar também um GAP entre os ícones para eles não ficarem tão grudados 10 pixels aí ó já dá dá um distanciamento legal aqui entre os ícones combinado Beleza agora

vamos navegar menu lateral o l l i a e agora a gente vai chegar no i lá no nosso I eu já dei um GAP não preciso dar uma margem o fonte size vou colocar de 24 pixels que ele tá muito pequenininho e acho que é só isso olha só Ah tá ficando legal só que tá meio sem graça ó eu quero colocar um Hover aqui quando eu passar o mouse é mudar a cor disso aqui Então vamos lá menu lateral o l Li e vou dar um Hover na li então toda vez que eu

passar o mouse eu vou trocar o background desse cara eu vou colocar esse primary color aqui ó primary ou secondary vamos tentar o secondary acho que fica mais legal ah já tá bem legal cara tá bem legal depois eu vou colocar um transition nessa galera para dar uma suavizada nesses efeitos mas por enquanto deixa assim que tá de bom tamanho ok ok ok a gente também Pode colocar um um Hover nesses carinhas aqui ó então eu vou colocar aqui ó [Música] menu lateral aul pega Li pega o a pega o i e eu vou dar

um Hover no izinho por qu quando o eu passar o mouse em cima eu quero que meu ícone ele vai dar uma por assim dizer uma torcidinha para isso eu vou usar o Transform eu vou usar um translate no eixo X E aí eu vou fazer o seguinte ele vai dar uma rot tá ele vai dar uma vai andar 5 pixels no eixo X e ele vai rotacionar também 5° vamos ver que que vai acontecer ó quando eu colocar o mouse ó tá vendo ó ele tá ele tá tombando 5º tombando 5° e ao mesmo

tempo ele tá andando 5 pixels tá vendo ó Ele dá uma tombadinha ó tá vendo só um charme mesmo para quando a gente passar o mouse em cima ali desse cara combinado agora eu vou esconder meu meu tá ele já tá tudo certo então a gente vai tirar a classe ativo daqui e daqui a pouco a gente vai colocar ela automaticamente com JavaScript mas por enquanto ainda falta algumas estilizações V terminaras estilizações aí a gente faz o JavaScript E aí depois a gente faz as animações E aí depois a gente publica a nossa aplicação para

continuar agora é a vez do nosso botão deixa eu pegar a classe do botão a gente já vai mexer nesse background ã cadê cadê cadê o botão tá aqui em cima ó é o botão menu combinado vamos lá utilizar o o nosso botão o nosso botão só para vocês terem em mente é esse cara aqui ó tá vendo É este botão aqui então vamos lá já vou colocar aqui um background color nele eu vou usar o primary Color pro background beleza aí a gente vai fixar esse botão no lugar que eu quero Então vou usar

o position fixed eu vou dar um left 20 pixels e um top 20 pixels também beleza eu quero que esse cara fique na frente de todo mundo vou dar uns index 99 Ah sobre os index cara tem muita gente que fala ai é complicado ficar usando os index louco maluco segue a sequência mas às vezes seguindo a sequência vou seguir a sequência vai aqui eu vou colocar dois e aqui eu vou colocar três por o z index é a posição que o elemento vai ficar Às vezes a gente começa a colocar uns 99 daqui a

pouco tem que colocar um que é 999 daqui a pouco quando você ver se se perde tá então às vezes é bom focar aqui nos index ó colocar números pequenininhos pra gente não se perder tanto então a em cima eu tinha colocado 99 vou colocar dois no menu lateral e aqui eu coloquei três aí a gente fica mais organizado esse cara eu vou colocar um border radius bem pequenininho de un 5 pixels vou colocar um fonte size nele também de 24 pixels não quero border no botão Então vou dar um border non ã que mais

que eu preciso vou colocar um pading nele também 10 pixels por 15 pixels 10 pixels em cima e embaixo 15 pixels na direita e na esquerda Combinado então deixa eu atualizar e tá aqui o meu botão vou colocar um cursor enter também tá aqui o meu botão combinado combinado combinado combinado Ah vamos trocar color que faltou também ali então color colocar aqui o var text color Ok beleza beleza Calma calma a gente vai arrumar tudo arrumar tudo um de cada vez aqui também eu vou colocar um Hover nesse cara então eu vou colocar ponto botão

menu Hover só vou trocar o background dele ali tá o primary eu vou colocar um secondary ok aham é isso aqui mesmo daqui a pouco a gente vai botar tá ele para funcionar aí a gente também pode fazer o seguinte quando esse botão tiver a classe ativo vou fazer o seguinte a gente vai colocar a classe ativo nesse cara né no botão a gente vai fazer a mesma coisa quando eu botar a classe ativo nesse botão eu quero que ele desapareça Então vou dar um left 320 pixels tá bom desapareça não desculpa que ele se

movimente mais pra direita porque ele tá aqui né Ó o padrão dele é aqui quando eu clicar ó que ele tiver ativo ele vai vir para cá tá vendo entendeu então eu já vou deixar aqui ó por enquanto eu não vou colocar essa classe ativo nele a gente vai colocar com o JavaScript combinado ã agora tem o nosso conteúdo também então a gente já estilizou o botão menu lateral o nosso conteúdo agora nosso conteúdo tá deslocado não tá no lugar que ele deveria estar eu já vou dar um margem left nesse conteúdo Então por padrão

ele já vai ter um margem left de 80 pixels por a gente vai colocar ele pro lado também mas daqui a pouco vou dar um pading bem grande 48 pixels nele 48 é muita coisa eu acho deixa eu ver os 40 acho que vai ficar bom 40 acho que já tá bom beleza Ah vou colocar também um color colocar esse secondary color aqui beleza e para esse cara é só isso E aí quando a gente tiver a classe ativa que é quando clicar no botão ativo classe ativo a gente vai mudar algumas coisas nesse cara

quando a classe ativo tiver eu tenho que deslocar ele então vou dar um margem left de uns 320 piels E aí que que vai acontecer quando eu clicar no botão ele tem que deslocar também ó esse cara tem que deslocar entendeu que é o que o nosso vai fazer por enquanto ele não tá fazendo porque a gente ainda não ativou a classe mas daqui a pouco a gente vai ativar essa Classe A gente vai colocar essa classe ativo e para terminar a gente precisa fazer esse efeito aqui ó tá vendo que tudo fica escuro tudo

ente ficou escuro Ó ficou escuro quando eu clico aqui tudo volta ao normal que que a gente vai fazer eu vou bloquear eu vou bloquear esta parte da tela a hora que o menu tiver aberto e aí quando eu clico aqui eu desbloqueio tá como que eu vou fazer isso eu criei uma div aleatória aqui chamada background e agora a gente vai manipular essa div aqui colocar ponto background e a gente vai fazer algumas configurações dela eu vou colocar aqui o position dela vai ser fixada fixed top zero Vou colocar aqui também um left zero

Tá bom então por padrão ela vai ficar ocupando Todo o espaço que tem disponível para ela para isso eu já dou um widget de 100% e também um height de 100% para ela ocupar Todo o espaço ela vai ter um background color ã deixa eu pegar aqui por é um preto só que é um preto com uma opacidade de 0,5 Ó cadê Calma que a gente vai botar ele na tela então coloquei aqui um background color preto com opacidade zer 05 então é um preto mas ele vai ficar meio transparente por causa da opacidade por

padrão esse cara ele vai começar como opacity zero tá o passe de zero ele não vai aparecer ele só vai aparecer quando a gente tiver com ele aberto Ou seja quando ele tiver a classe ativo ó quando eu clicar no botão Todo mundo vai ter a classe ativo e aí ele vai aparecer ó esse fundo aqui é esse background que a gente tá criando Tá certo então ele começa com o passo de zero e aí quando ele se torna classe ativo a gente muda ele por padrão também eu vou colocar o bilet dele hiden para

ele desaparecer e os index dele tem que ser maior que o dos outros então o dos outros tá 2 e TR esse aqui vai ser o z index 4 cadê não tá aqui quando ele tiver a classe ativo aí sim eu vou dar um opac de um que aí ele não fica mais transparente e o visibility dele como visible tá bom só para você ver ele funcionando eu vou colocar manualmente aqui ó a classe ativo nesse background Vou salvar e aí você vai ver aqui ó ele tá aqui ó tá vendo ele tá aqui na

posição que ele tem que ficar mas entretanto todavia entretanto todavia para nós isso não importa agora porque a gente vai colocar isso com o JavaScript Então vou tirar essa classe ativo e de CSS a gente quase acabou porque ainda não fizemos as animações mas não tem por a gente criar as animações ainda porque a gente não tem nada de JavaScript Então vamos deixar paradinho o HTML agora e vamos codar o nosso JavaScript Bora lá pra gente começar o JavaScript a gente precisa de um detalhe aqui ó no final do meu Body eu vou colocar uma

tag script Tá certo dentro da primeira tag script que é de abertura eu preciso colocar qual que vai ser meu arquivo JavaScript tá bom beleza tá aqui nosso arquivo vamos começar a codar um detalhe antes tava falando de ganhar dinheiro com programação e tem uma galera que tá começando agora na programação e quer botar um dinheiro no bolso eu sei que maioria de vocês o objetivo é conseguir um emprego mas enquanto você não consegue emprego que tal ganhar dinheiro com programação para isso a gente criou uma formação chamada R 1.000 em 7 dias com programação

cara e essa formação Ela é bem baratinha mesmo tá certo e além de ser muito baratinho eu vou dar 50% de desconto só para quem acessado do link desse vídeo aqui vou deixar o link aqui embaixo e só para você ter uma ideia como funciona olha só aqui na nossa comunidade exclusiva do Dev Club alguns alunos meus do Dev Club que inclusive tá para abrir inscrições ão tá chegando a data tá chegando última turma de 2024 e alguns alunos meus que tiveram um resultado sensacional por exemplo teve um o Bruno Bruno caramelo Olha o resultado

que ele teve com essa formação R 1000 em 7 dias Cadê ele fez uma postagem aqui ó R 1.000 em 7 dias Boa tarde fiz um curso de r$ 1.000 7 dias porém eu não consegui 1000 consegui r$ 8000 e todos os trabalhos que peguei foram páginas simples usando HTML e CSS Então dentro dessa formação r$ 7 dias a gente vai aprender programação você vai aprender a programar a gente vai fazer projetos aqui dentro dentro vai aprender HTML CSS JavaScript vai aprender a como colocar essa aplicação no ar e como você vender essa aplicação e

como ganhar dinheiro com essa aplicação então 50% de desconto nessa formação e ainda você ganha exclusividade para entrar nas minhas outras formações o link vai ficar aqui embaixo recado dado agora vamos voltar para o nosso vídeo vou fechar o fonte Cher também tá e detalhe clica aqui quando você ver o preço você vai falar assim nossa ridículo Rodolfo ridículo ridículo é realmente um presente para você o R 1.000 em 7 dias para te ajudar a ganhar uma grana aí como programador aqui no JavaScript a gente vai ter que fazer o seguinte primeira coisa que a

gente precisa é mapear quem é quem cada um deles então por exemplo eu vou ter o meu botão que vai ser ali o meu botão para mapear o botão eu vou criar uma variável e vou colocar o botão lá dentro para isso eu uso document document MMO HTML então ó vai lá no HTML procura alguém para procurar alguém a gente precisa usar o Carry selector esse alguém é quem bem esse alguém Ele tem uma classe e a classe é botão é botão Qual que é a classe botão menu combinato beleza copiei aqui colei aqui beleza

então já sei quem é meu botão por eu vou ter que clicar nesse botão e a hora que eu clicar nesse botão ele tem que fazer alguma coisa então eu preciso saber quem é o botão que eu vou clicar e vai fazer alguma coisa Eu também preciso saber quem é o meu menu lateral Então vou criar uma variável para guardar o meu menu lateral que é a classe aham t t tã aqui ó menu lateral só um detalhe aqui no Carry selector eu tenho que colocar um pontinho na frente porque porque eu tenho que avisar

que é uma classe e o símbolo de classe é esse pontinho combinado aí eu também preciso saber quem é o meu conteúdo que a gente vai mexer em tudo isso então mesma coisa Carry selector Ah meu Deus do céu o aut complete me ferra conteúdo só confirmar aqui T conteúdo beleza Além disso eu preciso saber quem é o meu background então document p Carry selector e pon back Ground eu gosto de copiar mesmo para não fazer cagada daqui a pouco não funciona a gente não sabe porquê beleza eu já sei quem é quem e agora

eu vou conseguir manipular os estilos trocar cor movimentar fazer tudo isso com o JavaScript E aí olha só que legal que a gente vai fazer eu vou pegar meu botão e aí tem um cara chamado add advent listener que que o add advent listener faz eu vou pegar meu botão Ok eu tô mapeando que é meu botão no JavaScript meu JavaScript já sabe quem que é esse cara ó esse cara aqui eu vou falar pro JavaScript o seguinte JavaScript Fica de olho nele o AD event listener é basicamente a gente falar fica de olho nesse

cara e me avisa quando acontecer alguma coisa por exemplo eu vou dar um control espaço aqui ele pode me avisar ã Por que que não tá aparecendo Enfim vou vou colocar aqui manualmente às vezes ele não completa mas o que que eu quero eu quero que quando o meu botão ele for clicado ele precisa me avisar E aí ou eu posso criar uma função separada ou eu faço isso aqui ó Opa ó eu faço isso aqui isso aqui é uma abreviação de função então isso aqui é a mesma coisa que eu fazer isso aqui ó

função blá blá BL BL blá tá bom isso aqui é uma função inclusive se você tem dificuldade com funções tem um vídeo aqui no meu no canal que é sério você leu os comentários desse vídeo de função tá todo mundo falando meu Até que enfim eu entendi função Obrigado Rodolfo então eu expliquei função de um jeito que até uma criança entende e vou pedir pra equipe equipe Não esquece ó deixa aqui o link desse livro desse vídeo de funções mas isso aqui é uma função isso aqui a gente chama de Aron function é como se

fosse uma abreviação então basicamente ele vai ficar de olho no botão e quando o botão for clicado ele vai executar o que tá aqui dentro eu vou executar alguma coisa besta tipo um console P log Opa fui clicado só pra gente saber se tá funcionando uma coisa que eu falo também pros meus alunos é não faz tudo e sai testando faz um pedacinho e testa vai testando aos poucos para você pegar os erros eu vou clicar com o botão direito do mouse aqui vai abrir o menu menu inspecionar tá E aí eu vou aqui no

console e quando eu clicar nesse botão ele tem que aparecer a mensagem ó fui clicado então beleza Tá funcionando até aqui perfeito mas eu não quero que apareça um console Eu quero mudar alguns estilos e na verdade eu não vou ter que mudar muita coisa a única coisa que eu tenho que fazer agora é trocar trocar não eu tenho que adicionar a classe ativo ó eu já deixei a classe ativo pronta aqui é só eu adicionar classe ativo nesses caras que eles vão mudar automaticamente por exemplo eu vou pegar aqui aqui o meu menu lateral

ponto aí tem um cara chamado classlist então eu pego todas as classes que tem nesse elemento e eu vou adicionar uma nova classe que vai ser a classe opa deu um bug aqui que vai ser a classe ativo beleza aí eu posso fazer isso para todo mundo que eu quiser Ah eu quero fazer isso pro meu botão eu nem lembro se o botão vai precisar ou não mas eu vou colocar aqui para a gente eu vou fazer isso pro conteúdo Tá certo e eu vou fazer isso pro meu background E aí eu vou fazer isso

até pro meu Body mas em veja eu mapear o body tem um outro jeito que a gente pode fazer eu posso pegar aqui o document e fazer aqui direto ó Para eu não ter que criar uma variável document ponto ó Body ponto Style eu quero trocar um Style no meu body ó um Style o Style que eu vou trocar é o background color E aí quando eu clicar no meu botão eu vou lá no HTML pegar o meu Body trocar o estilo dele o estilo vai ser o background color eu posso fazer dessa forma ou

eu posso fazer assim tá eu prefiro guardar numa vari acho que fica mais organizado mas eu tô fazendo assim para você ver a diferença tá e se você quiser você pode ir aqui ó criar o body const Body é igual a document p Carry selector t tá tô fazendo dessa forma aqui para vocês verem as possibilidades então o que que eu vou fazer quando eu clicar no meu botão Além de eu adicionar a classe ativa todo mundo eu vou fazer o seguinte eu vou pegar o meu document lá no meu Body E aí eu vou

fazer o seguinte ó eu vou fazer uma verificação ã Na verdade eu já posso tacar aqui a cor direto o meu Body eu quero colocar uma cor eu vou vou colocar essa cor aqui ó quando eu clicar no meu botão ele vai colocar essa cor no Body Ah não desculpa é eu tenho que fazer uma verificação sim porque se eu colocar direto a hora que eu fechar o botão ou clicar de novo pode ser que dê pau então vou fazer uma verificação que é o seguinte eu vou pegar por exemplo menu lateral que eu tô

adicionando a classe ativo e toda vez que o menu lateral pon classlist eu eu posso verificar se ele contém se ele tem a classe ativo Deixa eu tirar um pouco de zoom então o que que eu faço eu vou lá no meu Body E aí eu vou determinar a cor do meu Body sendo qu eu vou no meu menu lateral vejo pego todas as classes dele caso ele tenha a classe ativo significa que o menu tá aberto se ele tiver a classe ativo aí o background vai ser dessa cor senão ELS o background Vai ser

branco que é esse branco aqui tá bom e só para explicar o que eu acabei de fazer aqui isso aqui é um ternário isso aqui é como fosse um if eu tô eu tô fazendo o seguinte ó se o menu lateral estiver aberto aí você deixa o fundo do B como escuro ELS sen Não Deixa o fundo branco exatamente isso que eu tô fazendo eu tô pegando o meu b e tô inserindo um estilo nele mas antes eu tô fazendo uma verificação ó meu menu lateral dentro das classes dele ele contém ele tem a classe

ativo se sim beleza então coloca essa cor no Body se não coloca essa cor Tá certo beleza é isso que eu tô fazendo e só para terminar a gente pode fazer a mesma coisa pro nosso conteúdo Tá além de colocar a classe Active t o conteúdo Eu acho que eu não coloquei a classe ativo deixa eu ver aqui Hum então só fazer isso aqui ó aqui na classe ativo eu vou colocar um background color nele quando tiver ativo deixa eu pensar Ah quando tiver ativo ele vai tá escuro então eu coloco esse background color E

aí quando ele não tiver aqui é background color background color e quando ele não tiver ativo eu coloco background Branco Assim fica mais fácil tá a gente pode fazer a mesma coisa ali no Body também mas vamos fazer de um jeito diferente no Body dos demais tá eu quis fazer de dois jeitos para você ver duas formas de fazer a mesma coisa Tá bom eu vou clicar aqui e vamos ver o que vai acontecer aham funcionou ã só não mudou aqui este carinha eu quero trocar a cor dele também à Não só o fundo quero

trocar a cor dele então eu vou fazer o seguinte ã aqui ó faltou colocar o Color então quando ele tiver ativo eu quero essa cor aqui no color Branco salvei deixa eu atualizar então quando ele tiver ativo Beleza já ficou um branquinho ali eu gostei mais combinado só que a gente ainda tá com um probleminha que é o eu não tô conseguindo voltar por que que eu não tô conseguindo voltar a gente tá com o background lembra Lembra quando eu ativo ele tá colocando o background na minha frente quem é o background é esse cara

aqui ó ó ele tá com o z index na frente de todo mundo então para resolver isso a gente vai fazer o seguinte eu vou pegar esse background ponto AD event listener e quando eu clicar nele eu vou fazer alguma coisa e quando que eu vou clicar nele bem olha só ele tá invisível ele tá invisível quando eu clico no botão ele tá visível agora e aí nesse momento se eu clicar nele eu quero que fecha então ó ele tá invisível Opa quando eu clicar nele eu quero que fecha Tá bom só um detalhe o

nosso menu lateral tem que ter uns zex maior que ele para ele vir na frente então deixa eu pegar o menu lateral aqui trocar os Z index cadê cadê cadê o menu lateral tem que ficar com os index maior que todo mundo então ele vai ser cinco tá bom ó agora se ó o menu lateral tá com os index maior ó combinado ele fica na frente só que eu quero clicar aqui e quando eu clicar aqui tudo desaparecer tudo fechar ã o nosso botão também a gente pode colocar unsex maior que esse menu Então cadê

nosso botão aham t t tá aqui para baixo botão menu Z index seis todo mundo maior do que o o background Ah agora sim ó beleza beleza Beleza beleza aí a gente vai fazer o seguinte ó vamos lá quando eu clicar no meu background eu quero fazer o contrário disso aqui eu quero remover a classe ativa de todo mundo então invez de ser Ed eu vou dar um contrl dtrl dtrl D selecionei todos e vou colocar o remove combinado combinado combinado ok ok ok então cliquei aqui cliquei de volta Opa cliquei aqui no overlay Ah

deixa eu ver deixa eu ver deixa eu ver ele tirou a classe do menu later botão conteúdo background aqui a gente tem que mudar o b então o b eu faço o seguinte toda vez que eu clicar no overlay eu vou pegar o document BO Style background color e aqui sim toda vez que eu trocar o body vai ter branco aqui aqui no caso sempre vai ser Branco formatar documento e salvei Beleza então fui aqui cliquei no overlay ele voltou cliquei voltou só que tá tá meio ó tá meio quadrado né ó não tá legal

não tá legal por a gente quer colocar algumas animações Então vamos trabalhar agora com as animações E aí vai ficar bem melhor a nossa aplicação só mais um detalhezinho tá faltando para nós aqui ficou muito grudado tá então a gente pode mudar aqui nos Styles ã em vez de um conteúdo cadê cadê cadê e vejo o conteúdo ter t t tã cadê cadê cadê o conteúdo Deixa eu pesquisar aqui em vez de gente colocar aqui ele ativo 320 vou colocar 380 que ele vai dar um margem left maior ó e aí ele não fica tão

grudado outra coisa esse botão agora que eu pensei ele tá ele tá abrindo o menu mas ele não tá fechando aí a gente teria que pegar criar uma função tal fazer outras coisas mas eu lembrei de um detalhe aqui no classlist a gente tem um cara chamado tuggle que que é o tuggle se tiver essa classe ele adiciona se já tiver ele tira então aqui no lugar do Ed eu vou colocar o tuggle tá E aí ó se a gente clicar aqui ó ele abre se a gente clicar aqui ele fecha Ele sempre vai tirar

e colocar a classe ali combinado eu acho que tá perfeito já não tem mais o que mudar única coisa que acontece que a gente precisa colocar isso no ar senão não tem graça né E também a gente precisa animar isso aqui que tá bem bem bem sem graça Então vamos primeiro trabalhar com as animações aqui no nosso CSS vou começar aqui embaixo aí depois a gente coloca no ar para facilitar vamos começar de baixo para cima lá lá lá lá no nosso B porque o nosso b a gente também vai mudar o ele vai vai

trocar de cor né então a gente já vou colocar aqui nesse cara um transition quando eu trocar de background então quando eu trocar o back background Não não é isso que eu quero deixa eu copiar um aqui ó quando eu trocar o background color dele eu quero que ele faça uma transition que transition que a gente vai fazer eu quero que dure mais ou menos 0.5 segundos e do tipo Easy Tá certo eu já mostrei em outros vídeos mas deixa eu e Easy eh easing out CSS tem uns sites que mostram deixa eu ver acho

que é isso aqui hum é esse site aqui que eu quero cubic bazer.com aqui Ah então e ele mostra as curvas e cada uma faz então eu posso fazer o efeito de forma linear eu posso fazer o Easy então o que que é o Easy o efeito começa pouquinho dá aquela esticada e depois dá no final ele desacelera então ele começa acelerado dá uma desacelerada e ou começa desacelerado dá uma acelerada E desacelera então esse easy easy in Easy out é Easy in out é essas curvas aqui Inclusive a gente pode criar a nossa própria

curva do efeito como que ele vai se formar como que vai ser se ele começa com tudo ó tá vendo que é um gráfico ó progressão versus tempo então no tempo ele vai fazer muito ó ele já vai começar ele pode começar fazendo muito e depois desacelerar ou ele pode começar bem devagarinho ó bem devagarinho e subindo tá vendo e aí se eu pegar esses números eu consigo fazer essas curvas por padrão ó o Easy tá vendo ó Ele começa op começa mais devagarinho dá uma acelerada e vai devagarinho o linear vai de ponta a

ponta por padrão a gente já tem esses daqui que eu posso usar por exemplo eu vou usar o Easy Mas eu posso criar minha própria curva a gente vai fazer as duas coisas por exemplo a transição do background eu coloquei o Easy e ela vai durar 0.5 segundos e vai ser só na troca do background Color vamos ver cliquei aqui ó tá vendo que ele demorou um pouquinho ó a gente vai ter que fazer o efeito o mesmo efeito ó no nosso content senão vai ficar estranho então eu vou aqui no meu content content Cadê

o conteúdo cadê cadê cadê eu vou fazer o mesmo efeito Ah aqui a gente pode deixar geral por aqui ele troca também a cor Então eu vou deixar 0.5 para tudo vamos ver Ah agora ficou uniforme tá vendo porqueo o body quanto o conteúdo eles têm o mesmo efeito Poxa bem legal bem legal vamos continuar aí a gente tem o menu lateral o nosso menu lateral também ele faz ó um movimento Então a gente vai trabalhar esse movimento também aqui ó nosso menu lateral também vou usar um transition transition mas agora eu vou usar o

bezer aqui ó Beer Beer Beer vou criar uma curva maluca aqui verdade eu já criei uma curva maluca e eu vou copiar aqui a minha curva maluca e vou trazer para vocês e vou explicar tá então vou colocar aqui ó então pera aí tá aqui eu não coloquei no conteúdo eu não coloquei o All a é ou seja ele vai aplicar para todos Cadê o conteúdo mas é legal colocar ó ó então ele vai aplicar para to tudo ele vai aplicar animação para toda a troca de estilo que tiver aqui dentro Eu posso escolher uma

um determinado efeito só ou uma determinada propriedade que ele vai vai aplicar o efeito ou eu posso deixar algo que ele vai aplicar para todas aqui no caso do nosso meno lateral eu vou aplicar para todas vai durar 0.5 segundos e eu vou fazer essa curva maluca aqui que eu criei tá você pode criar sua própria curva você vai aqui ó começa a mexer ó cubic bezer ah eu quero assim assado Ah eu quero dessa forma dessa E aí você copia esse número Maluco e coloca aqui ó cubic bezer e ele vai fazer exatamente essa

curva eu vou salvar aqui e a gente vai ver ó que agora ó tá vendo ó pu ele vem P ele volta P ele vem P ele volta boa Legal a gente já tinha feito algumas animações aqui dentro ó ó esses movimentos e agora a gente já tá deixando isso bem bem bem bem legal aí a gente pode aplicar no nosso botão também ah tã Cadê o nosso botão mesma coisa vou colocar aqui um transition transition Tá certo vou colocar que é para tudo vou colocar 0.5 e vou colocar que vai ser a is in

pronto salvei aqui vamos lá ver nosso botão ó tá vendo Ah não quero Easy para seguir o outro coloca o Easy aqui ó vai seguindo vendo o que te agrada mais combinato combinato bora continuar que ainda tem mais um pouco agora a parte mais importante duas partes muito importantes hospedar seu site colocar ele na internet e também você vender você ganhar dinheiro com programação vários alunos meus estão ganhando dinheiro com programação vendendo seus serviços Você pode procurar uma barbearia uma advocacia uma contabilidade uma manicure alguém aí algum amigo um parente os comércios do seu bairro

ou procurar pessoas no Instagram que precisam de um site vários alunos meus estão ganhando muito dinheiro com isso mas o primeiro passo é você saber hospedar e tem que ser um serviço de qualidade porque senão seu cliente fica na mão a gente fez uma super parceria com a hostgator hostgator Tá com planos bem bem bem acessíveis O link tá aqui embaixo link tá aqui embaixo porque a galera que é Dev Club tem desconto lá na na hostgator tem planos a partir de 10,99 você ganha o domínio o www você ganha e detalhe tem CDN grátis

a hostgator é o único serviço de hospedagem no Brasil que dá CDN grátis CDN GR CDN é um serviço que deixa seu site muito mais veloz abre muito mais rápido tá E aí você escolhe o seu plano lembrando dependendo do plano que você pegar dá para você ter vários e vários sites lá dentro tá Não precisa ter só um cliente aqui não Você assina uma conta você pode ter vários clientes e aí depois que você assinar você vai cair aqui ó numa tela como essa e você vai entrar no cpanel que é o painel onde

a gente vai colocar o nosso site tá é muito simples é basicamente colocar nosso site lá dentro você vai gerenciar os arquivos aqui no seu servidor E aí vai ter essa pasta Public HTML dentro dessa pasta Você pode deletar se tiver alguma coisa aqui dentro tá então você pode clicar aqui se tiver alguma coisa você deleta Ok deletou E aí é só carregar os nossos arquivos agora eu vou selecionar o arquivo lá na área de trabalho nosso index vou selecionar o scripts e vou selecionar também o Styles e acabou seu site tá no ar é

é é isso mesmo é já tá no ar se você voltar lá no no portal clicar aqui você vai ver ó que já tá publicado com o meu domínio ó dclub tecnologia.com.br esse foi o vídeo de hoje link da hostgator aqui embaixo link do me headset aqui embaixo e mais dois vídeos bem legais para você aprender