Ir para conteúdo

POWERED BY:

Arquivado

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

Romeu_A

[Resolvido] erro no menu pop up

Por , em Javascript

Recommended Posts

Romeu_A    0

Romeu_A
Postado

tenho esse script :

<style>


.menu {
	background-color: #333;
	position: relative;
	width: 890px;
	height: 20px;
	margin: 0px;
	padding: 0px;
	left: 35px;
	top: 13px; 
	Float:left;
	z-index:2; }
		
/* link e link visitado */
#menu a:link,a:visited {
	display: block;
	width: inherit;
	font-weight: bold;
	color: #fff;
    padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 16px;
	padding-right: 15px; 
	font-size: 10px;
	text-align: center; 
	text-decoration: none;  
	text-transform: uppercase; 
	}
 /* width:120px;*/    
 /* area do menu */
#menu ul {
	text-align: center;
	margin: 0;  
	width: 100% ; 
	padding: 0;	
	list-style-type: none;
	overflow: hidden; 
	border: 0;
	}
	      
		
/* posição de cada um dos botões */
#menu ul li { 
    position: relative; 
	display: block;
	float: left;
	text-align: center;
	padding: 0;
    margin: 0;
	}
	
*#menu ul li {
	float: left;
	height: 1%;
	}
	/* cada um dos botões */

#menu ul li a {
	background: #fff;
	width: 78px;
	height: 18px;
	display: block; 
	border-top: 1px solid #f5d7b4;
	text-decoration: none; 
	color: #f5d7b4;
	padding: 0;
	margin: 0 0 10px 0;text-decoration: none;
	text-align: center;
	border: 0px solid #000;   
	border-left: 1px solid #f5d7b4;
    border-bottom: 1px solid #f5d7b4;
	border-right: none;
	font: normal 10px/18px "Lucida Grande", "Lucida Sans Unicode", verdana, lucida, sans-serif;
	}
*#menu ul li a { 
   height: 20%;
   }
   /* cada um dos submenus */
#menu li ul {
	position: relative;
	left: 0px;
	top: 0px; 
	display: none;
	}
/* posição cada um dos botões */
#menu li {
	float: left;
	* width: 18px;
	}
/* link quando passa o mouse e link que foi clicado*/
#menu a:hover {
	background-color: #7A991A;
	} 

#menu a:active {
        background: #c60;
        color: #fff;
}
#menu li#active a {
        background: #c60;
        border: 1px solid #c60;
        color: #fff; }
/* posição cada um dos sub_menus */
#menu li:hover ul { 
    display: block; 
	position: relative; 
	margin: 0px; 
	padding: 0px;
	}
/* posição cada um dos sub_botões */
#menu li:hover li { 
    float: none;
	}
/* sub_sub_menu não utilizado */
#menu li:hover ul ul, li:hover ul ul {
	display: none;
	}
	
#menu li li:hover ul{ 
    display: block; 
    }
	
#menu li:hover li a {
	background-color: #ddd; 
    border-bottom: 1px solid #fff; 
	color: #000;
    }

#menu ul li a:hover {
        color: #930;
        background: #f5d7b4;
}

#menu li li a:hover {
	background-color: #8db3ff;
    }	 
</style>

e este menu em html 

<body>


<ul id="menu">
    <li><a href="#">A</a></li> 
    <li><a href="#">B</a> 
      <ul> 
        <li><a href="#">Ba</a></li> 
        <li><a href="#">Bb</a></li> 
        <li><a href="#">Bc</a></li>
        <li><a href="#">Bd</a></li> 
        <li><a href="#">Be</a></li> 
        <li><a href="#">Bf</a></li> 
        <li><a href="#">Bh</a></li>
        <li><a href="#">Bi</a></li>
        <li><a href="#">Bj</a></li> 
        <li><a href="#">Bk</a></li>  
      </ul> 
    </li> 
    <li><a href="#">C</a></li>
    <li><a href="#">D</a></li>  
    <li><a href="#">E</a></li> 
    <li><a href="#">F</a></li>
    <li><a href="#">G</a></li>  
    <li><a href="#">H</a></li> 
    <li><a href="#">I</a></li> 
    <li><a href="#">J</a></li> 
 </ul>
 </body>


// JavaScript Document

over = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" over";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" over\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", over);


e este :

// JavaScript Document


var mmOpenContainer = null;
var mmOpenMenus = null;
var mmHideMenuTimer = null;

function MM_menuStartTimeout(hideTimeout) {
	mmHideMenuTimer = setTimeout("MM_menuHideMenus()", hideTimeout);	
}

function MM_menuHideMenus() {
	MM_menuResetTimeout();
	if(mmOpenContainer) {
		var c = document.getElementById(mmOpenContainer);
		c.style.visibility = "inherit";
		mmOpenContainer = null;
	}
	if( mmOpenMenus ) {
		for(var i = 0; i < mmOpenMenus.length ; i++) {
			var m = document.getElementById(mmOpenMenus[i]);
			m.style.visibility = "hidden";			
		}
		mmOpenMenus = null;
	}
}

function MM_menuHideSubmenus(menuName) {
	if( mmOpenMenus ) {
		var h = false;
		var c = 0;
		for(var i = 0; i < mmOpenMenus.length ; i++) {
			if( h ) {
				var m = document.getElementById(mmOpenMenus[i]);
				m.style.visibility = "hidden";
			} else if( mmOpenMenus[i] == menuName ) {
				h = true;
			} else {
				c++;
			}
		}
		mmOpenMenus.length = c+1;
	}
}

function MM_menuOverMenuItem(menuName, subMenuSuffix) {
	MM_menuResetTimeout();
	MM_menuHideSubmenus(menuName);
	if( subMenuSuffix ) {
		var subMenuName = "" + menuName + "_" + subMenuSuffix;
		MM_menuShowSubMenu(subMenuName);
	}
}

function MM_menuShowSubMenu(subMenuName) {
	MM_menuResetTimeout();
	var e = document.getElementById(subMenuName);
	e.style.visibility = "inherit";
	if( !mmOpenMenus ) {
		mmOpenMenus = new Array;
	}
	mmOpenMenus[mmOpenMenus.length] = "" + subMenuName;
}

function MM_menuResetTimeout() {
	if (mmHideMenuTimer) clearTimeout(mmHideMenuTimer);
	mmHideMenuTimer = null;
}

function MM_menuShowMenu(containName, menuName, xOffset, yOffset, triggerName) {
	MM_menuHideMenus();
	MM_menuResetTimeout();
	MM_menuShowMenuContainer(containName, xOffset, yOffset, triggerName);
	MM_menuShowSubMenu(menuName);
}

function MM_menuShowMenuContainer(containName, x, y, triggerName) {	
	var c = document.getElementById(containName);
	var s = c.style;
	s.visibility = "inherit";
	
	mmOpenContainer = "" + containName;
}

Porem o menu abre bem em todos os navegadores menos no IE, no IE ele fica espremido no canto esquerdo e nos demais fica certo com a largura correta

 

alguém vendo os códigos pode me mostrar onde eu errei

Compartilhar este post

Link para o post
Compartilhar em outros sites

Romeu_A    0

Romeu_A
Postado

postei o html e o java mais como complemento acredito que o erro esteja no css esta faltando algum hack que eu não consigo identificar onde é por que funciona bem em todos os navegadores menos no IE

Compartilhar este post

Link para o post
Compartilhar em outros sites

AlocK    0

AlocK
Postado

amigo... isso é um codigo pronto do DreamWeaver se não me engano... estou correto ?

 

existem outros menus dropdown muito melhores e crossbrowser.

 

tenho um otimo aqui só que estou meio ocupado para inserir o codigo dele pois necessita de css e jquery.

 

mas se puder usar jquery procure no google por jquery menu dropdown. existem inumeras opções excelentes

Compartilhar este post

Link para o post
Compartilhar em outros sites

Romeu_A    0

Romeu_A
Postado

valeu pela dica mas já resolvi em parte para quem quiser usar o menu vai ai o que fiz

 

alterei o css

 

 

 

.menu {

*left: 5px;

#menu a:link,a:visited {
*padding-left: 0px;
*padding-right: 0px;

 

só acrescentando uma tag com * depois da tag original para só o IE lê.

 

mas ainda esta com problema no opera o ultimo item do menu vai para baixo do primeiro da barra

Compartilhar este post

Link para o post
Compartilhar em outros sites

Romeu_A    0

Romeu_A
Postado

Resolvido refiz o menu e para o IE usei um java

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