Ir para conteúdo

POWERED BY:

Arquivado

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

José Davi Reges de Souza

Tornar menu compativel com frames

Recommended Posts

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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