Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

maxeller

menu drop down horizontal

Por , em Javascript

Recommended Posts

maxeller    0

maxeller
Postado

Olá,

 

Preciso de orientação onde conseguir um menu drop-down horizontal que seja corretamente interpretado por diferentes navegadores (ie, mozilla e outros).

 

Já estou tentando arrumar um a muito tempo, porém o mais proximo que consegui foi um que funciona quase que bom com o ie, mas no firefox ele fica todo fora do lugar.

 

Outro problema que tive com outros scrips foi que ele não abria os links em um iframe da pagina, ou seja; o menu ficava fora do iframe mas o destino do link deveria ser no iframe, porém não funcionava.

 

Algum tempo atrás havia descoberto uma empresa que produzia menus personalizados, por um preço bastante acessivel, mas perdi o link. Caso alguém saiba quem faça esse tipo de trabalho por favor indique.

 

Abaixo está o script do menu que não funciona no firefox, caso alguem tenha alguma dica:

 

Obrigado!

 

Max Eller

 

 

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

<head>

<meta name="MSSmartTagsPreventParsing" content="true" />

<meta http-equiv="imagetoolbar" content="no" />

<meta http-equiv="Pragma" content="no-cache" />

<meta name="robots" content="all" />

<meta name="language" content="pt-br" />

<meta name="ICBM" content="-22.975781,-43.193082" />

<meta name="DC.title" content="CSS para Web Design" />

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link href="../estilo/estilo2.css" rel="stylesheet" type="text/css">

<title>Horizontal Drop Down Menus - Parte 3</title>

<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: 11px arial;

color:#0066cc;

font-weight:bold;

padding:5px;

margin:0px;

font-size:11px;

}

 

ul#primary-nav,

ul#primary-nav ul {

font: 11px arial;

color:#0066cc;

margin: 0;

padding: 0;

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

background: #fff; /* IE6 Bug */

font-size: 11px;

}

 

ul#primary-nav li {

position: relative;

list-style: none;

}

 

ul#primary-nav li a {

display: block;

text-decoration: none;

color: #0066cc;

padding: 5px;

border-top: 3px solid #ccc;

border-bottom: 3px solid #ccc;

}

 

/* 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: 0px; /* Set 1px less than menu width */

top: 25px;

}

 

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: ; }

 

ul#primary-nav li.menuparent:hover,

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

 

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

 

</style>

</head>

<body>

<ul id="primary-nav">

 

<div align="center">

<table width="800" height="25" border="0">

<tr>

<td width="200" align="center" valign="middle"><h1> <li class="menuparent"><a href="#">PEDIDOS</a>

<ul>

<li><a href="lista_pedidos_abertos.php" target="tela_usuario">ABERTOS</a></li>

<li><a href="lista_pedidos_finalizados.php" target="tela_usuario">FINALIZADOS</a></li>

<li><a href="lista_pedidos_cancelados.php" target="tela_usuario">CANCELADOS</a></li>

</ul>

</li>

</h1> </td>

<td width="200" align="center" valign="middle"><h1> <li class="menuparent"><a href="#">CADASTRO</a>

<ul>

<li><a href="dados_cliente.php" target="tela_usuario">MOSTRAR</a></li>

<li><a href="atualiza_cadastro.php" target="tela_usuario">ATUALIZAR</a></li>

<li><a href="trocar_senha.php" target="tela_usuario">TROCAR SENHA</a></li>

</ul>

</li>

</h1> </td>

<td width="200" align="center" valign="middle"><h1> <li class="menuparent"><a href="#">CONTA</a>

<ul>

<li><a href="../conta/saldo_conta_cliente.php" target="tela_usuario">SALDO</a></li>

<li><a href="../conta/saque_conta_cliente.php" target="tela_usuario">RETIRADAS</a></li>

<li><a href="../conta/extrato_conta_mesatual_cliente.php" target="tela_usuario">EXTRATO MêS</a></li>

<li><a href="../conta/conta_meses_anteriores.php" target="tela_usuario">EXTRATO MESES ANT.</a></li>

</ul>

</li>

</h1> </td>

</tr>

</table>

</div>

</ul>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito