Menu Drop Down

lemissel · Agosto 2, 2006

Beleza gurizada???

Seguinte, estou tentando fazer um menu Drop Down como o Moujor explica no tutorial com muito CSS e pouco JS.

No firefox funciona certinho, mas no IEca n abre o menu...

Abaixo os códigos pra análize:

CSS

Obs.: As linhas em negrito são as que eu acho que estão bichadas, mas n sei como resolver :(

/*
Adição de menu dropDown
http://www.maujor.com/tutorial/ddownmenu.php
*/
ul#menu {
margin: 0;
padding: 0;
list-style: none;
width: 192px; /* Width of Menu Items */
/* border-bottom: 1px solid #ccc;*/
border:1px solid #FFD295;
}
ul#menu li {
position: relative;
}

ul#menu li ul {
position: absolute;
left: 0px; /* Set 1px less than menu width */
top: 28 px;
display: none;
}
/* Styles for Menu Items */
ul#menu li a {
display: block;
text-decoration: none;
color: #777;
background: #fff; /* IE6 Bug */
padding: 5px;
border-bottom: 0;
}
ul#menu li a:hover { color: #CC6601; background: #FF9900; } /* Hover Styles */

ul#menu li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

ul#menu li:hover ul, ul#menu li.over ul { display: block; } /* The magic */
ul#master {
margin: 0;
padding: 0;
list-style: none;
width: 56px; /* Width of Menu Items */
/*border: 1px solid #FF6600;*/
}
ul#master li {
position: relative;
}

ul#master li ul {
position: absolute;
left: 0px; /* Set 1px less than menu width */
top: 28 px;
display: none;
}
/* Styles for Menu Items */
ul#master li a {
display: block;
text-decoration: none;
background: #fff; /* IE6 Bug */
/*padding: 5px;*/
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
ul#master li a:hover { color: #CC6601; background: #FFD295; } /* Hover Styles */

ul#master li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

ul#master li:hover ul, ul#master li.over ul { display: block; } /* The magic */

JS

...
startList = function() {
if (document.all&&document.getElementById) {
    navRoot = document.getElementById("master");
    for (i=1; i<navRoot.childNodes.length; i++) {
        node = navRoot.childNodes[i];
        if (node.nodeName=="LI") {
            node.onmouseover=function() {
                this.className+=" over";
              }
              node.onmouseout=function() {
                  this.className=this.className.replace(" over", "");
               }
           }
      }
     }//alteracao
}
window.onload=startList;

//window.onload = menu;
//-->
</script>
</head>

<body onload="startList()" ...>

HTML

...
<ul id="master" class="master">
                <li><a href="#"><img name="topo_r2_c9" src="imagens/topo_r2_c9.jpg" width="56" height="30" border="0" id="topo_r2_c9" alt="" /></a>        
                    <ul id="menu">
                        <li><a href="servicos_1_hab.php">Primeira habilitação</a></li>
                        <!--<li><a href="servicos_carroemoto.php">1º habilitação (carro e moto)</a></li>-->
                        <li><a href="servicos_add_cat.php">Adição de categoria</a></li>
                        <li><a href="servicos_renovacao.php">Renovação CNH</a></li>
                        <li><a href="servicos_2via.php">Segunda via</a></li>
                        <li><a href="servicos_permissao2cnh.php">Troca de permissão para CNH</a></li>
                    </ul>
                </li>
            </ul>
...

Desde já o meu, "Valeuuuuuuuuuuuuuuuuuuuu"!!!! :D

CiadeFurao · Agosto 2, 2006

eu também penei pra fazer o meu menu funcionar, e uma das coisas que fez ele funcionar no IE é;

</style>

sfHover = function() {

var sfEls = document.getElementById("nav").getElementsByTagName("LI");

for (var i=0; i<sfEls.length; i++) {

sfEls.onmouseover=function() {

this.className+=" sfhover";

}

sfEls.onmouseout=function() {

this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

}

if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]>

</script>

achei lá no maujor, mas agora não me lembro o nome da função.

não vi isso no seu script, talvez ajude,

lemissel · Agosto 2, 2006

poots n deu cara :/

Me diz uma coisa esse sfHover(das linahs abaixo) é uma classe tua ou é o evento??? (é que eu nunca ouvi falar :wacko:)

this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

Valeuuuuu ;)

CiadeFurao · Agosto 2, 2006

meu :D , hahahaha..

não, eu num entendo lufas de bulufas, mas fui a luta, procurei, li, copiei, montei, penei, e funcionou.

dá uma olhada na minha pagina, no meu css, quem sabe te da uma luz, so que eu so testei em IE.

www.ciadefurao.net

Lbjs

lemissel · Agosto 2, 2006

ooops, mandou bjo... não é "meu" sorry :D

Mas óoo fuçei mais um pouco aqui e a trancos e barrancos funcionouuuuuuuuuuu eu tava pendurado nisso a mtos dias... valeu mesmo heim ;)

Brigadãooooooooooo³

Bjo também hehe

Edit

No Firefox ele só abre o menu, nunca mais fecha heheheh :(

CiadeFurao · Agosto 2, 2006

:lol: an sorry....me viciei em fechar msg com "Lambeijokas", ou "Lambeijos" - "Lambidas&Beijos"

mas se funcionou, meno male....

fui...esperar alguém responder o meu tópico também...

Entrar

Menu Drop Down

Pergunta

lemissel

Link para o comentário

Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

CiadeFurao

Link para o comentário

Compartilhar em outros sites

lemissel

Link para o comentário

Compartilhar em outros sites

CiadeFurao

Link para o comentário

Compartilhar em outros sites

lemissel

Link para o comentário

Compartilhar em outros sites

CiadeFurao

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades