Ir para conteúdo

POWERED BY:

Arquivado

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

Daniel Caparroz

s em MENU.

Por , em Desenvolvimento frontend

Recommended Posts

Daniel Caparroz    0

Daniel Caparroz
Postado

Galera, colhi pela net alguns códigos para montar esse MENU, fiz +- oque eu precisava, porém estou com grande dificuldade em criar submenus.

 

Já peguei vários códigos, tentei adicionar mas sem sucesso. Quando ponho tudo certinho os links dos submenus que deveriam abrir aol ado do menu selecionada, eles aparecem abaixo dele.

 

Só pra entendimento

 

Deveria ficar assim

 

Menu

Link1- Ao passar o mouse sobre o Link1, abre o sub menu ao lado direito com as opções: link1, link2, link3

 

Ele fica assim:

 

Menu

Link1

Link2

Link3

Link4

 

Ou seja, onde vereia abrir um submenu ele fica abaixo.

 

Outro problema: Esse menu ficaria no limite da parte de baixo do TOP, ou seja, os links dos menus cairiam para MAIN porém ele não está sobrepondo o frame main, quando ponho na parte extrema do TOP e coloco o mouse sob o menu nada acontece, na verdade o menu abre mas como o link principal está na parte mais baixa, os submenus aparecem atraz do main.

 

Segue o código completo da página dos menus:

 

<?php header('Content-Language: en'); ?><!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" xml:lang="en" lang="en"><head><title>Safra Help</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />			<script language='javascript' src='http://127.0.0.1:1034/js.cgi?pca&r=4313'></script><script type="text/javascript"><!--window.onload=montre;function montre(id) {var d = document.getElementById(id);	for (var i = 1; i<=10; i++) {		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}	}if (d) {d.style.display='block';}}//--></script><style type="text/css"><!-- /* CSS issu des tutoriels www.alsacreations.com/articles */body {	margin: 0;	padding: 0;	background: white;	font: 80% verdana, arial, sans-serif;	visibility: visible;}dl, dt, dd, ul, li {margin: 0;padding: 0;list-style-type: none;}#menu {position: absolute;top: 19px;left: 0px;z-index:100;width: 100%;}#menu dl {float: left;width: 12em;margin: 0 1px;}#menu dt {cursor: pointer;text-align: center;font-weight: bold;background: #ccc;border: 1px solid gray;}#menu dd {border: 1px solid gray;}#menu li {text-align: center;background: #fff;}#menu li a, #menu dt a {color: #006699;text-decoration: none;display: block;height: 100%;border: 0 none;}#menu li a:hover, #menu dt a:hover {background: #eee;}#site {position: absolute;z-index: 1;top : 70px;left : 10px;color: #000;background-color: #FFFFFF;padding: 5px;border: 1px solid gray; }a {text-decoration: none;color: black;color: #222;}--></style></head><body><div id="menu">	<dl>		<dt onmouseover="java script:montre();"><a href="" title="Retour à l'accueil">Erros</a></dt>	</dl>		<dl>					<dt onmouseover="java script:montre('smenu1');"><a href="" title="Retour à l'accueil">Errosss</a></dt>			<dd id="smenu1">				<ul>					<li><a href="#">Sous-Menu 1.1</a></li>										<li><a href="#">Sous-Menu 1.2</a></li>					<li><a href="#">Sous-Menu 1.3</a></li>					<li><a href="#">Sous-Menu 1.4</a></li>					<li><a href="#">Sous-Menu 1.5</a></li>					<li><a href="#">Sous-Menu 1.6</a></li>				</ul>			</dd>	</dl>			<dl>			<dt onmouseover="java script:montre('smenu2');"><a href="" title="Retour à l'accueil">Erros</a></dt>			<dd id="smenu2">				<ul>					<li><a href="#">Sous-Menu 2.1</a></li>					<li><a href="#">Sous-Menu 2.2</a></li>					<li><a href="#">Sous-Menu 2.3</a></li>					<li><a href="#">Sous-Menu 2.4</a></li>				</ul>			</dd>	</dl>		<dl>			<dt onmouseover="java script:montre('smenu3');"><a href="" title="Retour à l'accueil">Erros</a></dt>			<dd id="smenu3">				<ul>					<li><a href="#" target="_blank">Sous-Menu 3.1</a></li>					<li><a href="#">Sous-Menu 3.2</a></li>					<li><a href="#">Sous-Menu 3.3</a></li>					<li><a href="#">Sous-Menu 3.4</a></li>					<li><a href="#">Sous-Menu 3.5</a></li>				</ul>			</dd>	</dl>		<dl>			<dt onmouseover="java script:montre('smenu4');"><a href="" title="Retour à l'accueil">Erros</a></dt>			<dd id="smenu4">				<ul>					<li><a href="#">Sous-Menu 4.1</a></li>					<li><a href="#">Sous-Menu 4.2</a></li>					<li><a href="#">Sous-Menu 4.3</a></li>					<li><a href="#">Sous-Menu 4.1</a></li>					<li><a href="#">Sous-Menu 4.2</a></li>					<li><a href="#">Sous-Menu 4.3</a></li>					<li><a href="#">Sous-Menu 4.1</a></li>					<li><a href="#">Sous-Menu 4.2</a></li>					<li><a href="#">Sous-Menu 4.3</a></li>					<li><a href="#">Sous-Menu 4.1</a></li>					<li><a href="#">Sous-Menu 4.2</a></li>					<li><a href="#">Sous-Menu 4.3</a></li>					<li><a href="#">Sous-Menu 4.1</a></li>					<li><a href="#">Sous-Menu 4.2</a></li>					<li><a href="#">Sous-Menu 4.3</a></li>					<li><a href="#">Sous-Menu 4.1</a></li>					<li><a href="#">Sous-Menu 4.2</a></li>					<li><a href="#">Sous-Menu 4.3</a></li>									</ul>			</dd>	</dl>	</div></body></html><script language='javascript'>postamble();</script>

 

 

Espero que me ajudem !

 

 

Obrigado !

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel Caparroz    0

Daniel Caparroz
Postado

Ahh. já lí quase tudo isso, agora eu estava vendo, o menu tb nao funfa no IE -.-

 

Quanta coisa pra arrrumar.. aff..

 

Tentei inserir um java lá mas não adiantou, continua sem funcionar

 

 

Edit:

 

http://forum.imasters.com.br/index.php?sho...=Menu+Drop+Down

 

Gostei do modelo do menu desse tópico e é exatamente oq eu preciso, ele está com o problema de fazer funconar no IE, ele resolveu mas eu ainda nao consegui, tem que inserir um java que não estou conseguindo implementar.

 

Segue o código, por favor vejam oq eu errei ai, segundo o tópico ele pede pra fazer a inclusao da .over e de um javascript, acho que fiz como devia, porém ainda da erro, deem uma olhada.

 

<?php header('Content-Language: en'); ?><!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" xml:lang="en" lang="en"><head><title>Safra Help</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><script type="text/javascript">startList = function() {//Corrige o bug do hover no IEif (document.all&&document.getElementById) {navRoot = document.getElementById("nav");for (i=0; i<navRoot.childNodes.length; i++) {node = navRoot.childNodes[i];if (node.nodeName=="LI" ) {node.onmouseover=function() {this.className+=" over";}node.onmouseout= function() {this.className= this.className.replace(" over", "");}}}}}</script><style type="text/css">/* common styling */#menu {	width:99.8%;	padding:0px;	margin:0px;	border-top: 1px solid #FFFFFF;	background-color: #F1F3F5;	border-bottom: 1px solid #CCCCCC;	position:relative; }#menu, #menu a {	font-family: Arial, Helvetica, sans-serif; 	font-size:11px; 	text-decoration:none; 	color:#000000;}#menu ul li a, #menu ul li a:visited {	display:block; 	width:104px; 	height:20px; 	line-height:20px;	overflow:hidden;}#menu ul {	padding:0; 	margin:0;	list-style-type: none; }/* MENU  *//* Fundo da célula do menu  */#menu ul li {	float:left; 	margin-right:1px; 	position:relative;	text-align:center;}/* Fundo Over da célula do menu  */#menu ul li:hover,  #menu ul li.over ul li ul  {	background-color: #DDDDDD;	cursor:auto;}#menu ul li ul {	display: none;}#menu ul li:hover ul,  #menu ul li.over ul li ul  {	display:block; position:absolute; top:21px; left:0; width:105px;}#menu ul li:hover ul li ul, #menu ul li.over ul li ul {	display: none;}#menu ul li:hover ul li a,  #menu ul li.over ul li ul {	display:block; }/* SUBMENU */ /* Submenu - fundo padrão (Menu de segundo nivel) */ #menu ul li:hover ul li,  #menu ul li.over ul li u {	background-color: #F1F3F5;	border-top: none;	display:block;	text-align:left;	text-indent: 10px;	border: solid 1px #F1F3F5;}/* Submenu - cor do Menu de terceiro nivel */ #menu ul li:hover ul li ul li,  #menu ul li.over ul li u{	margin-left:1px;	background-color: #F9F9F9;}/* Submenu - over */ #menu ul li:hover ul li:hover,  #menu ul li.over ul li u {	border: solid 1px #FF8000;	background:#F3E2D0;}/* Submenu - configuração do menu de terceiro nivel */ #menu ul li:hover ul li:hover ul,  #menu ul li.over ul li u {	display:block; position:absolute; left:105px; top:0;}/* Submenu - seta lateral para outro nivel de menu */ #menu  ul li:hover ul li.seta, #menu ul li.over ul li u,#menu  ul li:hover ul li.seta:hover, #menu ul li.over ul li u{	background-image: url(setaRight.gif);	background-repeat: no-repeat;	background-position: right center;}</style></head><body><div id="menu"><ul>		<li><a href="java script:;">Início</a></li>		<li><a href="java script:;">Empresas</a>		<ul>			<li><a href="/modulos/site.php?secao=empresas/cadastrar">Cadastrar</a></li>			<li><a href="/modulos/site.php?secao=empresas/localizar">Localizar</a></li>			<li><a href="/modulos/site.php?secao=empresas/visualizar">Visualizar</a></li>		</ul>	</li>		<li><a href="java script:;">Imoveis</a>		<ul>			<li><a href="/modulos/site.php?secao=imoveis/cadastrar">Cadastrar</a></li>			<li class="seta"><a href="java script:;">Encomendas</a>				<ul>					<li><a href="---">Localizar</a></li>					<li><a href="---">Localizar</a></li>					<li><a href="---">Visualizar</a></li>					<li><a href="---">Visualizar</a></li>				</ul>			</li>			<li><a href="/modulos/site.php?secao=imoveis/localizar">Localizar</a></li>			<li class="seta"><a href="java script:;">Usuarios</a>				<ul>					<li><a href="---">Localizar</a></li>					<li><a href="---">Localizar</a></li>					<li><a href="---">Visualizar</a></li>					<li><a href="---">Visualizar</a></li>				</ul>			</li>			<li><a href="/modulos/site.php?secao=imoveis/visualizar">Visualizar</a></li>		</ul>	</li>		<li><a href="java script:;">Noticias</a>		<ul class="stlMenu_nivel_1">			<li><a href="/modulos/site.php?secao=noticias/cadastrar">Cadastrar</a></li>			<li class="seta"><a href="java script:;">Categorias</a>				<ul>					<li><a href="---">Visualizar</a></li>				</ul>			</li>			<li><a href="/modulos/site.php?secao=noticias/localizar">Localizar</a></li>			<li><a href="/modulos/site.php?secao=noticias/visualizar">Visualizar</a></li>		</ul>	</li>				<li><a href="java script:;">Usuários</a>		<ul>			<li><a href="/modulos/site.php?secao=usuarios/cadastrar">Cadastrar</a></li>			<li><a href="/modulos/site.php?secao=usuarios/localizar">Localizar</a></li>			<li><a href="/modulos/site.php?secao=usuarios/visualizar">Visualizar</a></li>		</ul>	</li></ul></div></body></html><script language='javascript'>postamble();</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

micox    2

micox
Postado

Ae Daniel, beleza?

 

Seguinte cara:

 

1) Procure não postar códigos (principalmente gigantescos) pois o pessoal não gosta de ficar copiando e colando códigos daí sua ajuda demora a chegar. Prefira postar links.

 

2) Se realmente não tiver como disponibilizar um link e for necessário postar o código, coloque ele entre as tags [ code] pois assim fica mais organizado no fórum.

 

3) Não use javascripts pra menu. Motivos: o google não te enxergará; quem não tiver javascript não te enxergará.

 

4) Leia os tutoriais do maujor sobre menus ( http://www.maujor.com/tutorial/ddownmenu.php - não leia só o desta página, lá no site do cara tem vários), SE não te ajudar, siga as instruções dos links postados pelo gio e crins.

Compartilhar este post

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

Informação importante

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

  Aceito