Тёмный

Como criar um menu lateral com HTML, CSS e JS - Parte 1/2 

Inteliogia - Dev's Insights
Подписаться 14 тыс.
Просмотров 42 тыс.
50% 1

✅ Conheça o treinamento Modo Front-end e crie projetos incríveis do absoluto zero: bit.ly/3KY8mpn
Utilizando HTML, CSS e JavaScript, criamos um meu lateral ou apenas um side menu. Como foi divido em duas partes, nessa primeira parte fizemos uma solução utilizando de pseudoclasse 'hover' que por si só já entrega muita coisa.
Na segunda parte iremos deixar ainda mais dinâmico pois utilizamos o JS e deixamos mais automatizado, para ver a segunda parte, basta acessar o link logo abaixo:
✅Como criar um menu lateral com HTML, CSS e JS - Parte 2/2:
• Como criar um menu lat...
✅ Acesse a biblioteca de ícones Bootstrap:
bit.ly/3KNufbI
💡 Seu projeto ficou pronto? Coloque ele no ar com a Hostinger e ganhe até 20% de desconto:
hostinger.com.br?REFERRALCODE=1BRUNO76
✅ 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: / inteliogiatech
✅ EMAIL PARA CONTATO EMPRESARIAL (não tiro dúvidas por aqui):
🔹 contato@inteliogia.com
✅ É isso #programMaker, seguimos por aqui, codando 👨🏼‍💻

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

 

7 мар 2023

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 89   
@marlanbastoslima5752
@marlanbastoslima5752 Год назад
Parabéns irmão! muito bom o conteúdo.
@seunomeaqui_
@seunomeaqui_ 10 месяцев назад
Aprendendo muito todos os dias!
@EngBrennoAzevedo
@EngBrennoAzevedo Год назад
Excelente aula. Já estou inscrito. Todas as linhas bem explicadas.
@thawandsoncosta4676
@thawandsoncosta4676 Год назад
integrei esse menu no meu projeto e ficou muito legal, parabéns pelo conteudo
@BecoDosMangas
@BecoDosMangas 11 месяцев назад
Parabéns pelo vídeo e pela didática!
@assisgold
@assisgold 9 месяцев назад
Man um dos melhores vídeos que vi, vc sempre direto ao ponto e simples. Muito obrigado pelo conteúdo. Parabéns 🥳🥳🥳🥳
@feliperamos3231
@feliperamos3231 16 дней назад
Didática perfeita. Direto ao ponto.
@franciscosousa5185
@franciscosousa5185 6 месяцев назад
Entrei por acaso no seu canal. Gostando bastante do conteúdo.
@danielpbianchi
@danielpbianchi 8 месяцев назад
Muito bom seu conteúdo. Obrigado
@marcosgomes6110
@marcosgomes6110 11 месяцев назад
Mano, muito obrigado por compartilhar seu conhecimento. Já estou incorporando aos meus Dashboards do BI esse menu incrível.
@douglascgoes
@douglascgoes 8 месяцев назад
Excelente didática e ótimo vídeo.
@joserubensferreira7244
@joserubensferreira7244 7 месяцев назад
Top d+, totalmente direto ao ponto!!!! Projeto muito bem explicado! Os dos melhores que já vi, parabéns!!!!!!!
@jacksonrodrigues1778
@jacksonrodrigues1778 6 месяцев назад
Conteúdo sensacional e muito útil! Sem enrolação e com uma didática que dá gosto de assistir. Parabéns 👏🏽👏🏽👏🏽
@carlapatodeskate4323
@carlapatodeskate4323 7 месяцев назад
Cara, muito sua explicação é incrível
@RivaldoCarmo
@RivaldoCarmo 10 месяцев назад
Top, Top, Top, sem palavras... 👏👏👏
@gafanhotoaprendiz358
@gafanhotoaprendiz358 2 месяца назад
Ganhou um inscrito irmão, obg pelo ensinamento.
@brunolima5214
@brunolima5214 10 месяцев назад
Muito bom, ficou lindo! Obrigado ❤
@iracos5118
@iracos5118 5 месяцев назад
Parabéns pela iniciativa em disponibilizar em tão boa vontade seu conhecimento. Parabéns tbm pela simpatia e pela didática, ensinou melhor que o meu professor.
@felipephex
@felipephex Месяц назад
massa top demais me ajudouy mt
@matheusmarcolongo6745
@matheusmarcolongo6745 Месяц назад
Muito bom irmão!
@silvanocarlossilvio
@silvanocarlossilvio 2 месяца назад
Muito obrigado pela aula me salva-se irmão
@joycesouza0117
@joycesouza0117 15 дней назад
Adorei o video❤
@rodrigodesousa7160
@rodrigodesousa7160 Месяц назад
Aula sensacional, obrigado! Vou utilizar no meu sistema PHP.
@thiagoduarteoliveira
@thiagoduarteoliveira Год назад
Ótimo conteúdo, muito obrigado por passar um pouco de seus conhecimentos. abs. OBS: Agora q terminei a parte 1 vou aprender um pouco mais com a aula 2. vlw.
@LuisRodriguez-fr2bv
@LuisRodriguez-fr2bv 8 месяцев назад
Sou uruguaio, falo espanhol, mas entendi tudo o que foi explicado. Muito obrigado
@liviaolifer
@liviaolifer 9 месяцев назад
amigooo obrigada viu! me ajudou muitooooo!
@victorluz234
@victorluz234 3 месяца назад
ul>li*5.item-menu>a>span.icon+span.txt-link ----> ATALHO PARA CRIAR TODA ESTRUTURA DO ELEMENTO UL no VsCode. depois de colar no VsCode, apaga o "k" no final, escreve dnv e da TAB
@tecnokap
@tecnokap Год назад
Muito bom, tmj é nois
@mundonimes
@mundonimes 8 месяцев назад
Video muito bom
@pressstart.multiverse
@pressstart.multiverse 5 месяцев назад
CHUUUUUUUUUPPPPAAAAAAA PRIMENG E ANGULAR! O cara aqui no vídeo fez muito melhor e com uma simpatia fora do normal!!! Me salvou em um projeto! #gratidão .
@natanaelfarias327
@natanaelfarias327 Месяц назад
tô igual a ti mano
@andrek9999
@andrek9999 Год назад
Ótimo conteúdo bem explicadinho, didática muito boa Já ganhou mais um inscrito aí, parabéns pelo vídeo. Sucesso! 👍 Partiu parte 2
@InteliogiaDev
@InteliogiaDev Год назад
Seja bem vindo mano, parte 2 ta aí para a gente curtir kkkkkkk
@pedrofelipe1118
@pedrofelipe1118 Год назад
Parabéns, brother! conteúdo muito bom mesmo. Estou aguardando a parte 2 desse vídeo.
@InteliogiaDev
@InteliogiaDev Год назад
Fala irmão, vlw msm kkkk semana que vem sai a parte 2 😁
@AnaMariadaSilva-lb5nb
@AnaMariadaSilva-lb5nb Год назад
Nossa! Adorei sua didática! Parabéns!
@InteliogiaDev
@InteliogiaDev Год назад
vlw Ana! 😁❤️
@SnowyRidge
@SnowyRidge Год назад
vc é muito bom cara, na moral, tu é foda
@InteliogiaDev
@InteliogiaDev Год назад
Pow mano vlw msm cara kkkkk Tmj sempre ❤️❤️👊👊
@user-gh9je7mk9o
@user-gh9je7mk9o Месяц назад
Opa estou em dúvida fui fazer no meu e até deu certo, porém quando eu adicionei position fixed os outros ícones sumiram e ficou só o home
@thiagopires5407
@thiagopires5407 11 месяцев назад
parabens pelo conteudo...top 10!!!
@InteliogiaDev
@InteliogiaDev 11 месяцев назад
Valeu Thiago! 👊🏾❤️
@rixxk1811
@rixxk1811 3 месяца назад
Como eu posso fazer pra que só fiquei opções não fiquem pra fora, aparece só quando clica naquelas 3 barrinhas ?
@loscortes6955
@loscortes6955 2 месяца назад
Consigo usar esse menu incluindo ele em meu tema na “loja integrada”?!
@RuanSMC
@RuanSMC 4 месяца назад
Mano, ele está responsivo no modo mobile? Queria aprender a fazer isso também.
@MaraBranco-jj9ku
@MaraBranco-jj9ku 6 месяцев назад
Como que eu consigo unir o ficheiro html com o ficheiro css??
@LeonardoBradoksOficial
@LeonardoBradoksOficial 5 месяцев назад
Amigo nao estou achando este projeto no seu github poderia mandar o link?
@micaele1219
@micaele1219 Год назад
amei!!!
@InteliogiaDev
@InteliogiaDev Год назад
Que bom q gostou, Micaele hehehe ❤️👊
@newbe379
@newbe379 6 месяцев назад
o span seri so pra destacar um texto nao é correto usar div ou so a class ou id para o menu
@kaylannevasconcelos761
@kaylannevasconcelos761 7 месяцев назад
o código do css não tá sendo aplicado junto com o HTML no meu :(
@InteliogiaDev
@InteliogiaDev 7 месяцев назад
Oi Kayla Então, acredito que vc não chamou o CSS corretamente, tenta refazer como faço no vídeo e vê se isso corrige 😁
@almeida8464
@almeida8464 Месяц назад
Rapaziada preciso de ajuda. Primeiramente otima aula parabens mano, mas minha barra lateral faz com que eu nao consiga inserir outros elementos no body, os elementos acabam por ficar embaixo dela alguem pode me ajudar ?
@PedroHenrique-vt6ud
@PedroHenrique-vt6ud 11 месяцев назад
Excelente video, usei sua ideia para implementar um projeto de intranet da empresa. Parabéns!
@InteliogiaDev
@InteliogiaDev 11 месяцев назад
Poow mano aí sim. Ainda bem que consegui te ajudar nessa kkkkkk
@PedroHenrique-vt6ud
@PedroHenrique-vt6ud 11 месяцев назад
@@InteliogiaDev tmj
@claytonbv79
@claytonbv79 7 месяцев назад
Muito bom o conteúdo! Parabéns! Uma dúvida. O conteúdo que estiver no resto da página vai acompanhar o movimento do menu? Obrigado!
@InteliogiaDev
@InteliogiaDev 7 месяцев назад
Muito obrigado Clayton. Então durante a produção do código eu deixei ele como fixo, então se a página rolar, o menu fica fixo sim 😁
@user-st6ub2kb8h
@user-st6ub2kb8h 9 месяцев назад
Gostei muito da sua ideia, tem algum problema eu me inspirar nela pra um projeto da minha empresa? Muito Obrigado,otimo conteúdo.
@InteliogiaDev
@InteliogiaDev 9 месяцев назад
Fala mano, pode usar a vontade kkkkkk
@sergiolanga-8185
@sergiolanga-8185 10 месяцев назад
❤❤❤❤
@vitorsantos-ix9zy
@vitorsantos-ix9zy 10 месяцев назад
Mim perdi css, não sei usar
@fabiopereiraaraujodasilva8449
@fabiopereiraaraujodasilva8449 8 месяцев назад
Gostaria de entender no caso do alinhamento dos icon com o texto dos menus foi usado um line-height ao invés de um align-items:center no caso de star em um display:flex, qual o impácto disso?
@InteliogiaDev
@InteliogiaDev 8 месяцев назад
O line-height é a altura entre as linhas de um texto. Por padrão, msm o texto tendo uma única linha, o CSS aplica um line-height o que pode deixar o texto desalinhado de outros elementos. Então para resolver isso podemos apenas diminuir o line-height do texto até ficar alinhado, e como essa propriedade já resolve, aí não é necessário usar o align-items: center. Mas o align-items: center iria resolver tbm sem problema nenhum. Apenas optei por usar o line-height
@wallisonalmeida9006
@wallisonalmeida9006 11 месяцев назад
Bom dia !!! Extensão voce usou para aparecer essa sombra na hora de voce usa as class exemplo:
@InteliogiaDev
@InteliogiaDev 10 месяцев назад
Não utilizei extensões para aplicar esse efeito, para ser sincero nunca reparei nisso kkkkkkkk acredito que seja do tema que eu esteja usando que se chama Rainglow, só pesquisar na loja de extensões do VS Code
@wallisonalmeida9006
@wallisonalmeida9006 10 месяцев назад
Bom dia !!! outra pergunta voce tem video ensinando a fazero submenu ? nesse mesmo modulo ??/
@InteliogiaDev
@InteliogiaDev 10 месяцев назад
Ainda não Wallison. Estou trabalhando em um vídeo que fale sobre isso. Como criar um submenu 😁
@EngBrennoAzevedo
@EngBrennoAzevedo Год назад
Uma dúvida. Se eu tiver sub-menus e quiser que eles abram ao clicar no menu e deslize de cima pra baixo, é muito complicado de fazer?
@InteliogiaDev
@InteliogiaDev Год назад
Fala Brenno, nesse projeto não ensinei a fazer isso para não ficar muito longo kkkkk mas assim, para quem tem o conhecimento não é difícil de fazer não kkkkkk, vai exigir habilidades com HTML e CSS para incrementar no menu, e javascript para adicionar o dinamismo. Então eu diria q a dificuldade é relativa 🤣
@EngBrennoAzevedo
@EngBrennoAzevedo Год назад
@@InteliogiaDev vi um vídeo aqui que mostra como fazer, vou tentar e adaptar a minha situação, confesso que me enrolo muito as vezes. Não é minha área, estou estudando programação faz pouco tempo, é um mundo gigante. Você é um bom profissional, gosto das suas aulas, são bem explicadas. Parabéns.
@brunonts
@brunonts Год назад
Hey! Qual tema está usando ?
@InteliogiaDev
@InteliogiaDev Год назад
Fala mano, eu uso o conjunto de temas da One Dark Pro
@felpsgamer3258
@felpsgamer3258 6 месяцев назад
como posso fazer para essa barra ficar do lado direito da tela?
@MarianaRbm
@MarianaRbm Месяц назад
Oii @felpsgamer3258 eu também tive essa dúvida quando estava fazendo! Vou te passar as alterações que fiz: No CSS, em 'nav.menu-lateral' você precisa alterar: padding: 40px 1% 40px 0; right: 0; O prof usou left 0, então para que fique do lado direito, ao invés de left deve ser right. Espero que tenha entendido! : )
@testandomeucanal1243
@testandomeucanal1243 10 месяцев назад
Muito boa suas aulas =)
@goku-jp1gg
@goku-jp1gg 8 месяцев назад
Tem como enviar link do projeto pra baixa o meu deu erro
@InteliogiaDev
@InteliogiaDev 8 месяцев назад
Na descrição do vídeo tem o link para o meu GitHub, lá você pode pegar os códigos que usamos aqui no canal 😁
@viniciussouza5302
@viniciussouza5302 Год назад
como faço pra colocar o conteudo no meio
@InteliogiaDev
@InteliogiaDev Год назад
É um pouco mais complexo kkkkkk deixo para explicar isso em outro vídeo
@RenatoAugusto1992
@RenatoAugusto1992 10 месяцев назад
Também gostaria de saber, quero criar um menu superior e um footer e conseguir criar um conteúdo no meio desses 2
@raimundoclessyo8943
@raimundoclessyo8943 6 месяцев назад
Mais uso de FlexBox e Menos Espaçamento interno iria ficar show na minha humilde opinião! Mas de qualquer forma ficou lindo 🎉❤
@InteliogiaDev
@InteliogiaDev 6 месяцев назад
Fala Raimundo, obrigado pela dica irmão. Mas nesse vídeo optei por usar padding para ensinar essas funcionalidades. Só lembrando que não existe uma maneira certa ou errada de 'programar' kkkk se você chegou a um resultado igual ao meu e usando outros métodos, tbm fica show kkkkk
@raimundoclessyo8943
@raimundoclessyo8943 6 месяцев назад
@@InteliogiaDev É isso aí, irei usar o seu layout em projeto meu 😁💪🏼
@Pedraions
@Pedraions 11 месяцев назад
Tem como transformar uma imagem em um icone desse?
@InteliogiaDev
@InteliogiaDev 10 месяцев назад
Recomendo vc visitar o site Flaticons, ele é uma biblioteca de ícones paga, mas possui alguns gratuitos
@wesleysilva3363
@wesleysilva3363 8 месяцев назад
@bostimansgames
@bostimansgames 8 месяцев назад
cara esse negocio de ter que voltar em outro video pra ver algo quebra muito a dinamica, eu sei que isso é bom pra vc mas é ruim pra quem esta no começo. mas sou muito grato pelos seus videos parabens é mais uma critica construtiva
@InteliogiaDev
@InteliogiaDev 8 месяцев назад
Fala mano, agradeço pela crítica kkkkk mas eu faço isso não é pq é bom para mim, mas para evitar que o vídeo fique maior do que já está. Imagina só eu ter que explicar como configurar as fontes do projeto? Além enrolar muito vai provocar uma quebra na linha de raciocínio do vídeo, vai entrar num assunto nada a ver com o projeto principal e o vídeo ficaria imenso. Então é mais por uma questão de praticidade, para deixar o vídeo mais direto possível. 👊🏾👊🏾
Далее
Learn CSS Position In 9 Minutes
9:26
Просмотров 1,9 млн
Como criar um MENU PERSONALIZADO com HTML e CSS
23:14