Menu a partir de un fichero CSS

Hace un tiempo vi en una web un codigo para que una web cargase un menu (simple y normal) directamente desde un fichero css en vez de tener que meter el codigo en cada fichero de la web.
Supongo que servira igual con cualkier codigo pero vamos pongo el ejemplo delmenu pq es en lo que lo kiero usar...

1 Respuesta

Respuesta
1
Si, se pueden utilizar archivos externos como CSS, JS o VBscript, entre otros. Por ejemplo, en el caso de
Un css en el head de tu/s pagina/s debes poner por ejemplo:
<LINK REL="stylesheet" TYPE="text/css" HREF="css/archivo.css">
Y en el archivo.css (que bien puede ser un archivo .txt renombrado a .css) no hay que especificar ningún tag, por ejemplo podía el archivo decir:
A.mapa:hover {
color: #000000;
text-decoration: none;
}
Asimismo para hacer lo mismo con un javascript:
<script language="JavaScript" src="archivo.js"></script>
Y si, con esto uno puede reutilizar el código tantas veces necesite sin tener que insertarlo en cada página, además de que a la hora de tener que modificarlo, al cambiar solamente ese archivo uno se ahorra mucho tiempo.
Muchisimas gracias por fin pude hacer lo que queria
Ok, ahora solo 2 dudas pq estoy intentando añadirlo pero me da error...
Veras el codigo que quiero incluir en el fichero css es un menu simple escrito en html:
<TABLE cellPadding=0 width="95%" border=0>
<TBODY>
<TR>
<TD
style="BORDER-RIGHT: #0099ff 2px groove; BORDER-TOP: #0099ff 2px groove; BORDER-LEFT: #0099ff 2px groove; BORDER-BOTTOM: #0099ff 2px groove"
align=middle width="35%" bgColor=#204460> <P align=center><B><FONT face=Verdana color=#ffc800
size=1>Principal</FONT></B></P></TD>
</TR>
<TR>
<TD onmouseover="javascript:this.style.background='#005893'"
style="BORDER-RIGHT: #0099ff 2px groove; BORDER-TOP: #0099ff 2px groove; BORDER-LEFT: #0099ff 2px groove; BORDER-BOTTOM: #0099ff 2px groove"
onmouseout="javascript:this.style.background='#006CB8'" align=middle
width="35%"><FONT face=Verdana color=#ffffff size=1><B><A
href="index.htm"
target=_top>Inicio</A></B></FONT></TD>
</TR>
<TR>
<TD onmouseover="javascript:this.style.background='#005893'"
style="BORDER-RIGHT: #0099ff 2px groove; BORDER-TOP: #0099ff 2px groove; BORDER-LEFT: #0099ff 2px groove; BORDER-BOTTOM: #0099ff 2px groove"
onmouseout="javascript:this.style.background='#006CB8'" align=middle
width="35%"><FONT face=Verdana color=#ffffff size=1><B><A
href="http://miarroba.com/foros/ver.php?id=423118"
target=_blank>Foro</A></B></FONT></TD>
</TR>
<TR>
<TD onmouseover="javascript:this.style.background='#005893'"
style="BORDER-RIGHT: #0099ff 2px groove; BORDER-TOP: #0099ff 2px groove; BORDER-LEFT: #0099ff 2px groove; BORDER-BOTTOM: #0099ff 2px groove"
onmouseout="javascript:this.style.background='#006CB8'" align=middle
width="35%"><FONT face=Verdana color=#ffffff size=1><B><A
href="miembros.htm"
target=_top>Miembros</A></B></FONT></TD>
</TR>
<TR>
<TD onmouseover="javascript:this.style.background='#005893'"
style="BORDER-RIGHT: #0099ff 2px groove; BORDER-TOP: #0099ff 2px groove; BORDER-LEFT: #0099ff 2px groove; BORDER-BOTTOM: #0099ff 2px groove"
onmouseout="javascript:this.style.background='#006CB8'" align=middle
width="35%"><FONT face=Verdana color=#ffffff size=1><B><A
href="contactar.htm">e-Mail</A></B></FONT></TD>
</TR>
<TR>
<TD onmouseover="javascript:this.style.background='#005893'"
onmouseout="javascript:this.style.background='#006CB8'" align=middle
width="35%"></TD>
</TR>
<TR>
<TD width="35%" height="19"
align=middle bgColor=#204460
style="BORDER-RIGHT: #0099ff 2px groove; BORDER-TOP: #0099ff 2px groove; BORDER-LEFT: #0099ff 2px groove; BORDER-BOTTOM: #0099ff 2px groove">
<P align=center><FONT face=Verdana color=#ffc800
size=1><b>Socios</b></FONT></P></TD>
</TR>
<TR>
<TD onmouseover="javascript:this.style.background='#005893'"
style="BORDER-RIGHT: #0099ff 2px groove; BORDER-TOP: #0099ff 2px groove; BORDER-LEFT: #0099ff 2px groove; BORDER-BOTTOM: #0099ff 2px groove"
onmouseout="javascript:this.style.background='#006CB8'" align=middle
width="35%"><FONT face=Verdana color=#ffffff size=1><B><A
href="traspasos.htm"
target=_top>Compra / Venta</A></B></FONT></TD>
</TR>
<TR>
<TD onmouseover="javascript:this.style.background='#005893'"
style="BORDER-RIGHT: #0099ff 2px groove; BORDER-TOP: #0099ff 2px groove; BORDER-LEFT: #0099ff 2px groove; BORDER-BOTTOM: #0099ff 2px groove"
onmouseout="javascript:this.style.background='#006CB8'" align=middle
width="35%"><FONT face=Verdana color=#ffffff size=1><B><A
href="cesiones.htm"
target=_top>Cesiones</A></B></FONT></TD>
</TR>
<TR>
<TD onmouseover="javascript:this.style.background='#005893'"
style="BORDER-RIGHT: #0099ff 2px groove; BORDER-TOP: #0099ff 2px groove; BORDER-LEFT: #0099ff 2px groove; BORDER-BOTTOM: #0099ff 2px groove"
onmouseout="javascript:this.style.background='#006CB8'" align=middle
width="35%"><FONT face=Verdana color=#ffffff size=1><B><A
href="juveniles.htm"
target=_top>Juveniles</A></B></FONT></TD>
</TR>
<TR>
<TD onmouseover="javascript:this.style.background='#005893'"
style="BORDER-RIGHT: #0099ff 2px groove; BORDER-TOP: #0099ff 2px groove; BORDER-LEFT: #0099ff 2px groove; BORDER-BOTTOM: #0099ff 2px groove"
onmouseout="javascript:this.style.background='#006CB8'" align=middle><FONT face=Verdana color=#ffffff size=1><B><A
href="hacienda.htm"
target=_top>Hacienda</A></B></FONT></TD>
</TR>
<TR>
<TD onmouseover="javascript:this.style.background='#005893'"
style="BORDER-RIGHT: #0099ff 2px groove; BORDER-TOP: #0099ff 2px groove; BORDER-LEFT: #0099ff 2px groove; BORDER-BOTTOM: #0099ff 2px groove"
onmouseout="javascript:this.style.background='#006CB8'" align=middle><FONT face=Verdana color=#ffffff size=1><B><a href="prestamos.htm">Prestamos</a></B></FONT></TD>
</TR>
<TR>
<TD height="19"
align=middle bgColor=#204460
style="BORDER-RIGHT: #0099ff 2px groove; BORDER-TOP: #0099ff 2px groove; BORDER-LEFT: #0099ff 2px groove; BORDER-BOTTOM: #0099ff 2px groove">
<P align=center><FONT face=Verdana color=#ffc800
size=1><b>Extras</b></FONT></P></TD>
</TR>
<TR>
<TD onmouseover="javascript:this.style.background='#005893'"
style="BORDER-RIGHT: #0099ff 2px groove; BORDER-TOP: #0099ff 2px groove; BORDER-LEFT: #0099ff 2px groove; BORDER-BOTTOM: #0099ff 2px groove"
onmouseout="javascript:this.style.background='#006CB8'" align=middle><FONT face=Verdana color=#ffffff size=1><B><A
href="secretario.htm"
target=_top>Secretario</A></B></FONT></TD>
</TR>
<TR>
<TD onmouseover="javascript:this.style.background='#005893'"
style="BORDER-RIGHT: #0099ff 2px groove; BORDER-TOP: #0099ff 2px groove; BORDER-LEFT: #0099ff 2px groove; BORDER-BOTTOM: #0099ff 2px groove"
onmouseout="javascript:this.style.background='#006CB8'" align=middle><FONT face=Verdana color=#ffffff size=1><B><A
href="ojeador.htm"
target=_top>Ojeador</A></B></FONT></TD>
</TR>
<TR>
<TD onmouseover="javascript:this.style.background='#005893'"
style="BORDER-RIGHT: #0099ff 2px groove; BORDER-TOP: #0099ff 2px groove; BORDER-LEFT: #0099ff 2px groove; BORDER-BOTTOM: #0099ff 2px groove"
onmouseout="javascript:this.style.background='#006CB8'" align=middle><FONT face=Verdana color=#ffffff size=1><B><A
href="grafico.htm"
target=_top>Diseño Grafico</A></B></FONT></TD>
</TR>
<TR>
<TD onmouseover="javascript:this.style.background='#005893'"
style="BORDER-RIGHT: #0099ff 2px groove; BORDER-TOP: #0099ff 2px groove; BORDER-LEFT: #0099ff 2px groove; BORDER-BOTTOM: #0099ff 2px groove"
onmouseout="javascript:this.style.background='#006CB8'" align=middle><FONT face=Verdana color=#ffffff size=1><B><A
href="web.htm"
target=_top>Webmaster</A></B></FONT></TD>
</TR>
<TR>
<TD onmouseover="javascript:this.style.background='#005893'"
style="BORDER-RIGHT: #0099ff 2px groove; BORDER-TOP: #0099ff 2px groove; BORDER-LEFT: #0099ff 2px groove; BORDER-BOTTOM: #0099ff 2px groove"
onmouseout="javascript:this.style.background='#006CB8'" align=middle><FONT face=Verdana color=#ffffff size=1><B><A
href="precios.htm"
target=_top>Lista de Precios</A></B></FONT></TD>
</TR>
</TBODY>
</TABLE>
Como ves un codigo totalmente normal, yo lo meto en un txt y lo renombro a .css
Pero ahora el problema que tengo es que no se seguir, intento insertar una llamada a este css para que en laa vista previa de la web salga dicho menu pero no llega a salir dicho menu... ¿¿??
A ver, el archivo html te quedaría algo asi
----------------------
<html>
<head>
<LINK REL="stylesheet" TYPE="text/css" HREF="estilos.css">
</head>
<body>
<TABLE cellPadding=0 width="35%" border=0>
<TBODY>
<TR>
<TD class="tituloMenu">Principal</TD>
</TR>
<TR>
<TD class="itemMenu" onmouseover="javascript:this.style.background='#005893'" onmouseout="javascript:this.style.background='#006CB8'"><A href="index.htm" target=_top class="itemMenu">Inicio</A></TD>
</TR>
<TR>
<TD class="itemMenu"><A
href="http://miarroba.com/foros/ver.php?id=423118"
target=_blank class="itemMenu">Foro</A></TD>
</TR>
<TR>
<TD class="itemMenu" onmouseover="javascript:this.style.background='#005893'" onmouseout="javascript:this.style.background='#006CB8'"><A
href="miembros.htm"
target=_top class="itemMenu">Miembros</A></TD>
</TR>
<TR>
<TD class="itemMenu" onmouseover="javascript:this.style.background='#005893'" onmouseout="javascript:this.style.background='#006CB8'"><A
href="contactar.htm" class="itemMenu">e-Mail</A></TD>
</TR>
<TR>
<TD class="tituloMenu">Socios</TD>
</TR>
<TR>
<TD class="itemMenu" onmouseover="javascript:this.style.background='#005893'" onmouseout="javascript:this.style.background='#006CB8'"><A
href="traspasos.htm"
target=_top class="itemMenu">Compra / Venta</A></TD>
</TR>
<TR>
<TD class="itemMenu" onmouseover="javascript:this.style.background='#005893'" onmouseout="javascript:this.style.background='#006CB8'"><A
href="cesiones.htm"
target=_top class="itemMenu">Cesiones</A></TD>
</TR>
<TR>
<TD class="itemMenu" onmouseover="javascript:this.style.background='#005893'" onmouseout="javascript:this.style.background='#006CB8'"><A
href="juveniles.htm"
target=_top class="itemMenu">Juveniles</A></TD>
</TR>
<TR>
<TD class="itemMenu" onmouseover="javascript:this.style.background='#005893'" onmouseout="javascript:this.style.background='#006CB8'"><A
href="hacienda.htm"
target=_top class="itemMenu">Hacienda</A></TD>
</TR>
<TR>
<TD class="itemMenu" onmouseover="javascript:this.style.background='#005893'" onmouseout="javascript:this.style.background='#006CB8'"><a href="prestamos.htm" class="itemMenu">Prestamos</a></TD>
</TR>
<TR>
<TD class="tituloMenu">Extras</TD>
</TR>
<TR>
<TD class="itemMenu" onmouseover="javascript:this.style.background='#005893'" onmouseout="javascript:this.style.background='#006CB8'"><A
href="secretario.htm"
target=_top class="itemMenu">Secretario</A></TD>
</TR>
<TR>
<TD class="itemMenu" onmouseover="javascript:this.style.background='#005893'" onmouseout="javascript:this.style.background='#006CB8'"><A
href="ojeador.htm"
target=_top class="itemMenu">Ojeador</A></TD>
</TR>
<TR>
<TD class="itemMenu" onmouseover="javascript:this.style.background='#005893'" onmouseout="javascript:this.style.background='#006CB8'"><A
href="grafico.htm"
target=_top class="itemMenu">Diseño Grafico</A></TD>
</TR>
<TR>
<TD class="itemMenu" onmouseover="javascript:this.style.background='#005893'" onmouseout="javascript:this.style.background='#006CB8'"><A
href="web.htm"
target=_top class="itemMenu">Webmaster</A></TD>
</TR>
<TR>
<TD class="itemMenu" onmouseover="javascript:this.style.background='#005893'" onmouseout="javascript:this.style.background='#006CB8'"><A
href="precios.htm"
target=_top class="itemMenu">Lista de Precios</A></TD>
</TR>
</TBODY>
</TABLE>
</body>
</html>
----------------------
Y el archivo css que en este caso yo lo llamé estilos.css:
------------------------
A.itemMenu {
color: #FFFFFF;
text-decoration: none;
}
A.itemMenu:visited {
color: #FFFFFF;
text-decoration: none;
}
A.itemMenu:hover {
color: #FFFFFF;
text-decoration: none;
}
.itemMenu {
font-family: Verdana;
border: 2px groove #0099ff;
font-size: 9px;
font-weight: bold;
background-color: #006CB8;
text-align: center;
}
.tituloMenu {
font-family: Verdana;
border: 2px groove #0099ff;
font-size: 9px;
font-weight: bold;
color: #ffc800;
background-color: #204460;
text-align: center;
line-height: 18px;
}
---------------------------
En este caso, no vale la pena hacer un js para reemplazar los javascripts de las celdas, ya que el problema mayor de esto reside en que deberíamos diferenciar que cedas llevarían ese js y cuales no. Si todas tus celdas de la página reaccionasen al mouse, convendría, pero en este caso, te llevaría el mismo tiempo y esfuerzo dejarlo como está que programandolo todo.
El mouseover/out, sólo puede manejarse mediante javascript y no con css, en el caso de las tablas.
En el caso de un texto con link, yo te armé las clases
A.itemMenu , donde A se refiere al A de <A href="...
Y en este caso si existe las propiedades de Hover (para mouseover, active, link y visited) por lo que bien puede usarse sólo CSS.
Supuse como habías puesto el texto de los links en #FFFFFF, que querías que siempre aparecieran así.
Pero bueno, creo que con este ejemplo ya te darás cuenta mejor de como funciona todo.

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas

Cambiar color de texto on mouse over

Tengo hecho un menu hecho en una tabla (es decir texto con vinculo en cada celda). El texto tiene aplicado un estilo css personalizado para que los links no aparezacan ni azules ni subrayados; quisiera saber como puedo hacer desde el dreamweaver para...
1 respuesta

Tengo un hoja de estilos externa pero en la parte de lo vinculos no me funciona

Tengo un hoja de estilos con el siguiente codigo . Acierto { font-family:Arial; font-size: 16px; color:green; background-color:yellow; /* sacado de la paleta http://jscolor.com/ */ text-align:center; } .no_acierto { font-family:Arial; font-size:...
2 respuestas

Posición de un div

Mi problema es sencillo pero no logro solucionarlo es el siguiente tengo una tabla <tabla> <tr> <td> <div class=menu9" ></div> </td> <td> un formulariio extenso </td> <tr> Resulta que el menu me sale en la mitad de la primera columna yo quiero que se...
1 respuesta

Problema página web acentos y ñ al subirla al servidor

Pues mi problema es el siguiente: He realizado una página recientemente: www.vmc.escolapios.es y me encuentro con el problema de que en local, la página se visualiza perfectamente pero cuando la subo al servidor automáticamente el explorador (IE y...
1 respuesta

Espacio entre lineas

Tengo por por ej el siguiente código <p><font color="#FFFFFF">HOME</font></p> ¿Sabes qué cual es el comando que le tendría que agregar para que haya menos espacio entre lineas? Osea abajo tengo escrita otra linea, pero quiero que este más junta a la...
2 respuestas

Efecto al pasar el ratón por encima

Me gustaría saber qué código hay que meter junto a un texto para que al pasar el ratón por encima el texto destaque más, cambie de color etc. Creo es algo relacionado con un 'class', pero no lo entiendo.
2 respuestas

Problemas con los resultados de los repostes

Tengo un problema al hacer mis reportes en PHP resulta que los resultados de la consulta me salen muy abajo de lo normal
1 respuesta

Clásico juego de memoria con javascript

Estoy usando un código que encontré en la red para un juego de memoria (el clásico juego de destapar imágenes de dos en dos y tratar de hacer las parejas). Podés verlo en funcionamiento en: http://www.tunait.com/javascript/scripts/juegos/memoria.htm...
1 respuesta

Contar checkbox

A ver si me puedes ayudar con lo siguiente: Tengo este codigo que he cogido de aulambra.com: <html> <head> <title>Cuenta CheckBox</title> <script language="javascript"> function contar() { var checkboxes = form1.checkbox; //Array que contiene los...
4 respuestas

Input button con <a href no funciona en IE

Realizo paginas web en php, y ningún problema, pero a veces suelo olvidarme Y pongo algo así <a href="pagina.php"><input type="button" value="Volver"></a> Pero no funciona en INTERNET EXPLORER, alguien tiene la solucion
1 respuesta