Macar opcion seleccionada

cyber_dark · #1 (**permalink**) 21/12/2011, 21:28

Saludos amigos foreros, tengo un pequeño problema con mi menu, pues me gustaria que la opcion seleccionada quedara marcada, con css (no css3) no se puede pues la propiedad a:active, al dar click en cualquier parte de la pagina hace que se desmarque la opcion, estaba pensando en hacerlo con javascript y me quedo mas o menos asi:

Código:

<html>
  <head>
      <title>Menu</title>
      <style type="text/css">


	.menu {
		padding: 0;
		margin: 0;
		list-style:none;
		height: 41px;
		line-height: 41px;
		background: url(Menu.png) repeat-x;
	}


	.menu li {
		display:block; 
		float: left; 
		position:relative;
		margin-left: 4px;
	}

	.menu li a {
		padding: 4px;
		font-size: 8pt;
		font-family: Arial;
		font-weight: bold;
		color:#655cb6;
		text-decoration: none;

	}

	.menu li a:hover {
		text-decoration: none;
	        background-color: #eeeeee;
	}

	.menu-active {
		text-decoration: none;
	        background-color: #eeeeee;
	}




      </style>



<script type="text/javascript">

window.onload = function cambia()
{

	$listas = document.getElementById('navbar');

	$lista   = $listas.getElementsByTagName('li');

	for ($i=0; $i<$lista.length; $i++) 

	{
	
		$li = $lista[$i];

		$li.onclick="className='menu-active'";
	}

}

 
</script>


  </head>
  <body style="margin:0px">


<ul class="menu" id="navbar">

 <li><a href="#">1</a></li>

 <li><a href="#">2</a></li>

 <li><a href="#">3</a></li>

 <li><a href="#">4</a></li>

</ul>

   </body>
</html>

Con el js hago un array que busque todos los elementos li y cambie de clase cuando se da click, y funciona el problema es que al dar click si se queda marcado pero ocupa todo el alto del menu, y deberia ocupar solo el alto de .menu li a:hover alguna idea de como resolver esto?

dggluz · #2 (**permalink**) 22/12/2011, 00:37

Quizás lo más sencillo sea agregar (en lugar de cambiar) la clase "menu-active" a los list elements en los que se cliquee (un elemento puede pertenecer a varias clases simultáneamente, sólo debes especificarlas separadas con espacios). De este modo, en la definición CSS de "menu-active" sólo te preocupas por el color (creo que es eso lo que querías, ¿verdad?), mientras que el "modelo de caja" (posicionamiento, tamaño, etc.), no cambia, porque el elemento sigue manteniendo la clase "menu", que es la que lo define. Espero te sirva, ¡suerte!

PD: para añadir el evento "onclick" yo usaría listeners, o al menos funciones... aunque lo que hiciste funciona, me parece mucho más prolijo usar funciones.

cyber_dark · #3 (**permalink**) 22/12/2011, 00:50

Muchas gracias por responder, pero no entendi mucho lo que quisiste decir, podrias poner un ejemplo.

dggluz · #4 (**permalink**) 22/12/2011, 01:00

Código Javascript:

Ver originalvar lista=document.getElementById('navbar').getElementsByTagName('li');
for(var i=0; i<lista.length; i++) 
{
    lista[i].addEventListener('click', function(){this.className+=' menu-active'}, false);
}

¡Suerte!

cyber_dark · #5 (**permalink**) 22/12/2011, 01:17

Gracias por responder pero tu script hace lo mismo que el mio, y tiene el mismo problema, cuando uno pasa sobre los enlances se ve esto

Y cuando uno da click asi es como se deberia quedar marcado, pero esto lo que pasa cuando uno da click:

Ocupa toda la altura y es lo que no quiero, creo que mas bien es cosa de css, si pongo esto en el css:

.menu a:focus {
text-decoration: none;
background-color: #eeeeee;
}

Queda marcado pero cuando uno da click en cualquier otra parte de la pagina se desmarca enseguida, existe alguna forma de que esto quede permanente con el js? Intento que cuando de click quiera acceder a esa clase de esta forma pero no funciona:

$li.onclick="className='menu a:focus'";

Se que eso mas que clases son pseudo elementos, pero no busco como usarlos con js alguna solucion? Y de nuevo gracias.

dggluz · #6 (**permalink**) 22/12/2011, 01:21

Lo mejor sería que uses un inspector de DOM (como el Firebug) para ver qué es lo que está ocurriendo exactamente (el problema claramente es de CSS). ¡Suerte!

cyber_dark · #7 (**permalink**) 22/12/2011, 01:28

Gracias por la ayuda, espero que alguien que sepa de css y js me heche una mano =p

dggluz · #8 (**permalink**) 22/12/2011, 10:39

Cita:

Iniciado por cyber_dark

Gracias por la ayuda, espero que alguien que sepa de css y js me heche una mano =p

Ya lo hice.

Hablando en serio, si no quieres utilizar herramientas de desarrollo, te resultará muy difícil desarrollar, sino es como tratar de manejar un auto con los ojos cerrados. Si lo que te molesta es instalar el plugin, puedes usar algunas de las herramientas que ya vienen integradas con los navegadores (por ejemplo, presionando F12 en Chrome, o mejor aún, click derecho sobre el elemento -> inspeccionar elemento).