Problema com menu e submenu

TubaraoUDI · Março 24, 2006

Bom dia!!!!

Galera, estou começando a desenvolver e estou com umas dúvidas em relação ao menu e submenu abaixo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="pt-br">

<head>

<script type="text/javascript">

function IEHoverPseudo() {

var navItems = document.getElementById("primary-nav").getElementsByTagName("li");

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

if(navItems.className == "menuparent") {

navItems.onmouseover=function() { this.className += " over"; }

navItems.onmouseout=function() { this.className = "menuparent"; }

}

}

}

window.onload = IEHoverPseudo;

</script>

<style type="text/css">

body { font: normal 62.5% verdana; }

ul#primary-nav,

ul#primary-nav ul {

margin: 0;

padding: 0;

width: 150px; /* Width of Menu Items */

border-bottom: 1px solid #ccc;

background: #fff; /* IE6 Bug */

font-size: 100%;

}

ul#primary-nav li {

position: relative;

list-style: none;

}

ul#primary-nav li a {

display: block;

text-decoration: none;

color: #777;

padding: 5px;

border: 1px solid #ccc;

border-bottom: 0;

}

/* Fix IE. Hide from IE Mac \*/

* html ul#primary-nav li { float: left; height: 1%; }

* html ul#primary-nav li a { height: 1%; }

/* End */

ul#primary-nav ul {

position: absolute;

display: none;

left: 149px; /* Set 1px less than menu width */

top: 0;

}

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

ul#primary-nav li:hover ul ul,

ul#primary-nav li:hover ul ul ul,

ul#primary-nav li.over ul ul,

ul#primary-nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */

ul#primary-nav li:hover ul,

ul#primary-nav li li:hover ul,

ul#primary-nav li li li:hover ul,

ul#primary-nav li.over ul,

ul#primary-nav li li.over ul,

ul#primary-nav li li li.over ul { display: block; } /* The magic */

ul#primary-nav li.menuparent { background: transparent url(arrow.gif) right center no-repeat; }

ul#primary-nav li.menuparent:hover,

ul#primary-nav li.over { background-color: #f9f9f9; }

ul#primary-nav li a:hover { color: #E2144A; }

</style>

</head>

<body>

<ul id="primary-nav">

<li><a href="<c:url value="/funcionario.home.chain"/>">Página Inicial</a></li>

<li class="menuparent"><a href="#">Eficiência</a>

<ul>

<li><a href="<c:url value="/paradas.index.chain"/>">Cadastro de Paradas</a></li>

<li><a href="#">Gráficos Paradas</a></li>

<li class="menuparent"><a href="#">Manutenção Tabelas</a>

<ul>

<li><a href="<c:url value="/area.index.chain"/>">Area</a></li>

<li><a href="<c:url value="/detalheArea.index.chain"/>">Detalhe da área</a></li>

<li><a href="<c:url value="/motivo.index.chain"/>">Motivo</a></li>

<li><a href="<c:url value="/detalheMotivo.index.chain"/>">Detalhe do Motivo</a></li>

<li><a href="<c:url value="/centroCusto.index.chain"/>">Centro de Custo</a></li>

</ul>

</li>

</ul>

</li>

<li class="menuparent"><a href="#">Planos de Ação</a>

<ul>

<li><a href="<c:url value="/planoAcao.index.chain"/>">Incluir</a></li>

<li><a href="<c:url value="/planoAcao.formpesquisa.chain"/>">Pesquisar</a></li>

</ul>

</li>

<li class="menuparent"><a href="<c:url value="/planoAcao.artigo.chain"/>">Indicadores</a>

<ul>

<li><a href="arquivos/Gasto.zip" target="_blank">Gasto Fixos 2006</a></li>

<li><a href="arquivos/Gasto_FIXO_ABAT_2006.mdb" target="_blank">Relatórios 3G</a></li>

<li><a href="arquivos/mc10.pdf" target="_blank">TESTE6</a></li>

<li><a href="http://w2kbrspodsr02:90/indicadores/CIG72006 - HH UP.XLS" target="_blank">Portal CIG</a></li>

</ul>

</li>

<li class="menuparent"><a href="#">Controle Usuários</a>

<ul>

<li><a href="<c:url value="/funcionario.index.chain"/>">Cadastro Usuários</a></li>

<li><a href="<c:url value="/funcionario.lista.chain"/>">Visualizar Usuários</a></li>

<li><a href="#">Alterar Senha</a></li>

</li>

</ul>

</li>

</ul>

</body>

</html>

O menu funciona, só que o submenu fica por baixo da combobox do meu formulário, alguém poderia me ajudar?

Desde já agradeço a todos

micox · Março 24, 2006

Estude sobre o z-index:

http://www.imasters.com.br/artigo.php?cn=3606&cc=280

http://www.w3schools.com/css/pr_pos_z-index.asp

Depois disso me diga se resolveu seu problema e como resolveu...

Dúvidas, poste aqui...

pa_bruno · Março 24, 2006

exatamente... poste dúvidas e naum codigos... acho q jah perdi a conta d qnts vezes falei isso... :D

Akasha · Outubro 6, 2006

Bem, é o seguinte. Se esse problema ocorrer no firefox ou em outros browsers de verdade, o z-index com certeza vai funcionar, agora no Internet Explorer ( http://forum.imasters.com.br/public/style_emoticons/default/sick.gif ) os combobox sempre vai ficar na frente, de qualquer camada ou elemento html. Isso por que quem renderiza a exibição da combobox no IE não é o próprio browser, mas o sistema operacional. Dai, não importa o CSS que você faça, o combobox sempre vai ficar na frente se você usar o IE.

Há uma solução. Uso o próprio CSS pra isso, embora já tenha visto soluções em javascript e tal, mas com códigos muito extensos.

Vamos lá:

Um detalhe muito importante para a solução deste bug (já deve ser o nº 125.545 só do IE) é que o IFRAME, tão conhecido por nós, também tem essa mesma característica do COMBOBOX quando se usa o Internet Explorer, ser renderizado pelo sistema operacional. Só que ele também responde aos atributos html e CSS. Ou seja:

Ele funciona como o combobox mas também respeita as ordens do CSS. Sendo assim, o que acontece se você mandar o IFRAME ficar na frente do Combobox? http://forum.imasters.com.br/public/style_emoticons/default/joia.gif Isso mesmo, ele fica na frente do COMBOBOX!!! E tem mais... se você mandar o IFRAME ficar atrás da sua camada (DIV, UL, ...) de menu por exemplo ele vai ficar... e sendo assim, o COMBOBOX também! http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

Resultado... o COMBOBOX vai ficar atrás do menu, como deveria ficar nos browsers de verdade.

Aqui está um código simples que eu fiz para demonstrar isso:

PRIMEIRO COM O BUG:

----------------------- CSS

<!--

#layer {

margin-top:8px;

position:absolute;

height:100px;

background-color:#FF0000;

width:300px;

z-index:5;

}

#layer-com-select {

z-index:1;

}

-->

</style>

----------------------- HTML

</select></div>

AGORA COM A SOLUÇÃO

----------------------- CSS

<!--

#layer {

margin-top:8px;

position:absolute;

height:100px;

background-color:#FF0000;

width:300px;

z-index:5;

}

#layer-com-select {

z-index:1;

}

#iframe {

z-index:-1px;

margin-top:23px;

position:absolute;

top:0px;

height:100px;

width:300px;

display:inline;

}

-->

</style>

----------------------- HTML

</select></div>

É isso ai, espero ter ajudado.

Em breve vou fazer um blog para tratar de assuntos assim. Podem acessar futuramente: http://www.eduardofaria.com.br

Valew

Entrar

Arquivado

Problema com menu e submenu

Recommended Posts

TubaraoUDI 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

micox 2

Compartilhar este post

Link para o post

Compartilhar em outros sites

pa_bruno 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Akasha 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante