Тёмный

Criando um menu horizontal com HTML e CSS 

SatellaSoft
Подписаться 13 тыс.
Просмотров 125 тыс.
50% 1

Para esse projeto, criamos uma tag do tipo nav já que ela é a tag semântica destinada a agrupar elementos de navegação, como no nosso caso, um menu. Dentro da tag nav, usamos uma lista não ordenada, mas poderíamos também utilizar a ordenada, não haveria diferença, já que estilizamos ela no CSS.
Curso PHP com MVC: academy.satellasoft.com/cours...
Artigo oficial com o código: satellasoft.com/artigo/css/cr...
Academy SatellaSoft: academy.satellasoft.com

Наука

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

 

2 сен 2020

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 145   
@gregorioborges21
@gregorioborges21 2 года назад
Muito obrigado! É muito bom ver aulas de pessoas que explicam tudo que estão fazendo, sem deixar nada de lado. Me ajudou demais!
@thiagosilva-lz3kk
@thiagosilva-lz3kk Месяц назад
Cara muito boa a maneira como você explica. Parabéns.
@devClaudinho17
@devClaudinho17 2 года назад
Estou aprendendo a criar cabeçalhos e menus de navegação e vídeos como esse seu tem me ajudado bastante, e eu aprendi a fixar algum item na direita ou esquerda que não sabia antes, mas graças a seu vídeo aprendi e estou colocando em prática deixando meus sites cada vez mais bonitos, muito obrigado pelo conteúdo de qualidade e continue postando aulas didáticas para a comunidade, abraços vlw
@marcelonascimento9851
@marcelonascimento9851 2 года назад
Nada mais nada menos que sensacional, PARABÉNS pelo vídeo, muito bom assistir aulas assim.
@nathyoliveira3355
@nathyoliveira3355 2 года назад
Muito bom seu conteúdo. MT prático e detalhado. Obg pela excelente aula!
@MrEdenBezerra
@MrEdenBezerra 3 года назад
Excelente abordagem, professor 👏👏👏
@fabriciolima9583
@fabriciolima9583 3 года назад
Muito obrigado por esse aprendizado, abordagem muito bem explicativa!!!!!!
@guuhgo
@guuhgo 10 месяцев назад
Vim assistir porque eu queria fazer uma estrutura de abas no meu projeto, mas o vídeo não era sobre isso, mesmo assim assisti completo e prestando atenção. Quando fui fazer as abas no meu projeto, eu estava com um problema que, quando eu usava " width: 100% " nas "abas", ela quebrava o layout, a largura da aba ficava sobrepondo a largura da tag mãe, não respeitava o padding, pesquisei algumas possíveis soluções mas nenhuma resolvia, aí lembrei do que você falou sobre o box-sizing: border-box e apliquei, resolveu na hora, muito obrigado. Vim em busca de cobre e encontrei foi ouro
@JuniorSantos-di4lg
@JuniorSantos-di4lg 2 года назад
Cara, muito bom mesmo!! Muito obrigado, comecei os estudos tem um certo tempo de HTML e CSS, esse vídeo me ajudou muito agora na parte de menu, navegações mais ainda, vlw sucesso!!
@DarioPinheiro
@DarioPinheiro 3 года назад
Muito bom. Direto e didático, sem firulas.
@willamssilva7030
@willamssilva7030 10 месяцев назад
show de bola essa aula, me ajudou muito, top demais!!!🤜🏼🤛🏼👍
@monys140
@monys140 Год назад
Pow, que aula excelente essa hein professor?! Super didática! Muito obrigada! Aprendi muito nessa aula.
@fabianomogo7251
@fabianomogo7251 2 года назад
Ótimas aulas... Parabéns pelo trabalho.
@DigoOqPenso
@DigoOqPenso 9 месяцев назад
Muito bom, simples e direto. Ajudou muito, obrigado.
@luisalinhares773
@luisalinhares773 2 года назад
vídeo ótimo. Mas no final não consegui centralizar os itens da lista... pq será? to quebrando a cabeça aqui.
@andremarques4878
@andremarques4878 2 года назад
Muito obrigado meu amigo! Parabéns pelo conteúdo, ajudou demais!
@egsantos10
@egsantos10 2 года назад
Boa noite, nossa sensacional a aula gostei muito me ajudou bastante.......sucesso!!!
@joelsonjunior377
@joelsonjunior377 Год назад
Estou iniciando no html e css , mas seu video já me deu uma grande ajuda .
@lucasapin
@lucasapin 3 года назад
Foi muito bom me ajudou muito. Obrigado professor.
@user-us5cm8ho3r
@user-us5cm8ho3r 2 года назад
muito bom professor obrigado, Deus te abençõe.
@douglasalves8468
@douglasalves8468 2 года назад
Valeu! Sr sabe muito do que faz!
@ghscastro
@ghscastro Год назад
Excelente! Ajudou demais, obrigado!
@trilhadedev
@trilhadedev Год назад
Parabéns, eu estou iniciando e essa aula complementou muito meus estudos👏👏👏
@vriboli
@vriboli 2 года назад
omita aula, eu sou iniciante, venho trabalhando em projetos sozinho, quando me deparo com erros procuro por soluções... vc ajudou demais.
@sergiothallespradorios5941
@sergiothallespradorios5941 Год назад
It really worked for me after I look and try some tutorials, yours is the one that worked. Owe you a lot.
@tulio.digital
@tulio.digital 9 месяцев назад
Muito bom o tutorial! Like na certa. Obrigado.
@caiqueroque2861
@caiqueroque2861 3 года назад
Otimo video, ajudou bastante, inclusive com as dicas no final 🙌
@agpodium
@agpodium 11 месяцев назад
Obrigado teacher, tirou todas minhas dúvidas, e que vídeo aula gostosa de ouvir e aprender , valeu pelo conteudo
@zMathwz15
@zMathwz15 Год назад
Pls Ive been looking for this for a long time and finally I found u!! You're literally a life saver. It kinda took a while to download but it still worked.
@Yozzy...
@Yozzy... Год назад
its priceless. the slickness and the passion of the devs. priceless. what is cheaper and better than soft? Piracy is NOT the answer if you
@trilhacoder
@trilhacoder 2 года назад
Bem bacana, menu bem simples e funcional, ótimo conteúdo. Um exemplo de 3 níveis seria ótimo! Abç.
@offline1097
@offline1097 2 года назад
Muito obrigado!!Eu precisava dessa informcao pra terminar de clonar a tela de login do banco do brasil e gracas a voce eu consegui terminar!!🤗
@mickaelfernandes9898
@mickaelfernandes9898 3 года назад
Excelente, ganhou um inscrito!
@georgeoliver5773
@georgeoliver5773 3 года назад
Bem objetivo sem enrolação
@LuisHenrique-bw8uh
@LuisHenrique-bw8uh Год назад
Muito bom, parabéns, me ajudou demais!
@arthur_fxpc
@arthur_fxpc Год назад
parabéns pelo trabalho , consegui apreender o que eu queria, sucesso
@fabianomogo7251
@fabianomogo7251 2 года назад
Ótima aula!!!
@tiagopereira4175
@tiagopereira4175 3 месяца назад
Que sucesso.... Por mais Menus assim.
@hostmubak
@hostmubak 2 года назад
Obrigado professor, me ajudou bastante
@Daniel28142960
@Daniel28142960 2 года назад
Era o que estava procurando. Aula didática e explicativa. Já sou seu seguidor.
@SatellaSoft
@SatellaSoft 2 года назад
Sucesso!
@freeza7892
@freeza7892 2 года назад
Obrigado pela ajuda que me deu, ganhou mais um inscrito
@edilsonnogueira8540
@edilsonnogueira8540 Год назад
Comecei a ver hoje HTML, sua aula é muito boa. Mas entendo que como comecei a estudar hoje, tem coisas que não entendo, mas se foi muito rápido nas explicações, na verdade você esta ensinando para quem já sabe realmente mexer em HTML. No mais deu para entender um pouco, obrigado.
@pedroaleixo7785
@pedroaleixo7785 2 года назад
Muito Obrigado me ajudou demais!!!
@rafaelborges8925
@rafaelborges8925 Год назад
Muito obrigado
@kiddeymay3122
@kiddeymay3122 2 года назад
muito bom o video !!
@RLMGurgel
@RLMGurgel 2 года назад
Excelente explicação! Simples e direta, me ajudou muito em um projeto!
@SatellaSoft
@SatellaSoft 2 года назад
Que bom que ajudou :D
@apertaplays
@apertaplays Год назад
rapaz que fod@....eu to iniciando e iniciando sobre html e o treco é lindo de se aprender. mas voce vai fazendo tudo rapidao. o engraçado foi eu olhando tu por o menu do jeito q eu pensei e eu disse Q FOD@. aí tu "nao n ficou bom "
@aurelioruotolo9923
@aurelioruotolo9923 Год назад
Really nice and helpful... Thanks!
@Joseluiz-ir4vf
@Joseluiz-ir4vf 2 года назад
Muito bom, me ajudou bastante
@diogosteiner7159
@diogosteiner7159 3 года назад
Vlw cara, ajudou muito!!!!
@denisoracio487
@denisoracio487 8 месяцев назад
Ótimo vídeo, vlw!
@luizahelena4261
@luizahelena4261 Год назад
que video bom, muito obrigada!
@alissonramon7416
@alissonramon7416 2 года назад
Didática excepcional
@Spy-cd3ft
@Spy-cd3ft Год назад
Tenho uma pergunta, no caso eu queria colocar uma imagem de uma logo no lado esquerdo da pagina junto com o menu, o que eu deveria fazer ?
@mikaeldoreact6667
@mikaeldoreact6667 2 года назад
Ajudou muito, obrigado
@14tavin
@14tavin Год назад
This was so helpful!! Thank you
@militaoo3613
@militaoo3613 2 года назад
Muito bom mano, obrigado
@Mariannebastos
@Mariannebastos 3 года назад
Nossa, muito obrigada! Seu vídeo foi de grande ajuda para mim!😊
@SatellaSoft
@SatellaSoft 3 года назад
:D
@romuloleal22
@romuloleal22 2 года назад
video muito foda, um dos melhores que eu vi ate agora. parabens.
@SatellaSoft
@SatellaSoft 2 года назад
Obrigado!
@conceicaovieira7776
@conceicaovieira7776 Год назад
video aula sensacional vc seria ou é um exlente professor , só queria uma ajuda do code visual , o meu não aparece o autocomplete das classes ou qual quer coisa que digita no code , tem hora que ele aparece sugestão mais não completa como por exemplo ao digitar < html ele não mostra pra completar
@VitorSilva-oe7hj
@VitorSilva-oe7hj 2 года назад
e como faço para colocar um conteúdo dentro de algum título do menu? tipo, quando eu clicar em algo do menu, abri um conteúdo sobre
@arlancorreia2144
@arlancorreia2144 2 месяца назад
como faz para alargar o menu horizontal? invés de ficar só ali no canto mas ocupar tudo ou quase? alargar na horizontal mesmo
@nauambelooliveira6662
@nauambelooliveira6662 2 года назад
muito obrigado!
@GameOfTheHard
@GameOfTheHard 2 года назад
Ola tudo bem? Pq você coloca o transition no #menu-h li a, E não coloca no hover??
@luancordeiro2914
@luancordeiro2914 2 года назад
Adorei, obrigado.
@carmenlucia9896
@carmenlucia9896 2 года назад
Grata pela aula, ajudou muito, ganhou mais uma inscrita
@SatellaSoft
@SatellaSoft 2 года назад
:D
@laedsondev9187
@laedsondev9187 3 года назад
Ficou muiiito bom
@mjdinstrumentosmusicais2021
i really apreciate your help with dowloanding this software
@rodrigohenriquefarias2739
@rodrigohenriquefarias2739 Год назад
Muito bom!!
@13mvincius
@13mvincius 2 года назад
Excelente!
@Incorneavel.
@Incorneavel. Год назад
na parte do float: rigth nao funcionou.... nao sei pq.
@head_xxx7411
@head_xxx7411 Год назад
It works! Thanks a lot.
@filipebarbosamonfardini2416
@filipebarbosamonfardini2416 2 года назад
Tem algum vídeo mostrando que ao clicar numa dessas opções ele redireciona para alguma parte da pagina ?
@ozirismenezes2009
@ozirismenezes2009 2 года назад
Valeu mestre, muito bom
@SatellaSoft
@SatellaSoft 2 года назад
👍
@karolyneteixeira7027
@karolyneteixeira7027 2 года назад
poderia me dizer como faço para centralizar o menu na pagina, deixar ele no meio e aumentar a fonte
@Vinny.013
@Vinny.013 Год назад
Top, top, top 👏👏👏👏👏👏
@trincado7
@trincado7 Год назад
Meu menu não ficou na horizontal após adcionar a tag display: inline; como vc fez!
@Lucas.Albuquerque15
@Lucas.Albuquerque15 Год назад
o ENTRAR pode ficar full esquerda?
@erikjosedasilva1097
@erikjosedasilva1097 2 года назад
Top simplesmente top
@LeonardoSantos-jk1tp
@LeonardoSantos-jk1tp 2 года назад
esse li a e como se fosse uma uma id ? por pra por link n precisa do a href né ? logo se tiver outras ul li e só dá uma id pra que eles n sejam TDS iguais na hora de configurar
@YakumaKuramy
@YakumaKuramy 2 года назад
Muitissimo obrigado, poderia mostrar como centralizar ele, o menu?
@fhenriqueveiga
@fhenriqueveiga 5 месяцев назад
Muito bom, como colocar um dopdown menu aí no meio?
@alvarojoseph3576
@alvarojoseph3576 Год назад
bom demais
@cafeware
@cafeware 2 года назад
ótimo conteúdo, assisti no modo lento pq sou lento kkkk. parabéns e obrigado.
@nortonap
@nortonap Год назад
Eu não segui passo a passo, mas adorei. Mas fiquei com uma dúvida: abri no celular e ficou horrível. É assim mesmo? Ou pq não fiz passo a passo?
@mirroreddimension3dfractal133
Thanks Bruu
@LuweZ
@LuweZ Год назад
TNice tutorials was the first video I saw to get into soft soft, tNice tutorials year in May. Today I published a Resetup from XXXTentacion "Moonlight".
@vitor58588
@vitor58588 3 года назад
o meu não está ficando um do lado do outro oque eu faço?
@hypnno8811
@hypnno8811 3 года назад
Como coloco imagem?
@felipegames6585
@felipegames6585 Год назад
year for all of us, for so- it's still ongoing. i respect you for being honest as that's what's been keeping a bit sane recently, just being
@cazenrique93
@cazenrique93 2 года назад
Teria vídeo de como adicionar conteúdo nessas páginas?
@alantoledo9631
@alantoledo9631 2 года назад
Show
@lauricioweb3176
@lauricioweb3176 2 года назад
Showww
@jack_if
@jack_if 3 года назад
Mano, a tal que você usou para transição já esta desatualizada
@changingreality100
@changingreality100 Год назад
it work on my pc thx bro vеry much
@thaislima2093
@thaislima2093 Год назад
(1) In "Edison" it would be possible to create and play Loops in Any Order we like. Example. Loops=(2, 6, 8, 1) or (12, 1, 3, 6.10,) and
@ogabrielgouvea
@ogabrielgouvea 3 года назад
Boa noite amigo, ótimo video! Estou tendo um problema quando crio o menu do website. Ele simplesmente não ocupa a tela toda de jeito nenhum, mesmo com border box e etc. O que fazer?
@SatellaSoft
@SatellaSoft 3 года назад
Gabriel, obrigado. :D Como você está querendo fazer e como ele está ficando?
@efm
@efm Месяц назад
e se eu quiser por apenas o home a esquerda e todos os demais a direita, qual seria o codigo?
@SatellaSoft
@SatellaSoft Месяц назад
aplica margin-right:auto; no primeiro elemento.
@devsantiag
@devsantiag 2 года назад
Eu te amo!!!!
@devsantiag
@devsantiag 2 года назад
me ajudou bastante
@ajudandooproximo7540
@ajudandooproximo7540 2 года назад
Muito boa tua explicação, adoro teus vídeos. Tem vídeo explicando um pouco sobre responsividade, sobre a diferença de usar % e px como unidade de medida?
Далее
Criando um menu vertical com HTML e CSS
16:46
Просмотров 14 тыс.
Criando menu horizontal Dropdown com HTML e CSS
15:04
Como criar um MENU PERSONALIZADO com HTML e CSS
23:14
Criar um menu Dropdown com HTML e CSS
11:24
Просмотров 16 тыс.
Unveiling CSS Grid in practice | Mayk Brito
36:17
Просмотров 370 тыс.
Menu lateral com apenas HTML e CSS
21:37
Просмотров 142 тыс.
😱НОУТБУК СОСЕДКИ😱
0:30
Просмотров 2,4 млн