Menu com problemas...

vidaloukaig · Março 3, 2009

Galera é o seguinte... To montando um layout aqui... Fiz um menu horizontal, com um submenu que abre na vertical com js. Tudo belezinha... Se não pelo seguinte fato de que na hora que o menu abre ele quebra o layout da página jogando as imagens para baixo... E também pelo fato de que ele não funciona da mesma forma que funciona fora do layout... Por exemplo quando eu estava desenvolvendo o menu eu fiz em um html separado fora do layout... Fora do layout o menu abre da maneira certa: logo abaixo do botão...

Simples exemplificar, é só olhar o site para vocês entenderem: http://www.corppore.com.br/

Clica em "Nossos serviços:", ai você vão ver como o menu ta quebrando o layout...

O que eu quero saber é como eu faço para acabar com isso? Fazer com que o menu passe por cima do conteúdo, sem quebrar o layout...

Ah! E outra coisas... Tive pesquisando mais não achei algo muito concreto... Como eu faço para colocar um link na célula da tabela e não no conteúdo dela; para que o link ocupe todo o espaço da célula e não só o que está escrito dentro dela?

Vou postar os códigos aqui:

index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>. . . : : Corppore - Medicina Estética : : . . .</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import url("css/style.css");
</style>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body bgcolor="#eed1e4">

<div id="geral" align="center">

<table border="0" cellpadding="0" cellspacing="0" width="950">
  <tr>
   <td><img src="images/spacer.gif" width="8" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="52" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="375" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="40" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="17" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="238" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="122" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="90" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="8" height="1" border="0" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="1" border="0" alt="" /></td>
  </tr>

  <tr>
   <td colspan="4"><img name="t1" src="images/t1.gif" width="475" height="200" border="0" id="t1" alt="" /></td>
   <td colspan="5"><img name="t2" src="images/t2.gif" width="475" height="200" border="0" id="t2" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="200" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="9"><img name="index_r2_c1" src="images/index_r2_c1.gif" width="950" height="7" border="0" id="index_r2_c1" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="7" border="0" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="2"><img name="index_r3_c1" src="images/index_r3_c1.gif" width="8" height="28" border="0" id="index_r3_c1" alt="" /></td>
   <td colspan="7" width="934" height="20" background="images/barra.gif">
   
<!-- --------------------------------------------- INÍCIO MENU ----------------------------------

<div align="left">

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="menu" onmouseover="this.bgColor='#EED1E4';ocultar();" onMouseOut="this.bgColor='';">..: Home</td>
<td class="menu" onmouseover="this.bgColor='#EED1E4';ocultar();" onMouseOut="this.bgColor='';">..: A Empresa</td>
<td class="menu" onmouseover="this.bgColor='#EED1E4';ocultar();" onMouseOut="this.bgColor='';">..: Quem somos?</td>
<td class="menu" onmouseover="this.bgColor='#EED1E4';ocultar();" onMouseOut="this.bgColor='';">..: Nossa Estrutura</td>
<td class="menu" onmouseover="this.bgColor='#EED1E4';ocultar();" onMouseOut="this.bgColor='';">..: Onde Estamos?</td>
<td id="menu1" class="menu" onmouseover="this.bgColor='#EED1E4';mostrar(1);" onMouseOut="this.bgColor='';">..: Nossos Serviços:</td>
</tr>
</table>

<div id="sub" onMouseOver="mostrar(1)" onMouseOut="ocultar()">
<table cellpadding="0" cellspacing="0" width="150" height="" onMouseOver="mostrar(1)" onMouseOut="ocultar()" style="color:#C658A0;">
<tr><td onmouseover="this.bgColor='#EED1E4';" onMouseOut="this.bgColor='';">..: Botox</td></tr>
<tr><td onmouseover="this.bgColor='#EED1E4';" onMouseOut="this.bgColor='';">..: Preenchimento</td></tr>
<tr><td onmouseover="this.bgColor='#EED1E4';" onMouseOut="this.bgColor='';">..: Peeling</td></tr>
</table>
</div>

</div>

---------------------------------------------------- FIM MENU -------------------------- -->
   
   </td>
   <td rowspan="2"><img name="index_r3_c9" src="images/index_r3_c9.gif" width="8" height="28" border="0" id="index_r3_c9" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="20" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="7"><img name="index_r4_c2" src="images/index_r4_c2.gif" width="934" height="8" border="0" id="index_r4_c2" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="8" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="9" align="left" valign="top" bgcolor="#FFFFFF"></td>
   <td><img src="images/spacer.gif" width="1" height="283" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="9"><img name="index_r6_c1" src="images/index_r6_c1.gif" width="950" height="13" border="0" id="index_r6_c1" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="13" border="0" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="4" colspan="2"><img name="index_r7_c1" src="images/index_r7_c1.gif" width="60" height="69" border="0" id="index_r7_c1" alt="" /></td>
   <td rowspan="2"><a href="mapa.htm" target="_parent"><img name="mapa" src="images/mapa.gif" width="375" height="52" border="0" id="mapa" alt="" /></a></td>
   <td rowspan="4" colspan="2"><img name="index_r7_c4" src="images/index_r7_c4.gif" width="57" height="69" border="0" id="index_r7_c4" alt="" /></td>
   <td><a href="contato.htm" target="_parent"><img name="contato" src="images/contato.gif" width="238" height="30" border="0" id="contato" alt="" /></a></td>
   <td colspan="3"><img name="index_r7_c7" src="images/index_r7_c7.gif" width="220" height="30" border="0" id="index_r7_c7" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="30" border="0" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="2" colspan="2"><a href="consulta.htm" target="_parent"><img name="consulta" src="images/consulta.gif" width="360" height="30" border="0" id="consulta" alt="" /></a></td>
   <td rowspan="3" colspan="2"><img name="index_r8_c8" src="images/index_r8_c8.gif" width="98" height="39" border="0" id="index_r8_c8" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="22" border="0" alt="" /></td>
  </tr>
  <tr>
   <td rowspan="2"><img name="index_r9_c3" src="images/index_r9_c3.gif" width="375" height="17" border="0" id="index_r9_c3" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="8" border="0" alt="" /></td>
  </tr>
  <tr>
   <td colspan="2"><img name="index_r10_c6" src="images/index_r10_c6.gif" width="360" height="9" border="0" id="index_r10_c6" alt="" /></td>
   <td><img src="images/spacer.gif" width="1" height="9" border="0" alt="" /></td>
  </tr>
</table>
</div>
</body>
</html>

css/style.css

@charset "utf-8";
td img {display: block;
}
body,td,th {
	font:Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
a {
	font:Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#geral {
	margin-top:10px;
	margin-bottom:10px;
}
.menu {
	color:#C658A0;
	font-weight:bold;
	padding-right: 10px;
}
#sub {
	display: none;
	background-color: #ECB9CD;
	width: 150px;
	border: 2px solid #C657A0;
	font-weight: bold;
}

js/script.js

function mostrar(numMenu) {
	
	var subMenu = document.getElementById("sub");
	var Menu = document.getElementById("menu"+numMenu);

	subMenu.style.display = "block";
}

function ocultar() {
var subMenu = document.getElementById("sub");
subMenu.style.display = "none";
}

vidaloukaig · Março 3, 2009

Pow galera, ninguém para me ajudar ainda?

Olha consegui resolver o problema do link dentro da célula e não somente no conteúdo, mole mole... Coloquei um onclick dentro da célula dessa maneira:

onclick="lnk('mapa.htm');"

E montei o js:

function lnk(src) {

top.location.replace(''+src+'');

}

Hehehe está funcionando...

Agora o problema do submenu no layout continua... Não faço idéia de como resolver... Alguém pode me ajudar, plz?

Entrar

Arquivado

Menu com problemas...

Recommended Posts

vidaloukaig 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

vidaloukaig 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante