Tornar menu compativel com frames

José Davi Reges de Souza · Junho 29, 2007

Queridos amigos, raptei esse menu Veja, só que quero usar ele em um painel de controle de um portal que estou fazendo, entendo bem de php, mysql e etc... mais não sei muita coisa de css e javascript, gostria que me dessem uma pequena força de como transformar esse menu, para ele ficar compativel com frames, segue todo o codigo, essa é a pagina do menu

<!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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title></title><link href="css/painel.css" rel="stylesheet" type="text/css" /><style type="text/css"><!--#topo {	background-image: url(../imagens/topo.jpg);	background-repeat: repeat-x;	height: 90px;	padding-top: 10px;}#menu {	background-image: url(../imagens/mainmenu-bg.gif);	background-repeat: repeat-x;	height: 21px;}--></style><link href="css/menu.css" rel="stylesheet" type="text/css" /><script>sfHover = function() {	var sfEls = document.getElementById("nav").getElementsByTagName("LI");	for (var i=0; i<sfEls.length; i++) {		sfEls[i].onmouseover=function() {			this.className+=" sfhover";		}		sfEls[i].onmouseout=function() {			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");		}	}}if (window.attachEvent) window.attachEvent("onload", sfHover);</script></head><body><div id="topo"> <img src="../imagens/logo.gif" width="306" height="76" /></div><div id="menu"><table width="100%" border="0" cellpadding="0" cellspacing="0">   <tr>	<td>	<ul id="lec">	  <li class="marromseta"><a href="#" class="marromseta">Inicio</a>		  <ul>			<li><a href="#" class="marrom">produto A</a></li>			<li><a href="#" class="marrom">produto A</a></li>			<li class="marromseta"><a href="#" class="marromsetadois">produto B</a>				<ul>					<li><a href="#" class="marrom">produto B.A</a></li>					<li><a href="#" class="marrom">produto B.A</a></li>					<li><a href="#" class="marrom">produto B.A</a></li>				</ul>			</li>			<li><a href="#" class="marrom">produto A</a></li>			<li><a href="#" class="marrom">produto A</a></li>		</ul>	  </li>	  <li class="rosaseta"><a href="#" class="rosaseta">Configurações</a>		  <ul>			<li class="rosaseta"><a href="#" class="rosasetadois">produto C</a>					<ul>				  <li><a href="#" class="rosa">produto C.A</a></li>				  <li><a href="#" class="rosa">produto C.B</a></li>				  <li><a href="#" class="rosa">produto C.C</a></li>				  <li><a href="#" class="rosa">produto C.D</a></li>				</ul>			</li>			<li><a href="#" class="rosa">produto D</a></li>			<li><a href="#" class="rosa">produto E</a></li>			<li><a href="#" class="rosa">produto E</a></li>			<li><a href="#" class="rosa">produto E</a></li>		  </ul>	  </li>	  <li class="azulseta"><a href="#" class="azulseta">Tickets</a>		  <ul>			<li class="azulseta"><a href="#" class="azulsetadois">Produto F</a>				<ul>				  <li><a href="#" class="azul">produto F.A</a></li>				  <li><a href="#" class="azul">produto F.B</a></li>				  <li><a href="#" class="azul">produto F.C</a></li>				  <li><a href="#" class="azul">produto F.D</a></li>				</ul>			</li>			<li><a href="#" class="azul">CSS</a></li>		  </ul>	  </li>	  <li class="marromseta"><a href="#" class="marromseta" style="width:44px;">Contas</a>				<ul>				  <li><a href="#" class="marrom">produto G</a></li>				  <li><a href="#" class="marrom">produto H</a></li>				  <li><a href="#" class="marrom">produto I</a></li>				  <li><a href="#" class="marrom">produto J</a></li>				</ul>		</li>	  <li class="roxoseta"><a href="#" class="roxoseta">Afiliação</a>				<ul>				  <li><a href="#" class="roxo">produto K</a></li>				  <li><a href="#" class="roxo">produto L</a></li>				  <li><a href="#" class="roxo">produto M</a></li>				  <li><a href="#" class="roxo">produto N</a></li>				</ul>		</li>	  <li class="roxoesseta"><a href="#" class="roxoesseta">Interação</a>				<ul>				  <li><a href="#" class="roxoes">produto O</a></li>				  <li><a href="#" class="roxoes">produto P</a></li>				</ul>		</li>	  <li class="verdeseta"><a href="#" class="verdeseta">Financeiro</a>				<ul>				  <li><a href="#" class="verde">produto Q</a></li>				  <li><a href="#" class="verde">produto R</a></li>				  <li><a href="#" class="verde">produto S</a></li>				</ul>		</li>	</ul></td>  </tr></table></div></body></html>

a pagina com os frames

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title></head><frameset rows="*" cols="80,*" frameborder="no" border="0" framespacing="0">  <frame src="botoes.php" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />  <frameset rows="118,*" cols="*" framespacing="0" frameborder="no" border="0">	<frame src="topo_menu.php" name="topFrame" scrolling="No" noresize="noresize" id="topFrame" title="topFrame" />	<frame src="cadastra_usuario.php" name="mainFrame" id="mainFrame" title="mainFrame" />  </frameset></frameset><noframes><body></body></noframes></html>

e o css

body {	margin: 0;	background:#FFFFCC;}#lec  {	float:left;	width:auto;	list-style: none;	padding:0;	margin:0px;	color:#FFFFFF;	background-color: #727172;	background-image: url(../../imagens/mainmenu-bg.gif);}#lec ul  {	float: left;	width: auto;	list-style: none;	background: #fff;	padding: 0;	margin: 0 0 1em 0;	font:  12px/16px Verdana, Arial, Helvetica, sans-serif;}#lec a {	display: block;	text-decoration: none;	padding: 0.25em 1.9em;	color: #fff; /* cor da fonte do primeiro nível*/	font:11px/15px Verdana, Arial, Helvetica, sans-serif;	border-left:1px solid #a5a2a5; /*barrinhas laterais do menu*/	border-right:1px solid #414142;}#lec li {	float:left;		padding:0;}#lec li ul {	position: absolute;	left:-999em;	width:14em;	w\idth:13em; 	font-weight: normal;	margin:0;}#lec li ul a {	width: 13em;	w\idth: 10.2em; 	border:0px;}#lec li ul ul {margin: -1.75em 0 0 12.9em;}#lec li:hover ul ul, #lec li.sfhover ul ul, #lec li.sfhover ul ul ul {left: -999em;}#lec li:hover ul, #lec li li:hover ul, #lec li li li:hover ul, #lec li.sfhover ul, #lec li li.sfhover ul, #lec li li li.sfhover ul {left: auto;}/*====marrom=====*/#lec a.marrom:hover, #lec li.marromsetadois:hover, #lec li.marromseta:hover {	background: #cabd9e; 	font-weight:bold;}#lec a.marromseta, #lec marromseta{width:40px;}#lec li.marromseta li, #lec .marrom li{border:1px solid #f3f1ea;}#lec li.marrom ul, #lec  li li.marrom ul, #lec  li.marromseta ul{border:4px solid #cabd9e;}#lec a.marrom {color:#000;}#lec a.marromseta {	background:url(rightarrow2.gif) 8% 50% no-repeat;	color:#000000;}#lec a.marromseta:hover, #lec a.marromsetadois:hover{	background:#cabd9e url(rightarrow2.gif) 8% 50% no-repeat;	font-weight:bold;}#lec a.marromsetadois {	background:url(rightarrow2.gif) 8% 50% no-repeat;	color:#000;}/*====rosa=====*/#lec a.rosa:hover, #lec li.rosasetadois:hover, #lec li.rosaseta:hover {	background: #e3858c; 	font-weight:bold;}#lec a.rosaseta, #lec rosaseta{width:95px;}#lec li.rosaseta li, #lec .rosa li{border:1px solid #f9e5e5;}#lec li.rosa ul, #lec  li li.rosa ul, #lec  li.rosaseta ul{border:4px solid #e3858c;}#lec a.rosa {color:#000;}#lec a.rosaseta {	background:url(rightarrow2.gif) 8% 50% no-repeat;	color:#000000;}#lec a.rosaseta:hover, #lec a.rosasetadois:hover{	background:#e3858c url(rightarrow2.gif) 8% 50% no-repeat;	font-weight:bold;}#lec a.rosasetadois {	background:url(rightarrow2.gif) 8% 50% no-repeat;	color:#000;}/*====azul=====*/#lec a.azul:hover, #lec li.azulsetadois:hover, #lec li.azulseta:hover {	background: #85b8e3; 	font-weight:bold;}#lec a.azulseta, #lec azulseta{ width:50px;}#lec li.azulseta li, #lec .azul li{border:1px solid #e5eef9;}#lec li.azul ul, #lec  li li.azul ul, #lec  li.azulseta ul{border:4px solid #85b8e3;}#lec a.azul {color:#000;}#lec a.azulseta {	background:url(rightarrow2.gif) 8% 50% no-repeat;	color:#000000;}#lec a.azulseta:hover, #lec a.azulsetadois:hover{	background:#85b8e3 url(rightarrow2.gif) 8% 50% no-repeat;	font-weight:bold;}#lec a.azulsetadois {	background:url(rightarrow2.gif) 8% 50% no-repeat;	color:#000;}/*====roxo=====*/#lec a.roxo:hover, #lec li.roxosetadois:hover, #lec li.roxoseta:hover {	background: #9190f4; 	font-weight:bold;}#lec a.roxoseta, #lec roxoseta{ width:58px;}#lec li.roxoseta li, #lec .roxo li{border:1px solid #e7e5f9;}#lec li.roxo ul, #lec  li li.roxo ul, #lec  li.roxoseta ul{border:4px solid #9190f4;}#lec a.roxo {color:#000;}#lec a.roxoseta {	background:url(rightarrow2.gif) 8% 50% no-repeat;	color:#000000;}#lec a.roxoseta:hover, #lec a.roxosetadois:hover{	background:#9190f4 url(rightarrow2.gif) 8% 50% no-repeat;	font-weight:bold;}#lec a.roxosetadois {	background:url(rightarrow2.gif) 8% 50% no-repeat;	color:#000;}/*====roxo escuro=====*/#lec a.roxoes:hover, #lec li.roxoessetadois:hover, #lec li.roxoesseta:hover {	background: #9190f4; 	font-weight:bold;}#lec a.roxoesseta, #lec roxoesseta{ width:64px;}#lec li.roxoesseta li, #lec .roxoes li{border:1px solid #e7e5f9;}#lec li.roxoes ul, #lec  li li.roxoes ul, #lec  li.roxoesseta ul{border:4px solid #9190f4;}#lec a.roxoes {color:#000;}#lec a.roxoesseta {	background:url(rightarrow2.gif) 8% 50% no-repeat;	color:#000000;}#lec a.roxoesseta:hover, #lec a.roxoessetadois:hover{	background:#9190f4 url(rightarrow2.gif) 8% 50% no-repeat;	font-weight:bold;}#lec a.roxoessetadois {	background:url(rightarrow2.gif) 8% 50% no-repeat;	color:#000;}/*====verde=====*/#lec a.verde:hover, #lec li.verdesetadois:hover, #lec li.verdeseta:hover {	background: #adc7a1; 	font-weight:bold;}#lec a.verdeseta, #lec verdeseta{ width:70px;}#lec li.verdeseta li, #lec .verde li{border:1px solid #edf3eb;}#lec li.verde ul, #lec  li li.verde ul, #lec  li.verdeseta ul{border:4px solid #adc7a1;}#lec a.verde {color:#000;}#lec a.verdeseta {	background:url(rightarrow2.gif) 8% 50% no-repeat;	color:#000000;}#lec a.verdeseta:hover, #lec a.verdesetadois:hover{	background:#adc7a1 url(rightarrow2.gif) 8% 50% no-repeat;	font-weight:bold;}#lec a.verdesetadois {	background:url(rightarrow2.gif) 8% 50% no-repeat;	color:#000;}

agradeço a atenção e ajuda de todos

hinom · Julho 3, 2007

basta você definir a profundidade do layer para amboslogicamente que o layer do iframe deve ficar abaixo do menudica:pesquise por "z-index"

Entrar

Arquivado

Tornar menu compativel com frames

Recommended Posts

José Davi Reges de Souza 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hinom 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Orientação - Codificação Caracteres Especiais em Java

Não consigo carregar imagem do captcha no meu formulário

Estou criando uma calculadora de m2 e litros de tinta

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante