← HTML + CSS

Menu Dropdown CSS

Lida 2442 vezes

Offline

cpdesign 
Membro
Mensagens 235 Gostos 0
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Alguém conhece a forma de criar um menu dropdown com HTML + CSS se possível com pouco ou nenhum JavaScript.
Não precisa de ter formatações e efeitos, o mais simples possível.

Normalmente não uso menus hierárquicos e o que tenho não se adapta aos requisitos deste.

Encontei alguns, mas formatavam mal. Noutros, o CSS do menu era maior que o CSS para formatar o site todo. Mais ridículo ainda eram os que tinham JavaScripts maiores que toda a aplicação.  :superlol:

Agradeço a dica!
Obrigado!
Offline

cjseven 
Administrador
Mensagens 1809 Gostos 26
Feedback +3

Troféus totais: 28
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 1000 Posts

se é um dropdown feito via CSS, não deve ter nenhum javascript.

é para um site estático html?

porque não fazes em wp? Seguramente encontras um template já com o dropdown...

caso contrário, google it! ;)
Offline

Thomato 
Membro
Mensagens 4125 Gostos 2
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Podes usar DIVs e no CSS formatas um hover para ficar maior...
Fiz algo assim na publicidade deste site (neste caso é útil ao tópico, se para vós não for, podem remover o link).

Depois podes ter o problema do texto ficar mal formato na DIV sem o "hover". Essa parte do texto, talvez, só com JS.
Offline

cpdesign 
Membro
Mensagens 235 Gostos 0
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

O menu que pretendo é do género do que aparece no topo deste forum, o menu de opções horizontal, cujas opções abrem em dropdown com outras opções.

Normalmente não uso javascript, por isso pedi de preferência com pouco ou nenhum JavaScript.

Sei fazer os hovers e display/hide e tudo mais, como é um multi-menu o posicionamento dos submenus está a ser um pouco mais complicado.

O site já está praticamente concluido, e como o prazo reduziu ainda não tive muito tempo de fazer experiências em CSS.
Mas também não uso WP, faço tudo de raíz em ASP.NET.
Offline

Riey 
Membro
Mensagens 1001 Gostos 0
Feedback +4

Troféus totais: 30
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

procura no yui
Offline

cpdesign 
Membro
Mensagens 235 Gostos 0
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 100 Posts 50 Posts

Obrigado pessoal, já resolvi o problema.

Não há nada como esquecer o assunto durante uns dias, e depois parar para pensar nele durante 5 minutos.

Ás vezes a solução mais simples é a mais eficaz (KIS Keep It Simple / Keep It Small). Um pequeno CSS e meia duzia de linhas de JS para compatibilidade com o IE6.

 :obrigado:

@Riey o YUI envolve scripts, nesse caso teria logo optado pelo jQuery.