Criando menu horizontal Dropdown com HTML e CSS

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

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

50% 1

Nessa videoaula, vamos criar um menu dropdown horizontal, utilizando apenas o HTML e o CSS.
A lógica por trás desse menu é tão simples como abrir uma embalagem de chocolate, basicamente precisamos declarar um novo submenu dentro de um item li, e quando passamos o mouse sobre essa lista, exibimos o submenu, que por padrão, sempre está oculto.
Não deixe de conferir nosso artigo oficial, nele, contém explicações adicionais de como criar o menu horizontal com HTML e CSS.
Curso PHP com MVC: academy.satellasoft.com/cours...
Artigo oficial: satellasoft.com/artigo/css/cr...
Academy SatellaSoft: academy.satellasoft.com

Наука

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

16 ноя 2020

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@marcelonascimento9851 2 года назад

Nada mais nada menos que sensacional, PARABÉNS pelo vídeo, muito bom assistir aulas assim.

@neverclickbait7066 2 года назад

Quando você se confunde eu me perco todo, mas é de longe o canal que mais me ajuda 👍🏾

@everaldobraz2622 Год назад

excelente professor. Simples e perfeito. Obrigado, parabéns.

@devrobertmacedo 2 года назад

Muito obrigado, me ajudou muito. Estou fazendo um trabalho da faculdade que precisa desenvolver um menu sobre controle de estoque, tenho quebrado a cabeça para saber como vou fazer isso. Graças a sua aula, finalmente conseguir fazer a primeira parte do projeto. Tive problemas na parte das opções abaixo do dropdown ficarem alinhadas, mas quando mudei a numeração do width de "150px" para "100px", resolveu esse problema. Deixando like no vídeo também como forma de agradecimento 👏🏽

@mbs2488 Год назад

Excelente ! Muito bem explicado ! ! Parabéns pelos vídeos ! ! !

@trilhacoder 2 года назад

Cara pelo conteúdo, bem completo, objetivo e simples de entender. Abç.

@MOBCANECAS Год назад

Cara está de parabéns, tem pessoa que acaba fazendo videos e não ensina nada.. mas você ajudo muito, Parabéns amigo =)

@kareemhussein2583 Год назад

Brigadão, meu consagrado! Era isso que eu tava procurando! Você é um amigo, amigo!!

@SatellaSoft Год назад

Que bom que ajudei

@justbelieveseeing Год назад

Cara estava apanhando para conseguir fazer o menu suspenso, e encontrei onde estava fazendo errado! Me salvou! Muito obrigado! Aula top!

@_matheusmss Год назад

Muito bom, vc ensina muito bem.

@gustavobatista3864 Год назад

nss cara, justamente o que estava procurando, vídeo aula top!!!

@davisantos3722 Год назад

excelente vídeo e excelente didática! Ajudou muito a aprender a fazer o dropdown menu! Só senti falta de um repositório no git pra poder olhar o código com mais facilidade.

@theguitargamer1 2 года назад

Gostei pra caramba da aula. +1 inscrito

@adeilsonbeatbox4413 2 года назад

cara seu trabalho me ajudou muito, muito obrigado você é 10!

2 года назад

isso mesmo que eu queria

@viniciussouza-bk5nq 3 года назад

Muito obrigadoooo, me ajudoou muito !

@geladeira923 2 года назад

mano vlw mesmo não tem nem como te agradecer sério, tava passando sufoco aqui no curso de S.I da faculdade

@dimiendrixmartinsmiranda9528 11 месяцев назад

vlw irmao me ajudou muito!!! talvez para algumas pessoas que estejam começando a estudar, ficar alterando o codigo toda hora fica meio confuso, tive que ver o video alguma vezes, mas de qualquer forma muito foda seu conteudo, parabéns !!!!!

@demervalleite5891 3 года назад

Ajudou bastante, valeu pelas dicas.

@SatellaSoft 3 года назад

Que bom que ajudou :D

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

Excelente vídeo!

@jailsonvieira3924 3 года назад

ajudou muito, valeu!

@jkjuliesne6150 11 месяцев назад

vlw por me ajuda aula muito boa

@gabrielfernandesaraujosant215 11 месяцев назад

Cara, me salvou, eu tava a uns 3 dias tentando fazer esse menu dropdown nesse modelo mas n fazia nem ideia de como fazer.

@kesleylima6159 Год назад

Muito bom amigo! Parabéns

@nutellagamer1211 Год назад

Como vc aprendeu isso?

@nutellagamer1211 Год назад

Eu sei html e css, mas n sei fazer isso

@julionascimento7311 Год назад

show de bola mano

@RafaelAndradeMetalOmega 3 года назад

Opa, já venho no like ;-)

@Lcmagna 2 года назад

man vc é brabo dms

@jeanmedeiros1466 2 года назад

vlw mesmo esta com dificuldade e esse vídeo ajudou a resolver legal principalmente na parte de deixar mais organizado o meu style.css.

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

Obrigado!

@articpogg Год назад

Ajudou mt

@aquamaeda 2 года назад

Muito bom! Tem como fazer um terceiro nível de menu, abrindo pela lateral? Na frente do nome do nível dois?

@guilhermedias1265 Год назад

o meu fica bugado quando passa o mouse em cima

@paulomaisnada 3 года назад

Achei muito massa a aula! Obrigado pelo ensinamento! Deixa eu tirar uma dúvida. Estou testanto colocar um segundo nível de dropdown, mas quando crio o hover interno, consigo fazer aparecer apenas o último elemento li na lista interna. Por exemplo: Tenho no menu a opção "Profisionais". Dentro dela abre um DropDown com os nomes deles, e no próximo nível, teria as opções "manhã, tarde e noite", mas apenas a opção noite aparece. Sabe o que pode estar acontecendo?

@SatellaSoft 3 года назад

Obrigado, Paulo. Da uma olhadinha aqui nos nossos vídeos, a gente gravou um material de Dropdown também.

@e.marques17 Год назад

Top

@rafaelviegassoares1019 Год назад

Acabei de me inscrever 😘

@SatellaSoft Год назад

Bouaaa

@VitorSilva-oe7hj 2 года назад

Cai aqui de paraquedas, você já ensinou como colocar o conteúdo? tipo, eu clicar em algo do menu e abri um conteúdo sobre?

@lukashallgren 2 года назад

Usando a tag de âncora da seguinte forma: Coloca aqui o que vai estar escrito no local, ao invés de aparecer "Google.com.br" aparecer do Google, por exemplo, e fecha a tag

@marcal.cortes01 2 года назад

Olá será que você pode colocar o código completo aqui nos comentários?

@richardwesley4226 2 года назад

Muito bom, mas queria tirar uma duvida, eu já assiti um video seu criando um menu horizontal que você usa o # pra chamar a variável, ai nesse você usa o "." e ":", eu sou meio leigo teria como explicar?

@ggjjjghgii Год назад

Pode ter alteração dependendo do browser? Fiz idêntico e não ficou com o efeito drop

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

O meu tb n

@user-iq5en1zi9w Год назад

Peco ajuda com um codigo html e css que estou gerando mas estou tendo dificuldades em criar um menu suspenso com 4 niveis

@nickolasdavi2084 11 месяцев назад

Oi, professor. Qual atalho no teclado foi usado para copiar e colar o item em outra linha em 1:40 ?

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

no windows eu seguro ALT + SHIFT e seta pra baixo ou seta pra cima.

@yuushii3400 Год назад

O meu last child ta abrangendo o sub menu, sendo que era so pra colocar o suporte do lado direito, como resolver?

@louislevesque2540 2 года назад

Olá , você tem algum vídeo ensinando por exemplo quando eu clicar no botão Produto, para ele abrir uma página dentro do meu site mostrando os meus produtos ?

@3ggames988 2 года назад

é so tu colocar no href do produto, o link dos produtos do seu site. Ex: Produtos

@igornathandasilvaalmeida4520 2 года назад

Professor, ensina a fazer mudar a cor do texto quando passar o mouse encima por favooorr!!

@proprogramador3534 2 года назад

Usa o a:hover {color: "Cor de sua preferência" } mano

@JogosEtudoMais 2 года назад

O esquema da transição ali é porque display não pode ser animado. Teria que fazer com js ou alterar a forma de exibição desse submenu

@zeni1_ Год назад

boa explicação e otimo ensino mas o unico problema é que eu prefiro usar o sublime e os codigos do css não são o mesmo

@Fmeirelles94 2 года назад

Qual a tecla que usa para copia rápido pra linha de baixo?

@SatellaSoft 2 года назад

CTRL+D

@israelfrancisco707 3 года назад

Não teria como deixar o BK cobrindo a parte branca que está faltando em cima?

@dinizwas7962 2 года назад

na verdade isso acontece porque os navegadores ja vem com uma margin de padding padrao... tem como formatar aquilo e deixar tudo zerado entao p menu dele vai encaixar

@niltonduarte3531 2 года назад

Mas e a responsividade?

@p.roseoliveira 2 года назад

Muito bom, você me ajudou bastante. Mas eu devo pontuar, você fala muito rápido.

@alvinhozzZ Год назад

me ajuda ? porque vc abre duas pag, uma index e outra css ???????/

@SatellaSoft Год назад

Para separar os tipos de arquivos, um é html e outro css.

@joaoluccasnovaes9098 Год назад

a aula ficou confusa no final

@nathanarzaonagel8763 3 года назад

alguém pode me dizer o nome do programa ?

@mugrilo18 3 года назад

Visual Studio Code (VScode)

@alanfljesus 2 года назад

nao funciona para mim

@hypnno8811 3 года назад

Coloco foto onde?

@athos.empreends 2 года назад

no img

@hypnno8811 2 года назад

Carai 7 meses

@crl1808 2 года назад

com esse video percebi o quão bosta é meu curso que nem ensinaram o que é NAV

@athos.empreends 2 года назад

kkkkkkkkkkk

@heiderdideriksen9223 2 года назад

O vídeo tutorial está muito rápido (alopração). As dicas do Visual Code ativadas atrapalham demais a leitura do código. O menu, não só não é responsivo, como não funciona em navegador Firefox 93.0. Linka esta na descrição: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-CNiH_hkvcDA.html

@Elldevv 2 года назад

muito confuso para ensinar ^^

@lidroxd6869 2 года назад

Se tem uma coisa que eu odeio é css

@joaopaulomartinsvieira7148 Год назад

Modo de explicar muito bagunçado. Muito ""copia e cola" "coloca e paga", feito de forma muito rápida. Para experientes, ok. Para iniciantes, fica muito confuso.