Foros del Web » Creando para Internet » CSS »

Ayuda con menu CSS

Estas en el tema de Ayuda con menu CSS en el foro de CSS en Foros del Web. Hola compis! Me estoy volviendo loco habré hecho 100 pruebas, metiendo código por aquí y por allá pero no logro la manera de conseguir que ...
  #1 (permalink)  
Antiguo 07/10/2008, 14:28
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Ayuda con menu CSS

Hola compis!

Me estoy volviendo loco habré hecho 100 pruebas, metiendo código por aquí y por allá pero no logro la manera de conseguir que este menu
http://www.dynamicdrive.com/dynamicindex1/slashdot.htm

Tenga dentro de una categoria por ej. la primera ONLINE TOOLS otro submenu del mismo tipo.

ONLINE TOOLS
boton1
boton2 (boton como ONLINE TOOLS)
....boton2.1
....boton2.2
....boton2.3
boton3
boton4
SUPORT US
PARTNERS
TEST CURRENT

Me podéis echar una mano?

Muchas Gracias por adelantado!
  #2 (permalink)  
Antiguo 08/10/2008, 01:05
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Ayuda con menu CSS

Sigo sin poderlo modificar!
Aquí les dejo el codigo para que vean como esta estructurado.

Código HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css" />
<script type="text/javascript" src="sdmenu/sdmenu.js">
/***********************************************
* Slashdot Menu script- By DimX
* Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
// ]]>
</script>
</head>

<body>

<div id="my_menu" class="sdmenu">
<div>
<span>Online Tools</span>
<a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>
<a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a>
<a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a>
<a href="http://tools.dynamicdrive.com/password/">htaccess Password</a>
<a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a>
<a href="http://tools.dynamicdrive.com/button/">Button Maker</a>
</div>
<div>
<span>Support Us</span>
<a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a>
<a href="http://www.dynamicdrive.com/link.htm">Link to Us</a>
<a href="http://www.dynamicdrive.com/resources/">Web Resources</a>
</div>
<div class="collapsed">
<span>Partners</span>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.codingforums.com">CodingForums</a>
<a href="http://www.dynamicdrive.com/style/">CSS Examples</a>
</div>
<div>
<span>Test Current</span>
<a href="?foo=bar">Current or not</a>
<a href="./">Current or not</a>
<a href="index.html">Current or not</a>
<a href="index.html?query">Current or not</a>
</div>
</div>

</body>
</html> 
LLAMADA AL CSS
Código:
div.sdmenu {
	width: 150px;
	font-family: Arial, sans-serif;
	font-size: 12px;
	padding-bottom: 10px;
	background: url(bottom.gif) no-repeat  right bottom;
	color: #fff;
}
div.sdmenu div {
	background: url(title.gif) repeat-x;
	overflow: hidden;
}
div.sdmenu div:first-child {
	background: url(toptitle.gif) no-repeat;
}
div.sdmenu div.collapsed {
	height: 25px;
}
div.sdmenu div span {
	display: block;
	padding: 5px 25px;
	font-weight: bold;
	color: white;
	background: url(expanded.gif) no-repeat 10px center;
	cursor: default;
	border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
	background-image: url(collapsed.gif);
}
div.sdmenu div a {
	padding: 5px 10px;
	background: #eee;
	display: block;
	border-bottom: 1px solid #ddd;
	color: #066;
}
div.sdmenu div a.current {
	background : #ccc;
}
div.sdmenu div a:hover {
	background : #066 url(linkarrow.gif) no-repeat right center;
	color: #fff;
	text-decoration: none;
}
LLAMADA AL JAVASCRIPT

Código:
function SDMenu(id) {
	if (!document.getElementById || !document.getElementsByTagName)
		return false;
	this.menu = document.getElementById(id);
	this.submenus = this.menu.getElementsByTagName("div");
	this.remember = true;
	this.speed = 3;
	this.markCurrent = true;
	this.oneSmOnly = false;
}
SDMenu.prototype.init = function() {
	var mainInstance = this;
	for (var i = 0; i < this.submenus.length; i++)
		this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
			mainInstance.toggleMenu(this.parentNode);
		};
	if (this.markCurrent) {
		var links = this.menu.getElementsByTagName("a");
		for (var i = 0; i < links.length; i++)
			if (links[i].href == document.location.href) {
				links[i].className = "current";
				break;
			}
	}
	if (this.remember) {
		var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
		var match = regex.exec(document.cookie);
		if (match) {
			var states = match[1].split("");
			for (var i = 0; i < states.length; i++)
				this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
		}
	}
};
SDMenu.prototype.toggleMenu = function(submenu) {
	if (submenu.className == "collapsed")
		this.expandMenu(submenu);
	else
		this.collapseMenu(submenu);
};
SDMenu.prototype.expandMenu = function(submenu) {
	var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
	var links = submenu.getElementsByTagName("a");
	for (var i = 0; i < links.length; i++)
		fullHeight += links[i].offsetHeight;
	var moveBy = Math.round(this.speed * links.length);
	
	var mainInstance = this;
	var intId = setInterval(function() {
		var curHeight = submenu.offsetHeight;
		var newHeight = curHeight + moveBy;
		if (newHeight < fullHeight)
			submenu.style.height = newHeight + "px";
		else {
			clearInterval(intId);
			submenu.style.height = "";
			submenu.className = "";
			mainInstance.memorize();
		}
	}, 30);
	this.collapseOthers(submenu);
};
SDMenu.prototype.collapseMenu = function(submenu) {
	var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
	var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
	var mainInstance = this;
	var intId = setInterval(function() {
		var curHeight = submenu.offsetHeight;
		var newHeight = curHeight - moveBy;
		if (newHeight > minHeight)
			submenu.style.height = newHeight + "px";
		else {
			clearInterval(intId);
			submenu.style.height = "";
			submenu.className = "collapsed";
			mainInstance.memorize();
		}
	}, 30);
};
SDMenu.prototype.collapseOthers = function(submenu) {
	if (this.oneSmOnly) {
		for (var i = 0; i < this.submenus.length; i++)
			if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
				this.collapseMenu(this.submenus[i]);
	}
};
SDMenu.prototype.expandAll = function() {
	var oldOneSmOnly = this.oneSmOnly;
	this.oneSmOnly = false;
	for (var i = 0; i < this.submenus.length; i++)
		if (this.submenus[i].className == "collapsed")
			this.expandMenu(this.submenus[i]);
	this.oneSmOnly = oldOneSmOnly;
};
SDMenu.prototype.collapseAll = function() {
	for (var i = 0; i < this.submenus.length; i++)
		if (this.submenus[i].className != "collapsed")
			this.collapseMenu(this.submenus[i]);
};
SDMenu.prototype.memorize = function() {
	if (this.remember) {
		var states = new Array();
		for (var i = 0; i < this.submenus.length; i++)
			states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
		var d = new Date();
		d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
		document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
	}
};
OPCIONES DE CONFIGURACIÓN

Código:
var myMenu = new SDMenu("main_menu"); // ID of the menu element
// Default values...
myMenu.speed = 3;                     // Menu sliding speed (1 - 5 recomended)
myMenu.remember = true;               // Store menu states (expanded or collapsed) in cookie and restore later
myMenu.oneSmOnly = false;             // One expanded submenu at a time
myMenu.markCurrent = true;            // Mark current link / page (link.href == location.href)

myMenu.init();

// Additional methods...
var firstSubmenu = myMenu.submenus[0];
myMenu.expandMenu(firstSubmenu);      // Expand a submenu
myMenu.collapseMenu(firstSubmenu);    // Collapse a menu
myMenu.toggleMenu(firstSubmenu);      // Expand if collapsed and collapse if expanded

myMenu.expandAll();                   // Expand all submenus
myMenu.collapseAll();                 // Collapse all submenus
Con esos códigos intento ser capaz de hacer lo que indico en el primer post, pero no lo consigo arggggh. Alguien le puede echar un vistazo?

Muchas gracias :)
  #3 (permalink)  
Antiguo 08/10/2008, 04:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda con menu CSS

Bueno, creo que es sencillo: primero he añadido ese segundo nivel que dices:

Cita:
<html>
<head>
<link rel="stylesheet" type="text/css" href="sdmenu.css" />
<script type="text/javascript" src="sdmenu.js">
/***********************************************
* Slashdot Menu script- By DimX
* Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
<script type="text/javascript">
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
// ]]>
</script>
</head>

<body>

<div id="my_menu" class="sdmenu">
<div>
<span>Online Tools</span>
<a href="http://tools.dynamicdrive.com/imageoptimizer/">Image Optimizer</a>
<a href="http://tools.dynamicdrive.com/favicon/">FavIcon Generator</a>
<div>
<span class="segundo">Segundo nivel</span>
<a href="http://tools.dynamicdrive.com/imageoptimizer/">111</a>
<a href="http://tools.dynamicdrive.com/favicon/">222</a>
<a href="http://www.dynamicdrive.com/emailriddler/">333</a>
</div>

<a href="http://www.dynamicdrive.com/emailriddler/">Email Riddler</a>
<a href="http://tools.dynamicdrive.com/password/">htaccess Password</a>
<a href="http://tools.dynamicdrive.com/gradient/">Gradient Image</a>
<a href="http://tools.dynamicdrive.com/button/">Button Maker</a>
</div>
<div>
<span>Support Us</span>
<a href="http://www.dynamicdrive.com/recommendit/">Recommend Us</a>
<a href="http://www.dynamicdrive.com/link.htm">Link to Us</a>
<a href="http://www.dynamicdrive.com/resources/">Web Resources</a>
</div>
</body>
</html>
Y después he modificado un selector de la css y he añadido otro, sólo para que se parezca a los otros enlaces. Verás que sale uno que pone "Segundo nivel", que he dejado en negrita para que destaque sobre el resto y se vea que tiene otro subnivel dentro de él:

Cita:
div.sdmenu div a, div.sdmenu div span.segundo {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #066;
}
div.sdmenu div span.segundo {text-decoration: underline;}
Pruébalo, que yo creo que funciona como quieres.
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 08/10/2008, 15:17
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Ayuda con menu CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
Bueno, creo que es sencillo: primero he añadido ese segundo nivel que dices:



Y después he modificado un selector de la css y he añadido otro, sólo para que se parezca a los otros enlaces. Verás que sale uno que pone "Segundo nivel", que he dejado en negrita para que destaque sobre el resto y se vea que tiene otro subnivel dentro de él:



Pruébalo, que yo creo que funciona como quieres.
Joder nen! llevaba casi una semana intentándolo! que crack, muchisimas gracias, no tengo palabras!

Mikmoro for president :D

:apla uso:: aplauso:
  #5 (permalink)  
Antiguo 08/10/2008, 15:36
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Ayuda con menu CSS

Perdona dar la tabarra otra vez, pero mientras probaba el submenú me he dado cuenta de una cosa que antes al tener un solo nivel no pasaba.

Resulta que si tienes en el primer apartado 6 menus que contienen a su vez 4 apartatados cada uno. Cuando desplegas el primer apartado parece como si cargase todo el modulo entero. Hace un efecto visual nada limpio, claro... o como quieras llamarlo.

Es decir se expande hasta el maximo y luego se contrae todo. Y solo aparece cuando hay apartados que a su vez contienen a otros apartados.

Dejo el codigo completo por si alguien quiere probar el efecto que produce al desplegar el primer apartado.

Lo he probado tanto en FF como en IE, pero sucede lo mismo y la verdad es que sino fuese por ese detalle el menu esta chulo.

Código HTML:
<!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">
  <head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Slashdot's Menu</title>
	<link rel="stylesheet" type="text/css" href="sdmenu/sdmenu.css" />
	<script type="text/javascript" src="sdmenu/sdmenu.js">
		/***********************************************
		* Slashdot Menu script- By DimX
		* Submitted to Dynamic Drive DHTML code library: http://www.dynamicdrive.com
		* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
		***********************************************/
	</script>
	<script type="text/javascript">
	// <![CDATA[
	var myMenu;
	window.onload = function() {
		myMenu = new SDMenu("my_menu");
		myMenu.init();
	};
	// ]]>
	</script>
  </head>
  <body>

    <div style="float: left" id="my_menu" class="sdmenu">
      <div>
        <span>Apartado 1</span>
		<div>
			<span class="segundo">Seccion 1</span>
			<a href="pag2.html">aaaaa 1</a>
			<a href="pag2.html">aaaaa 2</a>
			<a href="pag2.html">aaaaa 3</a>
			<a href="pag2.html">aaaaa 4</a>
		</div>
        <div>
			<span class="segundo">Seccion 2</span>
			<a href="pag2.html">bbbbb 1</a>
			<a href="pag2.html">bbbbb 2</a>
			<a href="pag2.html">bbbbb 3</a>
			<a href="pag2.html">bbbbb 4</a>
		</div>
        <div>
			<span class="segundo">Seccion 3</span>
			<a href="pag2.html">ccccc 1</a>
			<a href="pag2.html">ccccc 2</a>
			<a href="pag2.html">ccccc 3</a>
			<a href="pag2.html">ccccc 4</a>
		</div>
        <div>
			<span class="segundo">Seccion 4</span>
			<a href="pag2.html">ddddd 1</a>
			<a href="pag2.html">ddddd 2</a>
			<a href="pag2.html">ddddd 3</a>
			<a href="pag2.html">ddddd 4</a>
		</div>
        <div>
			<span class="segundo">Seccion 5</span>
			<a href="pag2.html">eeeee 1</a>
			<a href="pag2.html">eeeee 2</a>
			<a href="pag2.html">eeeee 3</a>
			<a href="pag2.html">eeeee 4</a>
		</div>
		<div>
			<span class="segundo">Seccion 6</span>
			<a href="pag2.html">fffff 1</a>
			<a href="pag2.html">fffff 2</a>
			<a href="pag2.html">fffff 3</a>
			<a href="pag2.html">fffff 4</a>
		</div>
      </div>
      <div>
        <span>Apartado 2</span>
        <a href="pag2.html">ggggg 1</a>
        <a href="pag2.html">ggggg 2</a>
		<a href="pag2.html">ggggg 3</a>
      </div>
      <div class="collapsed">
        <span>Apartado 3</span>
        <a href="pag2.html">hhhhh 1</a>
		<a href="pag2.html">hhhhh 2</a>
		<a href="pag2.html">hhhhh 3</a>
      </div>
    </div>
  </body>
</html> 
HOJA DE ESTILO
Código:
div.sdmenu {
	width: 150px;
	font-family: Arial, sans-serif;
	font-size: 12px;
	padding-bottom: 10px;
	background: url(bottom.gif) no-repeat  right bottom;
	color: #fff;
}
div.sdmenu div {
	background: url(title.gif) repeat-x;
	overflow: hidden;
}
div.sdmenu div:first-child {
	background: url(toptitle.gif) no-repeat;
}
div.sdmenu div.collapsed {
	height: 25px;
}
div.sdmenu div span {
	display: block;
	padding: 5px 25px;
	font-weight: bold;
	color: white;
	background: url(expanded.gif) no-repeat 10px center;
	cursor: default;
	border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
	background-image: url(collapsed.gif);
}
div.sdmenu div a {
	padding: 5px 10px;
	background: #eee;
	display: block;
	border-bottom: 1px solid #ddd;
	color: #066;
}
div.sdmenu div a.current {
	background : #ccc;
}
div.sdmenu div a:hover {
	background : #066 url(linkarrow.gif) no-repeat right center;
	color: #fff;
	text-decoration: none;
}
div.sdmenu div a, div.sdmenu div span.segundo {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #066;
}
div.sdmenu div span.segundo {text-decoration: underline;}
JAVASCRIPT
Código:
function SDMenu(id) {
	if (!document.getElementById || !document.getElementsByTagName)
		return false;
	this.menu = document.getElementById(id);
	this.submenus = this.menu.getElementsByTagName("div");
	this.remember = true;
	this.speed = 3;
	this.markCurrent = true;
	this.oneSmOnly = false;
}
SDMenu.prototype.init = function() {
	var mainInstance = this;
	for (var i = 0; i < this.submenus.length; i++)
		this.submenus[i].getElementsByTagName("span")[0].onclick = function() {
			mainInstance.toggleMenu(this.parentNode);
		};
	if (this.markCurrent) {
		var links = this.menu.getElementsByTagName("a");
		for (var i = 0; i < links.length; i++)
			if (links[i].href == document.location.href) {
				links[i].className = "current";
				break;
			}
	}
	if (this.remember) {
		var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
		var match = regex.exec(document.cookie);
		if (match) {
			var states = match[1].split("");
			for (var i = 0; i < states.length; i++)
				this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
		}
	}
};
SDMenu.prototype.toggleMenu = function(submenu) {
	if (submenu.className == "collapsed")
		this.expandMenu(submenu);
	else
		this.collapseMenu(submenu);
};
SDMenu.prototype.expandMenu = function(submenu) {
	var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
	var links = submenu.getElementsByTagName("a");
	for (var i = 0; i < links.length; i++)
		fullHeight += links[i].offsetHeight;
	var moveBy = Math.round(this.speed * links.length);
	
	var mainInstance = this;
	var intId = setInterval(function() {
		var curHeight = submenu.offsetHeight;
		var newHeight = curHeight + moveBy;
		if (newHeight < fullHeight)
			submenu.style.height = newHeight + "px";
		else {
			clearInterval(intId);
			submenu.style.height = "";
			submenu.className = "";
			mainInstance.memorize();
		}
	}, 30);
	this.collapseOthers(submenu);
};
SDMenu.prototype.collapseMenu = function(submenu) {
	var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
	var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
	var mainInstance = this;
	var intId = setInterval(function() {
		var curHeight = submenu.offsetHeight;
		var newHeight = curHeight - moveBy;
		if (newHeight > minHeight)
			submenu.style.height = newHeight + "px";
		else {
			clearInterval(intId);
			submenu.style.height = "";
			submenu.className = "collapsed";
			mainInstance.memorize();
		}
	}, 30);
};
SDMenu.prototype.collapseOthers = function(submenu) {
	if (this.oneSmOnly) {
		for (var i = 0; i < this.submenus.length; i++)
			if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
				this.collapseMenu(this.submenus[i]);
	}
};
SDMenu.prototype.expandAll = function() {
	var oldOneSmOnly = this.oneSmOnly;
	this.oneSmOnly = false;
	for (var i = 0; i < this.submenus.length; i++)
		if (this.submenus[i].className == "collapsed")
			this.expandMenu(this.submenus[i]);
	this.oneSmOnly = oldOneSmOnly;
};
SDMenu.prototype.collapseAll = function() {
	for (var i = 0; i < this.submenus.length; i++)
		if (this.submenus[i].className != "collapsed")
			this.collapseMenu(this.submenus[i]);
};
SDMenu.prototype.memorize = function() {
	if (this.remember) {
		var states = new Array();
		for (var i = 0; i < this.submenus.length; i++)
			states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
		var d = new Date();
		d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
		document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
	}
};
O para quien quiera descargarse todo el codigo de la web.
http://www.dynamicdrive.com/dynamicindex1/sdmenu.zip

Gracias de nuevo!
  #6 (permalink)  
Antiguo 08/10/2008, 17:00
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda con menu CSS

Eso desgraciadamente se debe al propio diseño del javascript, por el cual, al expandir un submenú se expanden a su vez los submenús internos y luego se recogen los que son collapsed.
Este script está diseñado así, y creo que para hacer lo que quieres hay que currarse casi todo un segundo script.
__________________
Visita mi nueva web idplus.org
  #7 (permalink)  
Antiguo 09/10/2008, 01:23
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Ayuda con menu CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
Eso desgraciadamente se debe al propio diseño del javascript, por el cual, al expandir un submenú se expanden a su vez los submenús internos y luego se recogen los que son collapsed.
Este script está diseñado así, y creo que para hacer lo que quieres hay que currarse casi todo un segundo script.
Eso mismo pensaba yo, que la culpa era del javascript y las opciones que trae por defecto (he jugado con todas) no me lo han solucionado.

Pero esto no es la primera vez que me pasa. Despues de probar muchisimos menus de este tipo, no he encontrado todavia uno que tenga subcategorias como las que has añadido ;) que se no le pase ese "efecto".

No existen!

Saludos
  #8 (permalink)  
Antiguo 09/10/2008, 07:03
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Ayuda con menu CSS

Hola Neodani
¿Y por qué no pasas por el supermercado de los Mikmenús css y miras?

Un saludo
Cd௫
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #9 (permalink)  
Antiguo 09/10/2008, 08:13
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda con menu CSS

Prueba a cambiar en el script el "a" por "span", exactamente aquí:

Cita:
SDMenu.prototype.expandMenu = function(submenu) {
var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
var links = submenu.getElementsByTagName("span");
for (var i = 0; i < links.length; i++)
fullHeight += links[i].offsetHeight;
var moveBy = Math.round(this.speed * links.length);
Quizá después pueda mirarlo con más detenimiento, pero de momento eso arregla el asunto que comentas, aunque cambie un poquillo el efecto.
__________________
Visita mi nueva web idplus.org
  #10 (permalink)  
Antiguo 09/10/2008, 13:58
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Ayuda con menu CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
Prueba a cambiar en el script el "a" por "span", exactamente aquí:



Quizá después pueda mirarlo con más detenimiento, pero de momento eso arregla el asunto que comentas, aunque cambie un poquillo el efecto.
Yo tb creo que la cosa esta en ese modulo

Código:
SDMenu.prototype.expandMenu = function(submenu) {
	var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
	var links = submenu.getElementsByTagName("span"); /* a */
	for (var i = 0; i < links.length; i++)
		fullHeight += links[i].offsetHeight;
	var moveBy = Math.round(this.speed * links.length);
El problema es que la parte de desplegar el primer nivel lo hace bien gracias al span, pero como dentro del span hay divs cuando intentas ver un apartado del segundo nivel el efecto cambia y lo muestra lentamente hasta mostrar el primer elemento pero el resto de elementos te los "expulsa" inmediatamente y el efecto vuelve a ser raro.

Si alguien puede echarnos una mano, casi lo tenemos!

Muchas gracias
  #11 (permalink)  
Antiguo 10/10/2008, 11:31
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda con menu CSS

Mira, te he hecho un ejemplo con jquery. A ver si te gusta:

http://www.araudi.net/forosdelweb/de...le_jquery.html
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 10/10/2008, 12:23
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Ayuda con menu CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
Mira, te he hecho un ejemplo con jquery. A ver si te gusta:

http://www.araudi.net/forosdelweb/de...le_jquery.html
Y tanto que me gusta, hace lo que pedía desde el principio. Cómo lo hiciste, es decir... como supiste que tenias que hacerlo así? existe algun tutorial o algo para saber manejar esta libreria? al parecer bastante potente no?

Gracias de nuevo Mikmoro!!
  #13 (permalink)  
Antiguo 10/10/2008, 12:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda con menu CSS

Nada, echándole un poco de imaginación, viendo cuál era el problema de lo que tú tenías y cómo resolverlo. Ya conocía jquery, y en su página tiene muchísima información. Y sí, creo que es realmente potente; tiene mil cosas para hacer.

Fíjate bien en el archivo neodani.js para ver qué tendrás que cambiar cuando modifiques el menú. Y como yo sé poco de javascript, si encima sabes cómo iterar por los elementos igual hasta te ahorras unas cuantas líneas de código.

Saludos.
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 10/10/2008, 14:19
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Ayuda con menu CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
Nada, echándole un poco de imaginación, viendo cuál era el problema de lo que tú tenías y cómo resolverlo. Ya conocía jquery, y en su página tiene muchísima información. Y sí, creo que es realmente potente; tiene mil cosas para hacer.

Fíjate bien en el archivo neodani.js para ver qué tendrás que cambiar cuando modifiques el menú. Y como yo sé poco de javascript, si encima sabes cómo iterar por los elementos igual hasta te ahorras unas cuantas líneas de código.

Saludos.
Dejando de lado el tema del codigo CSS, me pregunto otra vez porque las cosas funcionan a medias!

Te pongo los codigos.

Código HTML:
<!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="es" lang="es-es">
<head>
<title>Columnas equilibradas - Recursos CSS - araudi.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="Mikel Morote Donazar - Praxis Iru&ntilde;ea SLL" />
<meta name="Language" content="espa&ntilde;ol" />
<script src="jquery-1.1.4.pack.js"></script>
<script src="neodani.js"></script>
<style type="text/css">

a {display: block;}
.nivel2 {color: #f00;}

#menu {
	width: 150px;
	font-family: Arial, sans-serif;
	font-size: 12px;
	padding-bottom: 10px;
	background: #EEEEEE;
	color: #000;
}
.nivel1{
background:#9CCEEF;
border-bottom:1px solid #DDDDDD;
color:white;
cursor:default;
display:block;
font-weight:bold;
padding:5px 15px;
width:100%;
}

.nivel2{
background:#EEEEEE none repeat scroll 0 0;
border-bottom:1px solid #DDDDDD;
color:#006666;
display:block;
padding-top:5px;
padding-left:10px;
width: 170px;
font-weight:bold:
}

.nivel2 a{
background:#EEEEEE none repeat scroll 0 0;
border-bottom:1px solid #DDDDDD;
color:#006666;
display:block;
padding:0px 0px;
width: 150px;
}

.nivel3 a{
background:#EEEEEE none repeat scroll 0 0;
border-bottom:1px solid #DDDDDD;
color:#006666;
display:block;
padding:5px 10px;
width: 150px;
}
.nivel3 a:hover {
	background : #EFBD9C url(sdmenu/linkarrow.gif) no-repeat right center;
	color: #fff;
	text-decoration: none;
	width: 150px;
}
#dos{
border-bottom:1px solid #DDDDDD;
color:white;
cursor:default;
display:block;
font-weight:bold;
padding:5px 15px;
width:100%;
}

</style>
</head>
<body>
 <div id="menu">
 <div class="nivel1" id="uno">Apartado 1 </div>

 <div class="nivel2" id="unoA">Seccion 1
 <div class="nivel3">
 <a href="pag2.html">aaaaa 1</a>
 <a href="pag2.html">aaaaa 2</a>
 <a href="pag2.html">aaaaa 3</a>
 <a href="pag2.html">aaaaa 4</a>
 </div>
 </div>
 <div class="nivel2" id="unoB">Seccion 2
 <div class="nivel3">
 <a href="pag2.html">bbbbb 1</a>
 <a href="pag2.html">bbbbb 2</a>
 <a href="pag2.html">bbbbb 3</a>
 <a href="pag2.html">bbbbb 4</a>
 </div>
 </div>
 <div class="nivel2" id="unoC">Seccion 3
 <div class="nivel3">
 <a href="pag2.html">ccccc 1</a>
 <a href="pag2.html">ccccc 2</a>
 <a href="pag2.html">ccccc 3</a>
 <a href="pag2.html">ccccc 4</a>
 </div>
 </div>
 <div class="nivel2" id="unoD">Seccion 4
 <div class="nivel3">
 <a href="pag2.html">ddddd 1</a>
 <a href="pag2.html">ddddd 2</a>
 <a href="pag2.html">ddddd 3</a>
 <a href="pag2.html">ddddd 4</a>
 </div>
 </div>

 <div class="nivel1" id="dos">Apartado 2
 <div class="nivel2">
 <a href="pag2.html">ggggg 1</a>
 <a href="pag2.html">ggggg 2</a>
 <a href="pag2.html">ggggg 3</a>
 </div>
 </div>
 <div class="nivel1" id="tres">Apartado 3
 <div class="nivel2">
 <a href="pag2.html">hhhhh 1</a>
 <a href="pag2.html">hhhhh 2</a>
 <a href="pag2.html">hhhhh 3</a>
 </div>
 </div>
 </div>
 </body>
</html> 
Código:
$(document).ready(function(){
 $("div.nivel2").hide();
 $("div.nivel3").hide();
 $("div#uno").click(function () {
 $("#unoA, #unoB, #unoC, #unoD").slideToggle("slow");
 });
 $("div#dos").click(function () {
 $("div#dos div.nivel2").slideToggle("slow");
 });
 $("div#tres").click(function () {
 $("div#tres div.nivel2").slideToggle("slow");
 });
 $("div#unoA").click(function () {
 $("div#unoA div.nivel3").slideToggle("slow");
 });
 $("div#unoB").click(function () {
 $("div#unoB div.nivel3").slideToggle("slow");
 });
 $("div#unoC").click(function () {
 $("div#unoC div.nivel3").slideToggle("slow");
 });
 $("div#unoD").click(function () {
 $("div#unoD div.nivel3").slideToggle("slow");
 });

 });
Porque cuando desplego el apartado uno sus subcategorias se "entrebancan" al salir, y cuando desplego alguna de esas categorias el efecto es limpio y claro como debería ser!

Sabes a lo que me refiero?
Cuandos desplegas cualquiera de las 4 secciones se muestra un efecto nitido.
En cambio cuando seleccionas el primer apartado se entrecorta, se apelotona!

Mi no entenderrrrrrrrrrr
  #15 (permalink)  
Antiguo 10/10/2008, 16:08
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda con menu CSS

No ocurre todas la veces, y a veces en los submenús también ocurre. Dale un montón de veces a cada uno y lo verás. Pero bueno, a mi me pasa muyyy poquito golpe al arrancar. No sé, supongo que eso ya depende de la velocidad de la caché, del procesador, del navegador, etc.
__________________
Visita mi nueva web idplus.org
  #16 (permalink)  
Antiguo 11/10/2008, 04:10
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Ayuda con menu CSS

Cita:
Iniciado por Mikmoro Ver Mensaje
No ocurre todas la veces, y a veces en los submenús también ocurre. Dale un montón de veces a cada uno y lo verás. Pero bueno, a mi me pasa muyyy poquito golpe al arrancar. No sé, supongo que eso ya depende de la velocidad de la caché, del procesador, del navegador, etc.
Pues vaya full! en alguna web los he visto y no hacian ese efecto tan extraño! el problema es que no recuerda cual era... seguiré mirando.

Gracias por todo!
  #17 (permalink)  
Antiguo 11/10/2008, 06:24
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Ayuda con menu CSS

No obstante te diré una cosa: para gustos están los colores, pero personalmente no obligaría a un visitante a hacer dos veces clik sólo para ver las opciones de un menú, y una tercera como mínimo para acceder al contenido de cualquier sección.

Como siempre, si está muy interesado en el contenido hará lo que haga falta, pero si no, si es un visitante ocasional, lo más probable es que se marche. Poner dificultades añadidas no me parece buena política de diseño.

Pero como digo, cada uno es muy libre.
__________________
Visita mi nueva web idplus.org
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 14:07.