Se encuentra en:
Menú horizontal
LIBP-0242 (Libro de pautas)
- Área: Manual de estilo para el SGISI
- Tipo de pauta: Directriz
- Carácter de la pauta: Obligatoria
En este libro se ofrece un conjunto de pautas que describen características que debe cumplir el menú horizontal.
Pautas
| Título | Carácter |
|---|---|
| Color de fondo | Obligatoria |
| Enlaces | Obligatoria |
| Enlace seleccionado y evento "hover" | Obligatoria |
Color de fondo
Utilizar una imagen con degradado para el fondo del menú horizontal.
La imagen para el degradado es "bgBarra.png" y puede encontrarse en el recurso "Prototipos de pantalla para la SGISI " o en el caso práctico.
Ejemplo:
Código html:
<div id="menuHorizontal">...</div>
Código CSS:
#menuHorizontal {
background: url("../img/bgBarra.png") repeat-x scroll left top #C1C0BD;
width: 100%;
}
Enlaces
Utilizar una imagen con degradado para el fondo de cada enlace del menú y el texto de color blanco.
La imagen para el degradado es "bgMenu.png " y puede encontrarse en el recurso "Prototipos de pantalla para la SGISI " o en el caso práctico.
Ejemplo:
Código html:
<div id="menuHorizontal">
<ul>
<li><a href="#">Texto</a></li>
</ul>
...
</div>
Código CSS:
#menuHorizontal ul li a {
background: url("../img/bgMenu.png") repeat-x scroll left top #65635A;
border-color: white white #383D44 #383D44;
border-style: solid;
border-width: 1px;
color: white;
}
Enlace seleccionado y evento "hover"
En el enlace seleccionado y en los que se coloque el puntero del ratón, utilizar texto de color blanco y una imagen con degradado para el fondo.
La imagen para el degradado es "bgMenu.png" y puede encontrarse en el recurso "Prototipos de pantalla para la SGISI" o en el caso práctico.
Ejemplo:
Código html:
<div id="menuHorizontal">
<ul>
<li><a class="selected" href="#">Texto</a></li>
</ul>
...
</div>
Código CSS:
#menuHorizontal ul li a:hover, #menuHorizontal ul li a:selected {
background: url("../img/bgMenu.png") repeat-x scroll left top #65635A;
border-color: white white #383D44 #383D44;
border-style: solid;
border-width: 1px;
color: white;
}
