Hola magoote:
Yo, últimamente, estoy usando la siguiente manera a la hora de realizar menús comunes a varias páginas.
Todo se basa en un javascript (.js), unos estilos (.css) y el archivo dónde vaya el menú (bien .html, como, .asp, .php,...)
Los códigos serían los siguientes
xmenu.js
Código:
<!--
var pagina = document.getElementById('nomPag').value;
if (pagina == "index") {
document.write ('<span class="estasAqui">Inicio</span> || ');
} else {
document.write ('<a href="xindex.html" class="menuSup" onmouseover="window.status=\' • Volver a Inicio •\';return true;" onmouseout="window.status=\'\';return true;">Inicio</a> || ');
}
if (pagina == "casas") {
document.write ('<span class="estasAqui">Casas Rurales</span> || ');
} else {
document.write ('<a href="xcasasrurales.html" class="menuSup" onmouseover="window.status=\' • Listado de Casas Rurales •\';return true;" onmouseout="window.status=\'\';return true;">Casas Rurales</a> || ');
}
if (pagina == "apartam") {
document.write ('<span class="estasAqui">Apartamentos</span> || ');
} else {
document.write ('<a href="xapartamentos.html" class="menuSup" onmouseover="window.status=\' • Listado de Apartamentos •\';return true;" onmouseout="window.status=\'\';return true;">Apartamentos</a> || ');
}
if (pagina == "foro") {
document.write ('<span class="estasAqui">Foro</span> || ');
} else {
document.write ('<a href="xforo.html" class="menuSup" onmouseover="window.status=\' • Entrar en el Foro •\';return true;" onmouseout="window.status=\'\';return true;">Foro</a> || ');
}
if (pagina == "contact") {
document.write ('<span class="estasAqui">Contacto</span>');
} else {
document.write ('<a href="xcontacto.html" class="menuSup" onmouseover="window.status=\' • Ir a Contacto •\';return true;" onmouseout="window.status=\'\';return true;">Contacto</a>');
}
//-->
xestilos.css
Código:
.estasAqui { /* ESTILO PARA CAMBIO DE COLOR DE GRIS A VERDE EN TODAS LAS adm_... .asp */
color: #ffffff;
background-color: #339999;
}
a.menuSup:link {
text-decoration: none;
color: #009933;
}
a.menuSup:visited {
text-decoration: none;
color: #009933;
}
a.menuSup:hover {
text-decoration: none;
color: #009933;
background-color: #ffff99;
}
y una de las páginas como la de inicio
xindex.html
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inicio</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="xestilos.css" rel="stylesheet" type="text/css" />
</head>
<body>
<input name="nomPag" id="nomPag" type="hidden" value="index" />
<script src="xmenu.js" type="text/javascript"></script>
</body>
</html>
Si te fijas en el archivo .js, dónde está construído el menú, todo va por condiciones viendo el valor que tenga el campo oculto que hay en el archivo .html.
En este ejemplo, te he puesto un menú de cinco vínculos para cinco páginas. Así,
- el valor del campo oculto de "xindex.html" es:
index
- el valor del campo oculto de "xcasasrurales.html" es:
casas
- el valor del campo oculto de "xapartamentos.html" es:
apartam
- el valor del campo oculto de "xforo.html" es:
foro
- el valor del campo oculto de "xcontacto.html" es:
contact
Gracias a los estilos definidos, que como sabrás puedes configurarlos como quieras, cuando estás en la página la referencia a la página se ve de una manera y cuando es vínculo se ve de otra.
Cuando quieras añadir otra página a tu sitio web, tendrás que:
- poner otro campo de formulario oculto con el valor definido que quieras en la nueva página
- un nuevo
if...else... dentro del archivo xmenu.js referido a la nueva página.
Bueno, creo que te explicado todo. Pruébalo si quieres, a ver si te sirve y es lo que querías. Ya me dirás...
Saludos,
zacktagnan.
==============================================
