Como criar um menu mobile lateral - Portfólio com HTML e CSS - Bônus

Подписаться 15 тыс.

Просмотров 12 тыс.

50% 1

✅ Conheça o treinamento Modo Front-end e crie projetos incríveis do absoluto zero: bit.ly/3KY8mpn
✅ Seja membro deste canal e ganhe benefícios:
/ @inteliogiadev
Hora de finalizarmos o nosso projeto do portfólio personalizado. Nesse vídeo criamos um menu mobile que abre na lateral do nosso site e utilizamos HTML, CSS e JavaScript e além de aproveitarmos a estrutura que já existia em nosso site.
Com isso finalizamos o nosso projeto do portfólio, sinta-se livre para utilizar esse projeto como você quiser.
💡 Seu projeto ficou pronto? Coloque ele no ar com a Hostinger e ganhe até 20% de desconto:
hostinger.com.br?REFERRALCODE=1BRUNO76
✅ Links úteis:
🔹Simulador de celular: bit.ly/47E37EK
✅ ME SIGA NAS REDES SOCIAIS
🔹 Instagram: bit.ly/3DHrMdj
🔹 GitHub: bit.ly/3tVboSS
✅ Participe da nossa comunidade no Facebook:
bit.ly/3vaJdiy
✅ SE LIGA SÓ
🔹 Meu objetivo é levar o mundo da computação para todos. Você deve saber, né? Existem muitas vagas de emprego para poucos profissionais no mercado. E assim como eu você quer crescer no mundo da programação me acompanhe aqui no canal: / inteliogiadev
✅ EMAIL PARA CONTATO EMPRESARIAL (não tiro dúvidas por aqui):
🔹 contato@inteliogia.com
✅ É isso #programMaker, seguimos por aqui, codando 👨🏼‍💻

Опубликовано:

25 авг 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 107

@InteliogiaDev 10 месяцев назад

Meu povo, teve um detalhe que acabei esquecendo de citar no vídeo. Para que as barrar de abrir o menu mobile suma da versão de desktop basta você adicionar esse código no seu css (fora das medias queries): .btn-abrir-menu{ display: none; } E para que ela apareça apenas na versão mobile, basta adicionar esse código abaixo DENTRO DAS MEDIA QUERIES: .btn-abrir-menu{ display: block; } Peço desculpa pelo esquecimento 😁😁

@dreamer3153 10 месяцев назад

sou iniciante, o que seria as medias queries?

@InteliogiaDev 10 месяцев назад

@@dreamer3153 Fala mano, tudo bem? No vídeo anterior a esse, onde eu falo sobre responsividade, eu falei sobre as medias queries. Mas para resumir é uma regra do CSS que possibilita a gente adaptar o nosso site para vários tamanhos de telas. Você pode identificar ele no seu código assim: @media screan and (max-width: 1020px){}

@dreamer3153 10 месяцев назад

@@InteliogiaDev quebrei um pouco a cabeça mas consegui consertar aqui, muito obrigado

@Jailondanet-tn8li 8 месяцев назад

que mal pergunte mas, como faço pra página rolar automaticamente para a seção criada no html ?

@fmoliveira30 8 месяцев назад

@@Jailondanet-tn8li tb estou com essa dúvida. Como faz Mestre?

@Joao_mqsh 4 дня назад

melhor projeto do mundo

@giljaredvanete 27 дней назад

amei! parabéns!

@eduardogomes579 7 месяцев назад

Muito bom, obrigado por tudo !

@ailtonjrdev 5 месяцев назад

Top de mais mano!

@_danfer_135 5 месяцев назад

vc é mt monstro mano, sempre aprendi pelos vídeos do Gustavo Guanabara pois acho a didática dele perfeita, e agora conheci você também e sua didática é maravilhosa! Com certeza vou acompanhar o canal e pegar umas dicas :)

@InteliogiaDev 5 месяцев назад

Ser igualado ao mestre Guanabara é sempre uma honra pra mim 😁😁 muito obrigado msm, de verdade

@luanzinhoobr9734 10 месяцев назад

muito obrigado! por esse projeto incrível

@andresouzaoffice 5 месяцев назад

Parabéns Professor!

@michelzinhogeocafbatera8215 10 месяцев назад

Bah estava só por está aula 👏🏾👏🏾👏🏾

@ailtonjrdev 5 месяцев назад

Projeto senssacional!!🚀🚀🚀🚀🚀🚀

@ruthellenPJ 6 месяцев назад

Projeto incrível

@fernandofonseca9686 2 месяца назад

Vc eh muito foda! ❤❤❤

@sabbathbrand Месяц назад

Muito obrigado por esses tutoriais incríveis, criei um landingpage com html e css, mas graças a vc estou conseguindo fazer o meu site ficar responsivo, sua didática é incrível!!!

@lau_dicas Месяц назад

Muito bom! Vc é fera!

@arthurvieira6670 9 месяцев назад

Mano, obrigado pelo projeto. Aprendi muito com ele, meu css evoluiu muito só com esse portifolio! Abraço

@WellyntonGoncalves 27 дней назад

Rei do front, obrigado cara.

@InteliogiaDev 22 дня назад

hahahahah obrigado Wellybton kkkkkk rei do front é ótimo 😅

@josseanevendetti9307 3 месяца назад

Amei!

@PauloHenrique-rn3ps Месяц назад

Muito explicado🙏

@marcosabreu.edesoft Месяц назад

Seus video tem me ajudado muito. Porem neste fiquei com uma dúvida se puderem me ajudar, se a configuração mobile é até 1020px como determinou no exemplo pq ele passou todos elementos mobile fora do @media and (max-width: 1020px)?

@menesesdev 13 дней назад

agradeço mt pelo projeto vai me ajudar mt

@thiagocabralm 2 месяца назад

Muitoo Bom!! valeuu

@frankguitarr 3 месяца назад

Top muito bom mesmo tmj já me escrevi rsrs

@raiperzinfps 4 месяца назад

Ótimo projeto, fiz do começo ao fim. Parabéns, espero poder fazer seu treinamento!!

@marcusvinnicius4071 8 месяцев назад

Excelente video amigo, ajudou d+ poderia fazer um modulo so de JavaScript também

@cleberpereira856 2 месяца назад

O projeto ficou lindo d+. Aprendi muito. Você está de parabéns. Vamos que vamos

@henriqqqqqqqque 2 месяца назад

22:57 é massa demais codar fazendo essas analogias kkkk

@ThiagosantiagoRodrigues 8 месяцев назад

vlw man, tu é foda

@Alissonbrittto Месяц назад

Obrigado, que forma simples e boa de aprender. Parabéns!

@wagnerfernandes5918 4 месяца назад

Muito boa! Me baseei e apliquei muito do seu conteúdo no meu portfoio, que ainda nao terminei Parabens!!

@Moisespereira-zk2ss 2 месяца назад

Muito obrigado pela sua ótima explicação, eu estava tendo muitas dúvidas e dificuldades, devido ser novo na área, mais a sua forma de ensinar foi muito boa e eu aprendi bastante coisa com teus ensinos. Valeu!!!!!

@dudacavalcante2383 10 месяцев назад

Obrigada pela aula!!

@InteliogiaDev 10 месяцев назад

Obrigado a vc, Duda 😁

@soielumsay 6 месяцев назад

só aula top nesse canal, fico boba ! uma coisinha, sobre o X em 31:48, é so adicionar cursor: pointer em "menu-mobile .btn-fechar i "e ele se torna funcional

@alessandrosilva1015 9 месяцев назад

Gostei muito, muito bem explicado.

@leonardoduarte5045 9 месяцев назад

finalizei meu esboço agora, mano vc e mt brabo de vdd, vc tem didatica e isso e mt importante pro ensino de vdd, obrigado por esse projeto

@InteliogiaDev 9 месяцев назад

Fala mano! Muito obrigado de vdd msm. TMJ👊🏾

@gracasantos2893 Месяц назад

Muitooooo bom, que forma tranquila que você explica, e que boa vontade que você tem. Parece que eu encontrei um tesouro kkk Como é raro alguém com uma didática tão boa. Parabéns 👏🏻👏🏻👏🏻👏🏻

@InteliogiaDev 25 дней назад

Muito obrigado Graça, de verdade mesmo 😍

@lucascelestino749 9 месяцев назад

Olá, Bruno, boa tarde, tudo bem? Primeiro quero te parabenizar para o projeto, vi todos os vídeos do portfólio e ficou bom, porém a uma parte que se você puder adicionar ao código ou até criar outro video é a parte em que você coloca uma função. Para quando você clicar em qualquer parte do menu ele o leve ao que você deseja e clicou. Acha que consegue colocar este video para nós? Abraços, Lucas Souza

@InteliogiaDev 8 месяцев назад

Fala Lucas, tudo bem? Já ensinei a criar essa funcionalidade aqui no canal, se chama "Menu Scroll", dá uns confere aí e vc pode usar o msm conceito😁 ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-86OWrZEKkKs.html

@lucascelestino749 8 месяцев назад

obrigado pela resposta@@InteliogiaDev

@tamif_reis 7 месяцев назад

Nossa não tenho palavras pra dizer o quanto você foi necessário pro meu projeto da faculdade, ficou muito top obrigada mesmo, agora vou aprender a linkar as coisas e passar as infos do formulário

@sbgcursos2527 7 месяцев назад

Oi, você conseguiu linkar e passar as infos do formularios?

@tamif_reis 6 месяцев назад

@@sbgcursos2527 consegui colocar o javascript no formulario agr linkar nao :c

@vryyx_6969 2 месяца назад

como faco para o menu aparecer somente quando esta aberto em mobile? ele esta aparecendo no desktop tbm

@edsonbarrosponciuncula9971 2 месяца назад

Qual biblioteca eu devo importar no header para usar o bootstrap5?

@PEDROjscs 7 месяцев назад

Mano obrigado por esses videos tem me ajudado muito, to estudando para futuramente ser um baita profissional que nem voce! man so uma pergunta eu tava fazendo uns testes com o menu rolagem nesse portfolio, tem algum jeito de deixar as animaçoes do portfolio sem passar em cima do menu?

@InteliogiaDev 7 месяцев назад

Fala mano, primeiramente muito obrigado ❣️ pra vc deixar um elemento atrás do outro (ou na frente) vc pode usar a propriedade z-index. Quanto maior for o valor do z-index, mais pra frente ficará o elemento q vc selecionou. Só lembrando que o elemento q vc for aplicar o z-index precisa ter um position relative ou absolute 😁

@bostimansgames 9 месяцев назад

cara nao achei a parque que voce seleciona o o icone do dropdown do menu mobile

@MarciaPintoBarcelo1 10 месяцев назад

Muito obrigada, eu consegui finalizar mas o meu deus uns probleminhas não estava fechando menu mesmo eu colocando o código no css e no media quereis, meu filho me ajudou adicionando display: none; no .menu-mobile e display: block; no .menu-mobile.abrir-menu ai deu certo.

@InteliogiaDev 9 месяцев назад

Hahaha faz parte, esses erros que as vezes não entendemos o pq tá acontecendo kkkkk mas fico feliz em saber q tá tudo certo

@romarioaraujo6157 4 месяца назад

Brabo, muito bom, pode me tira ruma dúvida? no desktop continua aparecendo o botão do menu mobile, como faço pra ele não aparecer?

@DeepHMusic2024 3 месяца назад

Você pode fazer: @media screen and (min-width: 1020px){ .btn-abrir-menu{ display: none; } } Quando a tela for maior que 1020px o ícone desaparece.

@OeditorMTs 4 месяца назад

Meu amigo, tudo bem? como faço para deixar um vídeo 16:9 responsivo nessa versão? Posso usar o site e por ele no ar? 😂 Serio msm, estou utilizando esse trabalho que vc nos ensinou pra me socorrer aqui.

@HavocWanderer 2 месяца назад

E como fica o código para que o menu mobile redirecione para cada tópico?

@eduardocandidocondjojunior7209 20 дней назад

Você pode colocar os nomes das classes ou ids que você usou para cada div ou section que tenha o conteúdo que você deseja que ele redirecione no menu. É só substituir onde tem o "#", você pode por exemplo colocar "#especialidades"...

@sbgcursos2527 7 месяцев назад

Olá, Bruno! Conteúdos incrivéis, adiquiri muito conhecimento atráves dos seus videos. Me tira uma duvida por favor, o menu desktop ficou um em cima do outro depois que voltar para a versão desktop, como faço para deixa-los igual antes um ao lado do outro?

@InteliogiaDev 6 месяцев назад

Fala mano, tudo bem? No comentário fixado eu deixei uma explicação para resolver isso 😁

@jociarabittencort855 7 месяцев назад

Finalizei o meu agora, sou estudante da area, estou muito feliz com tudo que pude aprender fazendo esse portfolio, so tem um probleminha, meu botão de menu nao esta funcionando, voce ensina em outra aula ou eu fiz algo de errado mesmo ? rsrs

@InteliogiaDev 7 месяцев назад

Vc pode ter feito algo errado kkkkkk no vídeo eu ensinei como fazer ele abrir, então se vc fez algo que fuja minimamente do que ensinei o seu não vai funcionar kkkkk olha se vc trabalhou certinho no Javascript. Se houver uma vírgula fora do lugar vai dar erro

@igormoraes1205 2 месяца назад

fiz o projeto todinho mas o meu código sô aparece o menu mobile quando esta na versão desktop ja tentei jogar direto dentro do media mas mesmo assim não aparece me ajuda

@joseailtom2074 29 дней назад

olá boa noite, meu botão de abrir menu não funciona sempre, tipo ele funciona 2 vezes ai para alguem com esperiencia para me ajudar ??????? to nessesitado

@fmoliveira30 8 месяцев назад

Querido gostei bastante desse seu projeto. teria como vc tirar o menu mobile, quando ele estiver em tela normal sem ser de celular? Pois ele fica mostrando quando esta em tela normal. so queria que ele aparecesse quando a tela ficar em modo mobile.

@emillyferrao28 8 месяцев назад

le o comentario fixado dos comentaios desse video, ele explicou sobre isso

@fmoliveira30 8 месяцев назад

@@emillyferrao28 Brigado querido, realmente ta lá. Eu que não vi.

@joaotamborindeguy 15 дней назад

o meu JS não funciona

@eliannasantos6645 2 месяца назад

Meu menu não está aparecendo 😕

@gustavobentoo 7 месяцев назад

Boa noite, esse projeto ficou incrivel! teria como vincular aquele formulário ao enviar a mensagem ir para o Email?

@InteliogiaDev 7 месяцев назад

Opa Gustavo, muito obrigado! Olha esse vídeo aqui, acho q pode te ajudar: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-OGs5bW5l8AE.html

@sarahvitoria4497 5 месяцев назад

Pode me ajudar, por favor? Deu tudo certinho aqui só a interação no mobile do minhas especialidades e do portifolio não aparece com um click no safari, tenho que apertar e segura, porém no chrome funciona perfeitamente

@InteliogiaDev 5 месяцев назад

Oi Sarah, tudo bem? Pode explicar melhor, pq n entendi muito bem sua dúvida kkkkkk

@frankguitarr 3 месяца назад

Mano como fazer aquele polígno da foto

@jandersonlira4906 10 месяцев назад

Fiz todas as aulas, projeto finalizado. 🥳 Professor, qual é esse tema que o senhor usa, e qual é o truque para aparecer aquele comentário quando o senhor cria uma tag?

@InteliogiaDev 10 месяцев назад

Senhor? kkkkkkk calma que ainda to muito jovem kkkkkk. Sobre o tema eu utilizo o pacote de temas da RAINGLOW, ele ta disponível na loja de extensões do VS Code. E sobre o truque é apenas uma boa prática kkkkkk basicamente eu crio uma tag e dou uma classe para ela, aí eu vou até onde essa tag de fecha e adiciono um comentário com o nome da classe que dei para ela entende? Então meio que não é um truque, é algo manual que faço kkkkkk Agora se vc quiser o atalho para criar comentários, você pode apertar CTRL + ;

@jandersonlira4906 10 месяцев назад

@@InteliogiaDev sobre chamar de senhor, é questão de costume. Muito obrigado pela dicas, vou usar.🤝

@yanjansen6761 3 месяца назад

A barra do menu mobile desconfigurou a versão desktop do meu site. Já modifiquei os códigos desse jeito mas continua. O que pode ser?

@InteliogiaDev 3 месяца назад

No comentário fixado tem a solução 😁

@victorsedlmaier2801 7 месяцев назад

Estou com uma dificuldade, o padding na tag a do menu-mobile não está sendo aplicado, consegue me ajudar?

@pedroviniciusoliveralemos1992 6 месяцев назад

No X ou nos elementos listados ?

@Kainan21 5 месяцев назад

como faço pra fixar o menu para que fique enquanto eu rolo pela página?

@Atilon.dev40 4 месяца назад

Basta usa no menu a propriedade position:absolute e escolher a direção ex: top:0; ou right,left,bottom. Espero ter ajudado,mas só asta adicionar a propriedade position absolute e definir a direção.

@Atilon.dev40 4 месяца назад

Ou ultiliza a propriedade position fixed e aumenta o z-index se a imagem estiver embaixo.espero ter ajudado mano.

@emillyferrao28 8 месяцев назад

ta, mas pra que serve esse menu pq se clicar neles nao vai direto pra parte clicada, tipo clico em "sobre" mas nao vai pra sobre, fiquei sem entender isso

@emillyferrao28 8 месяцев назад

e tbm o botão contato nao tem link nenhum dentro, os icones das redes sociais tbm etc, como faz isso??

@emillyferrao28 8 месяцев назад

outra coisa q tbm reparei, é q no mobile nao tem o botão de entrar em contato, q na minha ideia cairia direto no whatApp

@emillyferrao28 8 месяцев назад

desculpa tanta pergunta, é q eu pretendo usar esse portfolio como meu proprio portfolio pra procurar emprego, por isso to perguntando esses detalhes kkkkk

@InteliogiaDev 8 месяцев назад

Oi Emilly, fique tranquila, pode perguntar a vontade kkkkkk vamos por partes 😁 Para criar a rolagem automática ao clicar no menu vc pode usar o msm conceito desse vídeo aqui ó: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-86OWrZEKkKs.html É muito simples, só replicar a msm ideia. Sobre os links para as redes sociais vc precisa adicionar os seus links dentro do "href" da tag Exemplo:

@InteliogiaDev 8 месяцев назад

Ah e no mobile tem o botão de contato, então vc precisa criar um link de conversa do whatsapp para inserir no "href" da msm forma que usamos no exemplo q te passei no comentário anterior. Para criar um link de conversa, vc pode chegar no Google e pesquisar "criar link de whatsapp". Vão ter várias opções de site, pode entrar no primeiro, inserir o número do whatsapp q deseja, pode personalizar uma mensagem também e aí só gerar e copiar o link, aí pode colocar no href da tag 😁