Cambiar estilo de menu con un clic

MACvsWINDOWS · #1 (**permalink**) 05/12/2011, 06:20

Hola,

estoy intentando hacer una página con una slide de opciones para cambiar las características de ésta. He estado buscando por ahí, pero no he encontrado nada acerca de cambiar el estilo de menú clicando sobre una imagen o enlace. ¿Alguien sabe si esto puede conseguirse? es decir, yo tengo un menú desplegable con varios ejemplos de menú, y quisiera que, al pulsar sobre cada uno, se cambiara el estilo del que hay en la página pro defecto... espero que alguien me oriente un poco de cómo hacerlo porque no encuentro nada.

Saludos

Triby · #2 (**permalink**) 05/12/2011, 06:28

Puedes lograrlo, pero no con PHP, pregunta en CSS o Javascript

Patriarka · #3 (**permalink**) 05/12/2011, 07:24

Voy en contra de Triby: la forma con php (menos poderosa) es asi
tengo el menu:

Código HTML:

Ver original<a href="index.php?fondo=a" >link a</A>
<a href="index.php?fondo=b" >link b</A>
<a href="index.php?fondo=c" >link c</A>
<a href="index.php?fondo=d" >link d</A>
 
y en el body
    <body class="<?php echo (isset($_GET['fondo'])) ? $_GET['fondo'] : ''; ?>" >
 
suponiendo que tenes estas clases definidas
 
a.{
background-color: red;
}
 
b.{
background-color: blue;
}
 
c.{
background-color:  black;
}
 
d.{
background-color: yellow;
}

MACvsWINDOWS · #4 (**permalink**) 05/12/2011, 07:50

Cita:

Iniciado por Patriarka

Voy en contra de Triby: la forma con php (menos poderosa) es asi
tengo el menu:

Código HTML:

Ver original<a href="index.php?fondo=a" >link a</A>
<a href="index.php?fondo=b" >link b</A>
<a href="index.php?fondo=c" >link c</A>
<a href="index.php?fondo=d" >link d</A>
 
y en el body
    <body class="<?php echo (isset($_GET['fondo'])) ? $_GET['fondo'] : ''; ?>" >
 
suponiendo que tenes estas clases definidas
 
a.{
background-color: red;
}
 
b.{
background-color: blue;
}
 
c.{
background-color:  black;
}
 
d.{
background-color: yellow;
}

Hola Patriarka, voy a probarlo y te digo ;)

Triby · #5 (**permalink**) 05/12/2011, 08:36

El navegador ni cuenta se da si es estático o generado por PHP... En el fondo es sólo HTML + CSS

MACvsWINDOWS · #6 (**permalink**) 05/12/2011, 10:00

Os pongo el código para ver qué tengo que añadir y conseguir lo que decía:

Código HTML:

<html>

<head>

<style type="text/css">

body {
	font: 11px/1.5em Verdana;
	}
	
/*menu 1 */
	
#tabs1 {
	float:left;
	width:700px;
	font-size:11px;
	line-height:normal;
	}
	
#tabs1 ul {
	margin:0;
	padding:28px 0px 0 0px;
	list-style:none;
	}
	
#tabs1 li {
	display:inline;
	margin:0;
	padding:0;
	}
	
#tabs1 a {
	float:left;
	background:url("imagenes/menus/menu1/tableft.gif") no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
	}
	
#tabs1 a span {
	float:left;
	display:block;
	background:url("imagenes/menus/menu1/tabright.gif") no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#fff;
	}
	
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs1 a span {float:none;}

/* End IE5-Mac hack */
#tabs1 a:hover span {
	color:#FFF;
	}
	
#tabs1 a:hover {
	background-position:0% -42px;
	}
	
#tabs1 a:hover span {
	background-position:100% -42px;
	}


/*menu 2 */

#tabs2 {
	float:left;
	width:700px;
	font-size:11px;
	line-height:normal;
	}
	
#tabs2 ul {
	margin:0;
	padding:28px 0px 0 0px;
	list-style:none;
	}
	
#tabs2 li {
	display:inline;
	margin:0;
	padding:0;
	}
	
#tabs2 a {
	float:left;
	background:url("imagenes/menus/menu1/tableft.gif") no-repeat left top;
	margin:0;
	padding:0 0 0 4px;
	text-decoration:none;
	}
	
#tabs2 a span {
	float:left;
	display:block;
	background:url("imagenes/menus/menu1/tabright.gif") no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#fff;
	}
	
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs2 a span {float:none;}

/* End IE5-Mac hack */
#tabs2 a:hover span {
	color:#FFF;
	}
	
#tabs2 a:hover {
	background-position:0% -42px;
	}
	
#tabs2 a:hover span {
	background-position:100% -42px;
	}

#menu{
	
	text-align:center;
	
	}


</style>

</head>

<body>

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

<p>

<a href="#">estilo 1</a>
    			
  
  <div id="menu">
  
  <div id="tabs1">
  
 				<ul>
    				<li><a href="web_entera.html"><span>boton 1</span></a></li>
    				<li><a href="web_entera.html"><span>boton 2</span></a></li>
    				<li><a href="web_entera.html"><span>boton 3</span></a></li>
    				<li><a href="web_entera.html"><span>boton 4</span></a></li>
    			</ul>
    			</div>
  
  </div>

</body>

</html>

lo que quiero es eso, que al pulsar sobre el link, el estilo cambie. Sería que cambiara únicamente la imagen de fondo del menú.

ricardo_tu · #7 (**permalink**) 05/12/2011, 10:09

Echale una mirada al código de este enlace
http://www.forosdelweb.com/f18/aport...pagina-898578/
Creo que es exactamente lo que buscas.

MACvsWINDOWS · #8 (**permalink**) 05/12/2011, 12:10

Pero no quiero cambiar el fondo, sólo quiero que se cambie el menu.