Foros del Web » Creando para Internet » CSS »

Menu con css y javascript

Estas en el tema de Menu con css y javascript en el foro de CSS en Foros del Web. Buenas tengo una página donde tengo un menu, el tema es que el menu lo hize con el programa CSSgen, el problema que tengo es ...
  #1 (permalink)  
Antiguo 06/04/2006, 05:45
 
Fecha de Ingreso: abril-2005
Ubicación: Santiago Compostela
Mensajes: 213
Antigüedad: 12 años, 7 meses
Puntos: 0
Menu con css y javascript

Buenas tengo una página donde tengo un menu, el tema es que el menu lo hize con el programa CSSgen, el problema que tengo es que con el firefox me lo hace bien, aparecen las opciones sobre la capa de abajo y los submenus, el problema me viene al verlo con el Internet explorer, cuando selecciono algun menu que esta encima de la capa de abajo no se me muestra, se esconde, pongo el codigo que se ve mejor:

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="menu.css" />
<script type="text/javascript" >
function BrowserDetectLite() {
	var ua = navigator.userAgent.toLowerCase();

	// browser name
	this.isGecko	= (ua.indexOf('gecko') != -1 && ua.indexOf('safari') == -1);
	this.isMozilla	= (this.isGecko && ua.indexOf('gecko/') + 14 == ua.length);
	this.isNS		= ( (this.isGecko) ? (ua.indexOf('netscape') != -1) : ( (ua.indexOf('mozilla') != -1) && (ua.indexOf('spoofer') == -1) && (ua.indexOf('compatible') == -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) && (ua.indexOf('hotjava') == -1) ) );
	this.isIE		= ( (ua.indexOf('msie') != -1) && (ua.indexOf('opera') == -1) && (ua.indexOf('webtv') == -1) );
	this.isSafari	= (ua.indexOf('safari') != - 1);
	this.isOpera	= (ua.indexOf('opera') != -1);
	this.isKonqueror = (ua.indexOf('konqueror') != -1 && !this.isSafari); 
	this.isIcab		= (ua.indexOf('icab') != -1);
	this.isAol		= (ua.indexOf('aol') != -1);
	// spoofing and compatible browsers
	this.isIECompatible = ( (ua.indexOf('msie') != -1) && !this.isIE);
	this.isNSCompatible = ( (ua.indexOf('mozilla') != -1) && !this.isNS && !this.isMozilla);
	
	this.versionMinor = parseFloat(navigator.appVersion);

	
if (this.isNS && this.isGecko) {
		this.versionMinor = parseFloat( ua.substring( ua.lastIndexOf('/') + 1 ) );
	}
	else if (this.isIE && this.versionMinor >= 4) {
		this.versionMinor = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) );
	}
	else if (this.isMozilla) {
		this.versionMinor = parseFloat( ua.substring( ua.indexOf('rv:') + 3 ) );
	}
	else if (this.isSafari) {
		this.versionMinor = parseFloat( ua.substring( ua.lastIndexOf('/') + 1 ) );
	}
	else if (this.isOpera) {
		if (ua.indexOf('opera/') != -1) {
			this.versionMinor = parseFloat( ua.substring( ua.indexOf('opera/') + 6 ) );
		}
		else {
			this.versionMinor = parseFloat( ua.substring( ua.indexOf('opera ') + 6 ) );
		}
	}
	else if (this.isKonqueror) {
		this.versionMinor = parseFloat( ua.substring( ua.indexOf('konqueror/') + 10 ) );
	}
	else if (this.isIcab) {
		if (ua.indexOf('icab/') != -1) {
			this.versionMinor = parseFloat( ua.substring( ua.indexOf('icab/') + 6 ) );
		}
		else {
			this.versionMinor = parseFloat( ua.substring( ua.indexOf('icab ') + 6 ) );
		}
	}

	this.versionMajor = parseInt(this.versionMinor);
	this.geckoVersion = ( (this.isGecko) ? ua.substring( (ua.lastIndexOf('gecko/') + 6), (ua.lastIndexOf('gecko/') + 14) ) : -1 );

	// dom support
	this.isDOM1 = (document.getElementById);
	this.isDOM2Event = (document.addEventListener && document.removeEventListener);

	// css compatibility mode
	this.mode = document.compatMode ? document.compatMode : 'BackCompat';

	// platform
	this.isWin	= (ua.indexOf('win') != -1);
	this.isWin32 = (this.isWin && ( ua.indexOf('95') != -1 || ua.indexOf('98') != -1 || ua.indexOf('nt') != -1 || ua.indexOf('win32') != -1 || ua.indexOf('32bit') != -1 || ua.indexOf('xp') != -1) );
	this.isMac	= (ua.indexOf('mac') != -1);
	this.isUnix  = (ua.indexOf('unix') != -1 || ua.indexOf('sunos') != -1 || ua.indexOf('bsd') != -1 || ua.indexOf('x11') != -1)
	this.isLinux = (ua.indexOf('linux') != -1);

	// specific browser shortcuts
	this.isNS4x = (this.isNS && this.versionMajor == 4);
	this.isNS40x = (this.isNS4x && this.versionMinor < 4.5);
	this.isNS47x = (this.isNS4x && this.versionMinor >= 4.7);
	this.isNS4up = (this.isNS && this.versionMinor >= 4);
	this.isNS6x = (this.isNS && this.versionMajor == 6);
	this.isNS6up = (this.isNS && this.versionMajor >= 6);
	this.isNS7x = (this.isNS && this.versionMajor == 7);
	this.isNS7up = (this.isNS && this.versionMajor >= 7);

	this.isIE4x = (this.isIE && this.versionMajor == 4);
	this.isIE4up = (this.isIE && this.versionMajor >= 4);
	this.isIE5x = (this.isIE && this.versionMajor == 5);
	this.isIE55 = (this.isIE && this.versionMinor == 5.5);
	this.isIE5up = (this.isIE && this.versionMajor >= 5);
	this.isIE6x = (this.isIE && this.versionMajor == 6);
	this.isIE6up = (this.isIE && this.versionMajor >= 6);

	this.isIE4xMac = (this.isIE4x && this.isMac);

}
var browser = new BrowserDetectLite();

function initMenu()
{
	if ( browser.isDOM1
	&& !( browser.isMac && browser.isIE )
	&& !( browser.Opera && browser.versionMajor < 7 )
	&& !( browser.isIE && browser.versionMajor < 5 ) )
	{
		// get some element
		var menu = document.getElementById('menu');
		var lis = menu.getElementsByTagName('li');

		// change the style of the menu
		menu.className="menu";

		// i am searching for ul element in li element
		for ( var i=0; i<lis.length; i++ )
		{
			// is there a ul element ?
			if ( lis.item(i).getElementsByTagName('ul')[0] )
			{
				// improve keyboard navigation with IE
				if ( browser.isIE )
				{
					addAnEvent(lis.item(i),'keyup',visible);
				}

				// apply the method to DOM compliant browsers
				addAnEvent(lis.item(i),'mouseover',visible);
				addAnEvent(lis.item(i),'mouseout',hidden);
				addAnEvent(lis.item(i),'blur',hidden);
				addAnEvent(lis.item(i),'focus',visible);
			}
		}
	}
}

function addAnEvent( target, eventName, functionName )
{
	
	if ( browser.isIE )
	{
		//target.attachEvent( 'on'+eventName, functionName ); // dont work properly with this
		eval('target.on'+eventName+'=functionName');
	}
	
	else
	{
		target.addEventListener( eventName , functionName , true ); // true is important for Opera7
	}
}

/* hide the first ul element of the current element */
function hidden()
{
	/* setAttribute dont work correctly with IE */
	this.getElementsByTagName('ul')[0].style.visibility = "hidden";
}

/* show the first ul element of the current element */
function visible()
{
	this.getElementsByTagName('ul')[0].style.visibility = "visible";
}

/* used to improve keyboard navigation with IE */
function hiddenUl( ul )
{
	if ( browser.isIE )
	{
		var uls = ul.getElementsByTagName('ul');
		for ( var i=0; i<uls.length; i++ )
		{
			uls.item(i).style.visibility = "hidden";
		}
		ul.style.visibility = "hidden";
	}
}

// not very clean but simple
// the function can be run in the HTML for faster display
window.onload=initMenu;

function hideload () {
if (document.getElementById('navi'))
{
 var div_obj = document.getElementById('navi') ;
div_obj.style.display = "block" ;
}
return true;
}


</script>

<title>Generated CSS Menu</title>
<style>
body {background:#FFFFFF;font-family:verdana,serif;margin-top:8%;font-size:12px;}
#navi {display:none;}
.menu {position:absolute;top:5em;left:3em;display:block;margin:0;padding:0;width:500px;}
.menu ul{position:absolute;display:block;width:124px;margin:0;padding:0;}
.menu li ul{visibility:hidden;}
.menu li li ul{position:absolute;top:auto;left:auto;margin-left:124px;margin-top:-23px;}
.menu li{list-style:none;width:124px;height:auto;display:inline;display/**/:block;float:none;float/**/:left;margin:0;padding:0;}
* html .menu li li{display:inline;}
.menu a {text-align:center; background-color:#0099FF; );filter:Alpha(opacity=90);border:1px #000000solid;color:#000000;display:block;width:120px;text-decoration:none;padding:2px 0;margin:1px;font-weight:bold;}
.menu a:hover {background-color:#0000FF;border:1px #000000solid;}
.menu a:focus {background-color: #aaf;}
.menu span {display:none;}
div[id="navi"]>.menu a {text-align:center;background-color:#CCCCCC;);border:1px #000000solid;color:#000000;display:block;width:120px;text-decoration:none;padding:2px 0;margin:1px;}
div[id="navi"]>.menu a:hover {border:1px #000000solid;background-color:#CCCC22;}
#content p a:link, a:visited {}
#content a:hover {}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body onload="initMenu(); hideload(); ">
<div id="navi">
<ul id="menu">
<li><div id="top"><a href="index.html">Home</a></div>
	<ul>
		<li><a href="news.html">News</a></li>
		<li><a href="articles.html">Articles</a>
		<ul>
			<li><a href="styling.html">CSS Sytling</a></li>
			<li><a href="menus.html">CSS Menus</a>
			<ul>
				<li><a href="cssgen.html">CSS Menu Generator</a></li>
			</ul></li>
		</ul></li>
		<li><a href="contact.html">Contact</a></li>
		<li><a href="about.html">About</a></li>
	</ul></li>
<li><div id="top"><a href="company.html">Company</a></div>
	<ul>
		<li><a href="aboutcompany.html">About</a></li>
		<li><a href="products.html">Products</a>
		<ul>
			<li><a href="software.html">Software</a>
			<ul>
				<li><a href="cssgen.html">CSS Menu Generator</a></li>
			</ul></li>
		</ul></li>
	</ul></li>
<li><div id="top"><a href="opensrc.html">Open Source</a></div>
	<ul>
		<li><a href="patents.html">Software Patents</a></li>
		<li><a href="procontra.html">Pro & Con</a>
		<ul>
			<li><a href="overview1.html">Open Source</a></li>
			
		</ul></li>
		<li><a href="future.html">Future</a></li>
	</ul></li>
<li><div id="top"><a href="links.html">Links</a></div>
	<ul>
		<li><a href="http://www.wxwidgets.org">wxWidgets</a></li>
		
	</ul></li>
</ul>
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras ultricies, eros et<br>
tincidunt mattis, lorem arcu porttitor quam, at accumsan mi pede et lacus.<br>
In hac habitasse platea dictumst. Class aptent taciti sociosqu ad litora torquent<br>
</div>
</body>
</html>
alguno sabe a que se debe.
un saludo.
  #2 (permalink)  
Antiguo 06/04/2006, 06:31
MindPaniC
Invitado
 
Mensajes: n/a
Puntos:
basicamente se debe a que internet explorer es una patata pinchada en un palo que interpreta como le da la gana el codigo y no respeta los standars.

mmmm yo creo que la solucion es revisar el codigo y buscar alguna alternativa que funcione en ambos navegadores, la red esta plagada de menus desplegables que funcionan en ambos navegadores, solo googlea un poco y copia lo que veas que funciona en ambos navegadores, es muy sencillo.

saludos
  #3 (permalink)  
Antiguo 06/04/2006, 06:57
Avatar de jcxnet  
Fecha de Ingreso: octubre-2005
Ubicación: Perú
Mensajes: 784
Antigüedad: 12 años, 2 meses
Puntos: 56
Puedes encontrar muchas opciones a escoger en esta dirección:
http://css.maxdesign.com.au/listamatic/
suerte
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:36.