COMO FAZER UM MENU RESPONSIVO SIMPLES COM HTML E CSS - Upgrade
Вставка
- Опубліковано 11 вер 2024
- Fala pessoal, nesse vídeo mostro como estar desenvolvendo, de forma simples e didática, um menu responsivo utilizando basicamente HTML e CSS, o foco do tutorial é ajudar pessoas que estão começando no desenvolvimento WEB e mostrar um pouco do responsivo.
Bom, não sei o que rolou no meio do vídeo que deixou a tela um pouco travada, me perdoem, mas ali basicamente eu adicionei uma margem e uma altura de zero pixels na ul, mals ai galera.
- Código do menu feito no vídeo: github.com/Hel...
Agradeço ao conteúdo, fui pegando um pouquinho de explicação aqui, um pouquinho de explicação em outros vídeos e consegui obter o resultado esperado.. obrigado pelo conteúdo
Essa base é muito boa, pra você aprimorar esse é o verdadeiro conteúdo pra iniciante, só não aprende se não quiser
Gosto de vídeos assim, que o cara quebre a cabeça junto com a gente!!!
Parabéns pelo vídeo Jão!!
kkkk tamo junto Felipe, valeu pelo apoio
Verdade isso me ajudou muito no meu aprendizado. Parabéns pelo vídeo.
kkkkkkkkkkkkkkkkkk
@@UpgradeDev qual o traço depois do focus mano? vlws ai
@@stefan10087 Opa mano, acho que vc ta falando do ~ (til)?
Stardew, transformice e wpp de mine, entrei no vídeo mas depois de ver isso já vou me inscrevendo kk
kkkk tmj
Meus parabéns, simples, fácil e rápido, porém é algo muito importante. Para min que estou iniciando em front end e ainda não quero me apegar a JS por enquanto, um passo de cada vez. Perfeito
Valeu cara, mas o js é mais simples do que parece, bora por a mão na massa e desenvolver essa linguagem ai Ademir
@@helitonlima7342 eu programo em PHP utilizando framework Laravel, dei um passo atrás para fortalecer Front End, praticando CSS com vários projetinhos. CSS puro da para fazer muita coisa, irei para JS já focando utilizar uma framework React ou Vue. Mas vamos que vamos, só não pode parar 🚀🙅🏽♂️
@@ademirsconstante2796 Boa!
Mano parabéns, n enrolou nem um segundo para começar o vídeo.
+1 inscrito.
Valeu cara, tmj
Vídeo muito bom mesmo! Fazia tempo que eu buscava um tutorial simples e EFICIENTE assim. Parabéns!
Valeu Felipe!!
Cara parabéns, ficou muito bom! Mas pra você conseguir acompanhar o layout do site enquanto programa, usa a extensão LIve Server. Aí não precisa ficar carregando a página toda hora.
Valeu mano, não sabia dessa
caraca que vídeo sensacional, adorei sua didática, e este projeto ficou muito foda, meus parabéns amigo!
o cara me prendeu em um vídeo de 17:47 fazendo parecer 5:00 min hahahah... muito bom mano, top conteúdo 👍🏾🚀
kkkk tmj
Parabéns pelo conteúdo, bem completo, objetivo e simples de entender. Abç.
Adaptei aqui no meu código e deu certo, obrigado por compartilhar, ganhou um inscrito!
o cara colocou a ending de atack on titan no video kkkkkkk ganhou mais um inscrito
kkkkkk
E ai Upgrade beleza ?
Cara você tem algum tipo de contato ?
Estou com algumas dificuldades para ter noção de como posicionar elementos.
Você explica de uma forma simples e clara.
Mano muito obrigado salvou meu trabalho de escola
Me salvou to apanhando de react aqui e o seu foi o único que consegui fazer !
Boa mano, tamo junto
Ficou show! Bem simples e direto!
Valeu
Caraca que dahora, continua assim
ajudou, sim. ajudou muito. obrigado pelo conteudo.
Parabéns irmão, didática ótima e objetiva .
Gosto de vídeos assim q faz e mostra na hora as dificuldades apresentadas
Valeu Alberto
Muito show. Valeu mesmo. Ajudou bastante. Já tem mais um inscrito.
Valeu
Ajudou demais man.
força no teu canal! vídeo ótimo!
Valeeu
Caramba, muito bom velho. Simples e eficiente.
Cara, to fazendo um tcc e já foi de grande ajuda, valeu demaiss!!
Que bom, fico bem feliz em poder ajudar 😉
gostei.. to começando.. parada simples.. valeu jovem!
Tú é brabo, agradeço
Muito bom, assisti o seu vídeo pois estava com algumas duvidas e vc tirou todas elas obrigado
Valeu Wittor, tamo junto
Me ajudou para caramba, valei parça
Vlw mesmo cara, agora sei criar um menu, o bom é que posso aprimorar e personalizar :)
Boa cara
Top de mais!! Show de aula 👏
Valeu Jhonantan
Perfeito!
video show, usa o plugin do vscode liveserver, vai te ajudar a nao precisar ficar apertando f5 para visualizar as mudanças.
Tranquilo rafael, valeu
Adorei, excelente!
Vídeo muito bom com excelente conteúdo.
Muito bom o video, fácil de entender!
Show. Direto!
Excelente conteúdo !! Parabéns !
Cara!!! top demais o vídeo. ajudou demais.
Valeu Diego! Fico feliz em poder ter ajudado
Me ajudou muito, obrigada
Muito bom, vc é foda!
Simples e objetivo !!!!
Alguém testou este exemplo em um celular? em dois celulares meus o menu não passou para botão e a fonte ficou muito pequena, difícil de ler. Alguma dica?
Ajudou brother. Obrigado!
Obrigado pela ajuda, abraço.
Parabéns pelo conteúdo!!!
Bgdd Luma
vlw mesmo mano ajudou muito ! TOP!
Mano vc me ajudou de mais, vlw
acho que ficou um bug ai! quando vc tira o mouse de cima do icone e coloca no menu em si, ele retrai. Isso pq vc usou o focus e está apenas no icone
🤔 Estou vendo aqui e faz sentido mesmo, acho que vale fazer um outro vídeo, quando fiz esse, queria mais mostrar alguns truques de css
Como colocar outros componentes como imagem, checkbox, e alinhar a direita, alinhado com os itens de menu
Gostei! Parabéns!
Obrigado
amei o tutorial!!
+1 inscrita
Obrigado Giovana 😊
Boa tarde!
Como eu faço para ancorar meu menu?
Salve manow, consegui fazer o menu como vc explicou porem quando click no link tipo Perfil e etc ele fecha o menu mas mesmo defino um endereço par acessar ele não acessa vc sabe com eu posso resolver isso ?
Muito bom o conteúdo! Quando sai o próximo vídeo de Ionic?
dia 15
Aeee mlk.... SHOWW
Valeu Stefano
ótimo vídeo e didática irmão, nesse caso do menu daria pra fazer usando display: none e depois no focus alterar? fiz desse jeito aqui e aparentemente funcionou
Pode ser também, css é bom por causa disso alias, existem diversas formas de se fazer a mesma coisa
Cara me explica como vc fez. De inicio também tentei usar a propriedade Display, no caso Display None e depois usei o Focus colocando um display block. Mas não funcionou
Show de bola!!!
Como faz para sair do menu clicando no menu ao invés de ter que ir até a opção 'Sair' ? (Eu substituí a opção Sair por Voltar para poder fechar o menu caso não queira clicar em outra opção.)
Fala Carlos, da pra usar um checkbox invisível por cima do botão, então usar o evento :checked pra controlar o menu
Muito bom mano !!!
Adorei o seu video, me ajudou bastante! Poderia me informar como que faço pra deixar a barra de menu sempre ao topo? Pra quando rolar a pagina, a barra continuar em cima? coloquei Position: fixed; em nav porem tudo diminui, ficou tudo errado. Agradeço!
Position fixed
Oii Camila, só adicionar "nav { position: fixed; width: calc(100% - 40px); } ", o calc no width é pra remover os pixels a mais por conta do padding, depois no @media, coloque o " nav { width: 100% } ", por conta de removermos o padding, não é necessário o calc, espero ter ajudado
Deve colocar a propriedade height definida com um valor fixo. Por exemplo:
height: 80px;
vlw mano ajudou de mais!!
Nao sabia q dava para fazer isso so com css. Eu faço usando java script. Vlw ^^
Pra casos mais complexos o JS é mais recomendo pq da pra ter um controle melhor, mas em casos simples, só o css ja basta
O meu nao esta dando certo, fica dando erro, pois o cabeçario não fica em cima fixo
Ola Kemelly, acho que não entendi muito bem a pergunta, você quer que o menu não suba quando o site é scrollado para baixo? Se for isso, colocando 'position: fixed' o problema é resolvido
aguardando próxima aula
Ando um pouco sem tempo, mas assim que der vou dar um gás bom no canal, valeu pelo apoio
Mano, legal, mas essa estratégia do focus não é a mais adequada, porque não dá pra clicar no link do menu responsivo ! Clicar no link é um "desfoque", fechando o menu mas não pegando o comando de ir pro link.
Uau! Realmente cara, não sei como não reparei nisso, talvez esse fim de semana eu re faça esse video fazendo de outra forma, valeu cara
qual seria uma alternativa?
Muito bom
Valeuu
otimo video!!
Muito top mano
Valeu Ygor
Parabéns!
Valeu Adams
Opa Up, fiz seu codigo aqui, quando eu clico no botao nao aciona o height ou nao esta funcionando pode me ajudar?
Fala Davi, pra conseguir te ajudar eu precisaria ver ser código
muito pratico
top dms
Valeu João ✌
Eu to com uma duvida, fiz um site aqui, ta bonitin, mas quando abro ele, ele fica com a opção de ir pro lado, msm n tendo nada no lado, to mt bugado
pode ser problema com o width de algum componente que pode estar estourando o limite da tela
@@UpgradeDev Sim sim, eu resolvi ja, era o position relative q eu tinha usado e jogado mt pro lado o conteudo kladsjklasd
@@UpgradeDev Faz mais videos ae man, seus videos explicando são mt bons
@@ajk6690 Vou fazer mano, só preciso deixar de ser vagabundo akkaka
@@UpgradeDev entendo asdkljlsdkadsa
Oloko tenho o msm microfone
oi, então tô tentando fazer esse menu para um trabalho da escola, mas quando tô fazendo os códigos, na hora de abrir nas pastas para vê como tá ficando, só aparece na forma de documento( não tá indo para o navegador) acho que é por conta daquele programa que vc ativou antes, meu prof usa o mysql, porém eu não sei usar, teria como vc me explicar se é esse problema ou não, e se for como posso resolver. obg e pfvr me ajudem pq já não sei sei mais oq fazer e tenho que entregar esse trabalho para passar de ano kkkkkkk
ok, eu consegui tirar elee do formato de documento, ai tava dando tudo certo, mas na hora que chegou naquele treco de média, começou a não funcionar kkkkkk
revisei tudo e tá certo, será que é por conta daquele programa que falei, até pq na hora que aperta para inspecionar, nem aparece ele ali
@@mariaeternavitoria2455 Olá maria, não entendi muito bem o problema, o que seria o 'treco de média'?
Tem algum link pra mim copiar esses códigos
Tem link do github na descrição 😃
6:34 olha o carro do ovo
kkkkkkkkkk
15:00
Cara já te falaram que você parece o criador do Facebook? Kkkkkkkkkk
kkkkkkkk essa eu nunca ouvi vi não
@@UpgradeDev Cara se vc pegar uma foto sua e botar do lado uma foto do criador do Facebook vc vai ver kkkk
@@UpgradeDev Estou me referindo a Mark Zuckerberg
@@phd007 🤣🤣
meu saiu cagado
Porque ir no cmd? primeiro
tinha acabado de parar de usar linux, nem me toquei, tanto faz criar pelo cmd ou por click
@@UpgradeDev entendi... obrigado pelo retorno.
Cara, mais devagar aí com os Alt+Tab.
Por quê não fizeste com dropdown?
Ícone responsivo muito cachorreiro. Ainda bem que o menu não é profissional!
Seu menu "beleza", é inoperante em navegador firefox 93.0
14:35, congela o vídeo e não se pode mais ler o código.
Este "h1" aí (Completamente inútil e problemático, se for usar isto fora da "nav") é porquê do código que vc copiou tinha o "h1" fazendo parte da formatação, né? kkkkkkkkkkkk
Cacaca isto aí q vc fez de definir "height". Se criar uma "section" embaixo da "nav", o que pôr dentro dela vai aparecer no seu menu "responsivo".
Gostei da musiquinha psicopata no final do vídeo 17:38 kkkkkkkkkkkkk
Boa dia Heider.
Fiz desse jeito pois foi o primeiro que veio À mente.
No 14:35 foi um erro no gravador pois meu notebook não era dos melhores.
Não lembro se disse no vídeo, mas sou dev jr, estou sempre aprendendo, não sabia que o "h1" pudesse ser problemático e você não explicou o que exatamente faz ele ser problemático só menosprezou o vídeo.
Ok, então quando o vídeo for criando um menu responsivo com uma section embaixo farei de outra forma.
É cada maluco nesses comentarios