Se encuentra en:
Menú vertical
LIBP-0243 (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ú vertical.
Pautas
| Título | Carácter |
|---|---|
| Texto en negrita | Obligatoria |
| Color | Obligatoria |
| Evento "hover" | Obligatoria |
| Estructura y color | Obligatoria |
Texto en negrita
Utilizar texto en negrita para el primer nivel de enlaces del menú y para el elemento seleccionado.
Color
Utilizar el color #666666 para el texto del menú, y el color #53863F para el elemento seleccionado.
Evento "hover"
Subrayar los enlaces cuando el puntero del ratón se desplaza por encima de ellos.
Cuando se desplaza el ratón por encima de los elementos del menú que no están seleccionados, utilizar el siguiente estilo:
text-decoration: underline;
Estructura y color
Utilizar los estilos que se describen a continuación para formar el menú vertical.
Código html:
<div class="menuVertical">
<ul>
<li>
<a href="#">Opción de primer nivel</a>
<ul>
<li><a href="#">Opción de segundo nivel</a></li>
<li><spam class="selected">Opción seleccionada</spam></li>
...
</ul>
</li>
...
</ul>
</div>
Código CSS:
.menuVertical {
border-color: white #E6E6E6;
border-style: solid;
border-width: 1px;
float: left;
margin: 10px;
width: 20%;
}
.menuVertical ul li {
border-bottom: 1px solid #FFFFFF;
font-weight: bold;
list-style-type: none;
margin: 0;
padding: 0;
}
.menuVertical ul li a {
background: url("../img/bg_headermenu.jpg") repeat-x scroll left bottom #EAEAEA;
color: #666666;
display: block;
padding: 5px 8px;
text-decoration: none;
}
.menuVertical ul li ul li {
border-style: none none solid;
border-width: 0 0 1px;
font-weight: normal;
margin: 0;
}
.menuVertical ul li ul li a, spam {
background: none repeat scroll 0 0 #FFFFFF;
color: #666666;
display: block;
padding: 5px 8px 5px 20px;
}
.menuVertical .selected {
color: #53863F;
}
.selected {
font-weight: bold;
}
La imagen "bg_headermenu.jpg" puede encontrarse en en el recurso "Prototipos de pantalla para la SGISI" o en el caso práctico.
