Jump to content

RESOLVIDO: Menu Drop-down - problemas


Melvins

Recommended Posts

Olá a todos!

Eu segui um tutorial do Maujor.com, que é muito bom - http://www.maujor.com/tutorial/ddownmenu.php. Esta estilização horizontal (? - suponho horizontal porque são menus verticais e dispõem-se uns ao lado dos outros) funcionou, mas o que eu queria era mesmo na horizontal.

O que não estou a conseguir é meter os menus drop-downs a funcionarem.

http://www.lusotenis.com/testes/menu/menu1.html

HTML

<div id="navigation">
       	  	<ul>
           	  	<li><a href="#">Sobre Nós</a>
               	  	<ul>
                   	  	<li><a href="#">Projecto</a></li>
                      	<li><a href="#">Quem Somos</a></li>
                      	<li><a href="#">Direcção</a></li>
                  	</ul>
              	</li>
              	<li><a href="#">Sócios</a></li>
              	<li><a href="#">Agenda</a>
               	  	<ul>
                   	  	<li><a href="#">Notícias</a></li>
                      	<li><a href="#">Calendário</a></li>
                  	</ul>	
              	</li>
              	<li><a href="#">Media</a>
               	  	<ul>
                   	  	<li><a href="#">Videos</a></li>
                      	<li><a href="#">Galerias</a></li>
                  	</ul>
              	</li>
              	<li><a href="#">Links</a></li>
              	<li><a href="#">Contactos</a></li>
        	</ul>
	</div>

CSS

@charset "utf-8";
/* CSS Document */

body {
background:#000;
}

#navigation {
font-family:Verdana, Geneva, sans-serif;
font-size:15px;
text-transform:uppercase;
color:#EEE;
font-weight:bold;
position:relative;
top:30px;
}

#navigation a {
color:#BBB;
text-decoration:none;
}

#navigation a:hover {
color:#990000;
}

#navigation ul {
margin:0;
padding:0;
list-style:none;
margin-left:20px;
height:20px;
}

#navigation ul li {
margin-left:10px;
display:inline;
position:relative;
}

#navigation li ul {
position:absolute;
top:19px;
left:0px;
display:none;
}

#navigation ul li a {
display:inline;
text-decoration:none;

Alguém sabe qual é o problema?

O que queria mesmo fazer era colocar sub-menus (quando existem) também na horizontal (como o menu pai) e com fundo cinzento continuo sob as opções.

Link to comment
Share on other sites

clear:both;

Seria para colocar onde?

Já tenho um "clear:both" em "ul#menu li ul a {", acho que foi por causa de problemas no IE. Supostamente, isto não reforça eles ficarem alinhados na vertical?

Neste momento está

Link 1 Link 2 Link 3

        sub-link 1

        sub.link 2

Eu queria

Link 1 Link 2 Link 3

        sub.link 1 sub-link 2

Link to comment
Share on other sites

Hummm... ok, já tentei em vários lados e nada. Esse "clear:both;" já se encontrava em outros dois locais, se me lembro era para prevenir bugs em IEs antigos. Já tentei meter, tirar e nada.

Mas continuo a não perceber como esse clear ira colocar a disposição na horizontal.

Fica aqui o código:

@charset "utf-8";
/* CSS Document */

/* Menu Drop-down */

#navigation {
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
text-transform:uppercase;
color:#BBB;
position:relative;
top:30px;
margin-left:220px;
z-index:1;
}

#navigation a {
color:#BBB;
text-decoration:none;
}

#navigation a:active {
color:#900;
}

#navigation a:hover {
color:#990000;
}

ul {
list-style-type:none;
margin:0;
padding:0;
}

ul#menu {
width:650px;
margin:0 auto;
}

ul#menu li {
position:relative;
float:left;
}

ul#menu li a {
display:block;
float:left;
padding:0 10px;
height:20px;
line-height:15px;
}

ul#menu li a:hover {
color:#900;
}

ul#menu li ul {
display:none;
position:absolute;
top:20px;
left:0;
text-transform:none;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

ul#menu li:hover ul,
ul#menu li.hover ul{
display:block;
}

ul#menu li ul a {
width:100px;
background:#bbb;
color:#111;
border-bottom:1px solid #333;
}

ul#menu li ul li{
float:left;
clear:both;
}

ul#menu li ul li a {
float:none;
}
Link to comment
Share on other sites

Tanto quanto sei, quando quero colocar as coisas lado a lado em css, ou se usa

float:left/right

(left ou right)

ou utiliza-se

position:absolute

e colocas os elementos um a um no seu devido lugar utilizando top, left, right e bottom.

Pessoalmente, considero os floats melhores, visto não serem estáticos (podes adicionar novos elementos ao menu sem grandes confusões), mas geralmente requerem umas experiências antes que fiquem como queres.

O position requer que coloques os elementos manualmente no sitio, um a um, mas costuma ser uma solução mais rápida.

Quanto ao teu caso específico penso que o erro reside aqui:

ul#menu li ul li{
        float:left;
        clear:both;
}

O float:left está lá para fazer o que tu queres, mas o clear:both anula os float:left/right.

Experimenta e diz qualquer coisa.

(posso estar enganado também, que ninguém me leve a mal isso sff  😞)

Programei: VB6, VB.NET, ANSI C, C++, HTML, XHTML, CSS, PHP, ASP, HASKELL, JAVAI'm so good that I quit because the compiler is slower than me.

Link to comment
Share on other sites

Curioso, o "clear:both" está mesmo a servir no tutorial para prevenir o bug no IE 6. Tive a testar e já tentei várias alterações, mas sem o clear:both fica na mesma nos brownsers, excepto no IE6, ai funciona como pretendo...

Mas, de facto, é estranho, à 1ª vista (apesar de ser iniciante no css) parece que o erro do IE não devia ser erro, mas o standart com aquelas funções.

Link to comment
Share on other sites

  • 2 weeks later...

Ok, ontem, tentei começar o css do menu do 0 usando apenas a cabeça (com tudo o que aprendi até agora) e deu resultado, a funcionar como queria, excepto nos IE anteriores (do 5.5 ao 7).

Aqui fica o código se for útil para alguém:

@charset "utf-8";
/* CSS Document */

/* Menu Drop-down */

#navigation {
clear:both;
position:relative;
color:#bbb;
top:5px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

ul#menu {
font-size:17px;
}

ul#menu li {
display:block;
float:left;
padding:5px 30px 5px 10px;
text-transform:uppercase;
}

ul#menu li ul {
display:none;
position:absolute;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:12px;
background-color:#222;
}

ul#menu li:hover ul,
ul#menu li.hover ul {
display:block;
}

ul#menu li ul li {
display:block;
float:left;
padding:5px 10px 5px 5px;
width:auto;
text-transform:none;
}

ul#menu li ul li a:hover {
color:#FFF;
}

Os problemas:

IE 7 - Aqui a coisa não funciona muito bem, em vez de aparecer por baixo, o sub-menu aparece também na horizontal (certo), mas ao lado do link do menu principal que o activa do lado direito, sobrepondo-se aos restantes links.

IE 6 - Ainda pior, aparece bem longe do indicado, se bem percebi aparece ao lado da div geral do template que define-o ao centro.

IE 5.5 - Simplesmente os sub-menus não funcionam. Em principio, não coloca problema porque suponho que já é residual o número dos que ainda usam este brownser.

Se alguém souber como resolver o problema, ficava agradecido. 😉

Link to comment
Share on other sites

Ok, foi mais fácil do que pensei, consegui resolver os problemas no IE 6 e 7.

Soluções:

Em primeiro no 7, ele estava a aparecer ao lado do link e não em baixo, daí tive de:

- criar um "top" para ele baixar na altura;

No entanto ele apenas baixa, ficando a sudeste em relação ao link do menu pai. Como o "ul" dos sub-menus estão posicionados em absoluto, colocar um "left: 0px;" coloca todos os sub-menus encostados à esquerda. A solução foi identificar os sub-menus:

- criar "id" para os sub-menus na sua tag "<ul>";

- colocar o "left" necessário para cada um dos sub-menus para ficarem posicionados por baixo do link pai (o valor a meter em cada pode ser medido ou feito por tentativas);

Problema resolvido no IE 7

Depois no IE 6, um pouco mais complicado, mas acaba por ser mais ou menos a mesma solução, mas adaptada. Aliás, o site já tinha um css a funcionar apenas e só para o IE 6 (com o If no cabeçalho) para fazer funcionar a pseudo-class do hover num li. Adiante, basicamente foi ir a esse ficheiro...

Recordo que o problema é que aparecia bem deslocado para a direita (ele só contava a partir do fim do menu principal para a direita), como o "top" usado para o IE 7 já estava aplicado a todo o "li ul", então a única adaptação para só o IE 6 ler era colocar "lefts" negativos.

- Colocar para cada um dos sub-menus identificados o seu "left" negativo (ex: 1º sub-menu -> ul#sub_menu1 {left:-600px;};

Acho que isto resolveu de vez o problema em cada brownser.

Em relação ao IE 5.5 acho que é inútil arranjar solução, só o menu pai funciona.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.