Menu responsivo com CSS e JS puro - Tutoriais de Web Design

Menu responsivo com CSS e JS puro – Tutoriais de Web Design



[Música] e aí pessoal todo bom vocês nome é carlos e hoje tendo para mais um total desenvolvimento web como canal nessa aula de hoje vou mostrar pra vocês como criar um menu responsivo utilizando apenas css puro e js puro ou seja aqui nessa hora a gente não sabe onde quer que a gente vá apenas estava script puro rock uma dica para você espero terminar a aula para você poder começar a escrever o código porque se você fizer junto comigo você vai se perder por experiência própria que existe muito total não dá pra você programar junto entender quando falando não esperava acabar depois você volta e tenta fazer seu próprio código baixo o código-fonte dar uma estudada e tenta adaptar-se no que você quiser usar esse menino simples você pode utilizar para outros projetos pode mexer nele pode estar com a sua cara com seu veículo e bom de conversa vamos lá vão direto ao ponto vamos fazer nosso melhor a fazer é mostrar pra vocês a estrutura da pasta como o tempo não tem aqui a pasta no projeto que mesmo responsável js eu vou explicar para vocês o que é uma folha chamada comportamento ponto js que vai ser a responsável pelo nosso script e porque o comportamento que o javascript ele é responsável pelo comportamento do site em contrapartida também tem uma filha chamada estilo pontos e s comanda o estilo do nosso site então eu prefiro nomear com um nome que eu sei que é fácil entendimento para então comportamento numa folha estilo tem outro assim a gente consegue seguir um padrão desenvolvimento chamado t bolas que é o padrão onde a gente se para tudo por camadas a gente tem reclamado do nosso html e tem a camada dos nossos iss ea camada do nosso país cada uma cuida de uma coisa separada além disso eu tenho que o novo da briga que eu vou colocar dentro do código aqui eu mesmo cometi um erro e é em grande o certo é que você vai colocar no seu projeto coloquei maior porém o site de vocês como se estivessem desenvolvendo o projeto vocês usar as imagens já no tamanho ideal que você vai colocar na parte não faz isso aqui não não segue essa pasta essa prática que está errada eu realmente não sei porque não diminuir a imagem porém agora já vai tá bom vamos lá ver com o que eu tenho que fazer é crédito do html se você já viu 0 sobre o bayern vai ver isso aqui é extremamente fácil de fazer no subúrbio teste se você não viu as novas ferramentas essenciais de um curso gratuito no canal está totalmente gratuito mesmo preciso pagar nada sobre ferramentas essenciais do desenvolvimento é só clicar no link que vai ter na descrição do vídeo tá bom ganhar de novo você decidiu assistir à aula que dar um pouquinho vai ser longa porque a gente vai fazer todo o código na mão e é bastante comum escutar mas bom vamos lá vamos começar a definir a estrutura básica da semed para fazer isso eu preciso colocar um ponto de exclamação certo e dá um tab que automaticamente o sublime já vai criar para a gente a estrutura básica de um html preciso mudar algumas coisas a primeira coisa que vou mudar é o título do documento que você sempre alguma coisa tem o hábito de salvar porque não correr risco de perder o documento acabou a luz e book mas também já escreveu alguma coisa muito importante salvar outra coisa que vai mudar aqui no html ele está sentado como lang pt br agora mais numa próxima aula talvez já mostra vocês como já criar uma arquitetura o projeto está em como fazer isso também outra coisa que vou fazer é acertar algumas meta tags aqui no meu projeto está aqui um comentário como eu falei pra vocês pra você fez um comentário no seu blog a primeira é colocar aqui no projeto é fazer isso usando sua volta um pouquinho gratuito fazer se inscrever meta 2 pontos bebê e automaticamente já vai criar para mim a meta tags viu porte está a quem nunca viu isso aqui na vida essa meta tag é mais importante quando você vai tratar de design responsável então o que eu estou falando aqui primeiramente estudando o nome da minha meta tags kevin porte incompetente eu tenho um igual o da suíte no caso aqui ele não vai considerar a resolução dos dispositivos você pegar por exemplo o iphone a resolução dele é muito maior do que a largura você tem uma tela pequena com uma resolução muito grande se eu fosse trabalhar apenas com a resolução o meu conteúdo era muito feio então eu peço para o meu navegador considerar como a largura do documento a própria largura dele e não a resolução então assim eu vou ter uma medida um pouco mais plausível para poder desenvolver um projeto legal vamos supor não me engano no iphone a largura ficaria com 480 pixels ao invés de trabalhar com 1.920 resolução deles não me engano nesse outro parâmetro eu estou dizendo para o navegador que o meu salário não vai poder aumentar o tamanho do dispositivo está então no caso não vai poder dar zoom a isso aquilo até recomendo que vocês tirem está porque essa decisão aqui se o usuário vai poder ou não da azul no conteúdo é totalmente do usuário não sua e só o mau uso você colocasse uma sua tag ela já vem por padrão aqui no limite porque ele já considera da todas as tags para você porém se retire do código você está inicial e que no caso é a escala inicial do conteúdo que é 1.0 e o máximo escala também vou retirar porque eu não quero deixar o usuário decida o quanto ele quer colocar de largura no documento quando o usuário quer colocar na mesma escala também posso tirar no último domingo 19 o porte ficou assim suíte escala começa com 1.011 então essa aqui é a meta tags outra coisa que eu vou fazer com meu projeto já importar nele a fonte utilizando que no caso uma fonte do google se você não usar o google fonte eu vou mostrar pra vocês a pedir acesso ok google na nossa cabeça de pesquisa google não faço isso o google fonte está aqui você tem uma biblioteca enorme de fontes que você pode incorporar no seu código e que essas fontes elas vão ser usados em qualquer navegador a qualquer dispositivo vai conseguir vender essas fontes e é bem fácil de vocês colocarem no projeto utilizará aqui mostra quanto tempo vai demorar para carregar no meu projeto é só pegar mesmo que aconteceu ao título em cima da linha tá então esse é o nosso cabeçalho já está pronto agora aqui em baixo eu vou colocar o meu comportamento por que não em cima junto com a folha de estilo vamos explicar uma coisa para vocês aqui dentro do rádio do html eu tenho todo o comportamento do site na cabeça do meu site ela se encontra no rádio de acordo com isso eu deveria também colocar todas as menções de scripts dentro do problema o navegador carregava conteúdo ele vai carregar tudo aqui geralmente o script é um pouco mais pesado e não é tão essencial quanto o css então ele poderia esperar um pouquinho eles a todo o conteúdo para que meus olhos a posse navegando no site depois ele sim em carregar o javascript é por isso que é uma boa prática a gente colocar sempre script no final da página no caso antes do fechamento do buraco e deixado sempre no rádio o que é realmente essencial de carregar e mostrar o conteúdo que o usuário está aqui embaixo script do site agora a gente pode fazer dentro agora eu vou começar a criar o conteúdo do site será um header no caso aqui no cabeçalho eu vou colocar uma cláusula regra vou colocar aqui no finalzinho só no caso nem sempre está no começo e no final até porque senão daria muito trabalho coisa volta aqui e faça um comentário depois eu vou ter o meu lobo então como eu quero que seja aplicado o primeiro vou criar um link vou colocar o meu site sempre coloque http dos pontos quando você está inteiro não pode ser um link relativo a não ser que você esteja tentando alguma coisa dentro do projeto também colocar 200 o título da minha página 15 prontinho e aqui eu vou colocar o menino responsivo com o vasco aqui novamente bom o que acontece como criando uma navegação é uma boa prática você colocar sua navegação principal dentro do cabeçada de seu site no caso dentro do redd está começando aqui é o cabeçalho minha página principal voltar a carregar é interessante a minha navegação já aqui só navegação não for uma navegação principalmente no secundário que é um menino que vai ficar uma barra lateral é assim você fazer fora do rádio mas como navegação principal eu vou colocar aqui dentro do hatch está bom vamos começar então fazer a estrutura bem básica diminuta esse menino não requer muita estrutura só o básico mesmo então eu vou criar uma nave com uma classe neve mesmo dentro dela eu vou criar uma nova pele com uma classe dentro do gol 1 a 1 por enquanto cinco vezes agora sim o home sobre serviços aqui embaixo contra clientes e por fim contatos e vou aplicar agora dentro do nó com o mesmo título fome sobre em cima e embaixo depois com o texto genérico só aqui dentro do meu site para fazer o layout do site se você quiser basicamente a nossa marcação agora o nosso trabalho é exatamente agora então já abriu seu estilo do trabalho aso que como eu vou mostrar isso presstur ao fazer um reset básico um reset bem genérico não vou abrir o asterisco quando abrimos teria como fornecer acesso do fundo para aplicar o colocar aqui dentro para todos exatamente todos os meus elementos do navegador tudo que tiver na minha página ele vai aplicar esse efeito colocar aqui tudo colocar aqui dentro novamente um projeto real não recomendo vocês fazem isso em um projeto real tenta utilizar um reset melhor eu vou falar mais para frente isso aqui no canal também para você ter uma idéia de como fazer um reset bacana mesmo sem deixar muito pesado e sem muito usar muito esforço do navegador o que acontece quando faço um reset genérico ou coloque qualquer pegue genérica no navegador basicamente é exatamente todos os documentos todos mil tags todos os atributos para aplicar esse estilo então automaticamente a cabo acrescentando uma lentidão no carregamento que não é necessário faço a máquina do usuário pensar um pouco mais do que não precisaria se eu tivesse feito um corte com um pouco melhor o toque para nível de tutorial 17 que está legal porém um projeto real não tá bacana a gente não usa isso nunca tá recomendado a sua margem pede também ao box to box dele e não está aqui eu tenho um site muito legal muito bacana sempre procurando um flat para colocar no meu projeto ontem que o flat e colors que escolhe uma cortar aqui só vou dar um clique ele automaticamente a cumprir para mim e vou coloque a página relativa ao dia 15 quando fica maior ainda então quando eu quiser aplicar uma fonte responsiva eu posso usar o vw que automaticamente vai ajustando o tamanho da minha fonte então vamos lá vamos continuar no bar e colocar uma borda lá no topo do top mudar a cor padrão preto um pouco mais suave e dar um pouco mais leitor agora eu vou alterar o documento envolvendo um site que vai focar no caso seria desenvolver primeiro para o mobile e depois e adaptando o desktop primeiro a gente vai fazer depois sendo assim o inicial agora sim o alto padrão a mesma coisa o dispositivo tati um comportamento de uma forma diferente do que está tratando aqui de uma mídia e vou colocar aqui no caso de largura e assistindo de 1.171 valor relativamente compatível com a maioria dos debates de desktop que você tem hoje no mercado a maioria dos notebooks mais simples a maioria das telas é compatível com 1.170 de novo no lugar mas o ideal é usar um [Música] computador que vocês pudessem melhor então toda uma resolução bem baixo aqui mas vamos lá agora eu vou começar a utilizar o carro direto no top um pouquinho mais legal outra coisa que eu posso ir ela está abaixo do meu logo na estrutura e coloca na mesma hierarquia aqui o meu título do site a princípio vou colocar o ide 100 por cento lembrando que estou focando o primeiro dispositivo móvel vou colocar um pé dele aqui de 10% ou melhor de 10 pixels vou colocar também um testemunho assenta sobre uma hora e pouco falando só sobre o console do navegador desenvolvedor o modo como um bacana e legal porém eu acho que aqui no computador e ele tá muito grande está no modo desktop é muito grande então vou criar aqui só para si – uma mídia e vou colocar 18 pixels e vou diminuir o tamanho dessa fonte então o título do site o tamanho da fonte site em vez de pegar 5h eu vou pegar três vezes aqui em tempo real é colocar lá absolut e ele vai [Música] colocar absoluto ele tentará buscar o topo do meu conteúdo do time ele vai tentar ficar pra cá aqui ele está num positivo relativo um pouquinho na prática está ativo há também um display blog está alinhado vou colocar um ponto faz aqui no menu de 1.6 agora eu vou colocar embaixo e está na verdade mesmo copia vai ficar toda a linha dinheiro todo certinho então aí mais uma ferramenta para você está fazendo esse modelo em que o vôo criando o código junto com vocês é um pouco cansativo não tem problema nenhum no começo a ficar pronto só explicar para vocês que eu fiz não comentem nos comentários deixe um comentário de qual forma vocês preferem ser assim ou se é o código pronto e mostrar pra vocês só que eu fiz ou se vocês preferem realmente eu faço junto com vocês algumas dicas legais alguns feedbacks enfim a melhor forma de apresentar com tudo pra você está agora dando continuidade em colocar um marca top agora a minha lista logo é natural e não reconhece agora vou colocar nome não quero aqui enfeitando a minha lista mais uma partida definida agora eu vou utilizar o meu link depois eu vou colocar um pé de um pouco mais passado de 15 com um acordo [Música] certo e errado de novo reconhecendo que tentar entender um acerto que tem só um espaço a mais de jeito nenhum uma coisa é normal errar é normal você toma forma e já começou a ficar um pouco mais bonito vamos deixar um pouquinho ainda mais utilizado aqui trabalhar com o caso por enquanto vou colocá la na parte que o filme chico responsivo tá então nave traço item é o último a última último a no caso do item vai pegar o último caso aqui é o contato eu quero que ele coloque um border angels tem quatro parâmetros os dois primeiros eu defino as partes de rádios de cima e os dois debaixo de dois últimos de baixo como quero pegar aqui os dois então quero pegar o primeiro quero pegar o de baixo ainda que o novo mouse sobre o link agora vamos começar a primeira coisa que vou mexer eu vou criar uma mídia aqui e vou colocar essa mídia o mínimo dela tem que ter no mínimo 480 pixels para poder aplicar esse estilo que se nós não vai aplicar aquilo que eu quero aplicar dois gols do meu canto esquerdo eu não tinha aplicado porque só 480 pixels quando tiver no mínimo 480 pixels vocês vão entender isso melhor quando estiver lá mexendo com o top top baixo baixo principal eu vou defender uma marca top para ele de 30 pixels vou abrir aqui no principal dar um pouquinho também de design acrescenta a fonte saio vou mudar muito pequenininho vou colocar 3.5 top nos parágrafos de [Música] computador um dispositivo maior fonte de mais quatro feita ainda muito grande colocar três dispositivo maior domíno 2.5 um pouco mais agradável eu também vou colocar aqui vai ter no mínimo 50 dos valores agora não vou colocar aqui no item também abaixo do 1 minuto sabe que até 768 pixels ele se comporta de uma forma passou de 78 dá para você acompanhar esse valor aqui em cima vai mudar para outro tipo de comportamento no caso aqui do lado a gente já percebe que quando faço desktop também abaixo do que a gente tem que fazer agora é sentar pra que isso aqui é legal um dispositivo móvel que a gente recupere esse menino e ele só apareceu quando a gente apertar o botãozinho específico para estar aqui daqui a pouco vou falar o nosso quadro por enquanto e para tornar se um pouquinho melhor preparação para que o usuário saiba que cada item que dessa lista é um menu separado tá então aqui no meu 9 e mesmo eu vou colocar uma bola embaixo fazer mais uma definição que para ele são da forma que você quiser mobile display bloch ela vai sê a tag que vai ser responsável por abrir e fechar o nosso minutos e você só vão vela de fato quando a gente tiver trabalhando lá no nosso javascript porque eu vou adicionar só segue dentro do nosso código fonte no javascript e não pelo html5 vocês não viram essa tag ainda vamos dar continuidade agora que logo abaixo a definição do nosso menino tá eu vou seguir a mesma linha da nave está aqui embaixo da nave no caso de infecções aqui eu vou colocar aqui eu não declarei no código fonte que vão ser responsáveis pelo que o responsável então vai ter algumas tags que a gente vai usar na verdade lá no javascript por enquanto não vou colocar aqui no responsivo a primeira é só vai novamente no máximo até novamente agora vou mudar oposição dela para absolutamente agora lembra que eu falei para vocês que quando tivesse absolut iria tentar buscar lá em cima como eu coloquei relativo no meu neve e eu vou colocar dentro dentro da página e não lá no topo do documento como seria normal 100 posicionamento e agora vou dar continuidade colocando um background que também é essa minha bike ground vou colocar uma conta o padrão do canal novamente só que por agora também vou colocar no hit html como acrescentar um texto em baixo tem muita gente que gosta de colocar muita gente fica fácil entender o conhecimento então pode acontecer você colocando só um ícone um minuto e acabou não conseguindo interagir com o conteúdo do site como você gostaria sempre tenta parar de dar uma pensada para ver se realmente a pessoa que vai ser só seu site vai conseguir entender o que você está transmitindo para ela se não para de uma forma diferente está no caso aqui é sempre legal você indicar que o que ela vai fazer clicando no menu ou não justamente quando a gente mudar quando tiver fechando o minuto a minuto final e fazer realmente conseguir bom quanto o nosso não tiver aberto ou até mesmo uma tag interagindo com ele está agora no top 100 na parte de cima e de baixo tinha essa tag 9 mobile open alterar o texto do botão quero abrir o menu quer alterar para fechar menina de nove módulos nos comentários e agora vamos dar continuidade agora a 0 do primeiro e muito pequeno o pequenino sou muito pequeno senão ele não fica a ordem de grandeza do que é no mínimo 480 pixels vou mudar esse documento vai fazendo o seu trabalho nos comentários eu tinha colocado aqui na velhice não tinha comentado display noni agora eu vou retirar esse comentário e quando atualizar a página continha um menino sumiu tá a partir do momento no sul eu vou lá porque o script e vou começar a fazer ele apareceu novamente então vamos para o nosso comportamento a gente vai fazer esse menino aqui usando apenas javascript está a gente não vai utilizar a gente não vai utilizar nenhum filme work para poder fazer o nosso mundo funcionar com compatibilidade entre os navegadores por exemplo que é o arquivo inteiro a primeira é que antes do nosso comportamento ou fazê lá no topo para mim é mais fácil vamos começar então definir só quero que ele carregue essa função quando todo mundo começa então vou dar esse definindo que ele não vai cair enquanto o documento bom a gente tinha colocado lá no nosso documento inovar aqui no nosso estilo é uma variável vai móveis a gente não tinha declarado ela no nosso ml a gente vai fazer agora é declarar essa variável fazê la parecer por escrito uma variável que moby criar um novo e meu código o documento agora agora é dar uma variável que a gente trabalhou trabalhou no caso a caso coloque um filho carregar uma página web e vou ver se ela não tá recarregar a página do contru ativado para tirar o cash e agora sim ela já adicionou que também está bem legal adicionado o meu menino que o tamanho define o sucesso que o código legal queria voltar lá o processo subiu porque [Música] minha página 76 88 vídeos vão entender a primeira ainda dentro do minuto já coloquei a minha nova tag dentro do documento a gente quer selecionar ela e passarela essa minha nova nave o próximo passo agora eu vou colocar esse agora também vou usar ele então vou colocar aqui uma variável trabalhar com ele aqui no comportamento variado de classe e agora entrou apolo a seleção pra gente qual seletor quero que primeiramente modifique quando clicar em quero que defina o nome do tablet então a primeira coisa que tem que acontecer pegue o documento a minuta aberto então vou aplicar isso a esse elemento mesmo no caso em nada mesmo se abre agora falta de graça nenhuma eu vou pegar o meu setor público vou passar uma creche para esse tombo também qualquer classe de activos que tive ele vai dar um display rock e vai dar um mago entope na minha lista vamos lá a gente vai tentar melhorar isso espero que eu consiga utilizar esse projeto vocês é um site para baixar o código fonte e utilizar um projeto de vocês e até a nossa próxima aula depois vou mostrar pra vocês como fazer esse mesmo menu porém utilizando também subiu menos e aí nesse caso a gente vai reutilizar escola porque está pronto só vai adicionar mais algumas tags em uma creche para eles está o pessoal espero que vocês tenham gostado e até nossa próxima aula [Música]

20 thoughts on “Menu responsivo com CSS e JS puro – Tutoriais de Web Design”

  1. Muito bom a sua aula e explicação detalhadas.
    Eu prefiro o código feito na hora do quer trazê-los prontos para explicar.

    Eu estou no começo dos Estados em Web e web design.
    Meus parabéns pelas aulas…

  2. Ficou muito boa a aula!!!!! Só fui ver o código pronto no seu site, depois q terminei aq manualmente, mas valeu apena!
    Sugestão: Poderia fazer uma aula com playlist de áudio e vídeo tocando automático. EX: clica em certo cantor e as músicas dele rodam e assim vai.

  3. Como inserir o símbolo do hamburguer (≡) para abrir, e o "X" para fechar? O símbolo do hambúrguer não aparece…

  4. O Apollo precisa de alguma extensão para funcionar no brackets? Quando copio o Apollo para lá, de cara ele me retorna 51 erros. Desculpa se a pergunta for idiota, mas sou bem iniciante nos estudos.

  5. Cara gostei muito!!!!!!!!!!!!!!!!!!! MUITO OBRIGADO por compartilhar conosco essa MARAVILHA! Estou fazendo um curso na UDEMY paralelo com o seu canal e estou aprendendo demais. Sai rapidinho do nivel basico para o medio e meu site ja esta quase indo ao ar como meu primeiro portifolio e ainda por cima responsivo. Continua por favor, você nao tem ideia de quantas pessoas vc está ajudando. Sua didática é ótima…. Mais uma VEZ: OBRIGADO!!!!!!

  6. amigo você pode montar esse carrousel numa página simples? https://codepen.io/matthewhirsch/pen/OPwQRL

  7. qual nome deste plugin que ajusta o navegador de acordo com os pixels de cada aparelho ? procurei mais nao encontrei na net

  8. Muito boa aula! Uma sugestão é você criar um projeto fictício completo, utilizando JavaScript puro também. Sucesso!!!

  9. Já fui logo pulando pra parte do JS, daí vem um plugin 🙁 . Vou dá uma estudada no plugin pra ver como faz.

  10. Otima video Aula , mas estou com um problema….. escrevi corretamento o codigo e os scripts, mas meu menu não aparece nem no desktop e nem no mobile, pode me dar ma ajudinha ?

Leave a Reply

Your email address will not be published. Required fields are marked *