Menus estándard con ul li
Pues bien, como sabéis (algunos) estoy pensando en un rediseño del portal para compartir fotos, asimismo estoy probando partes del diseño en otras webs que necesitaban de un lavado de cara para ver como funcionan algunos elementos : estructura, menus, logo…
Algo que siempre me gusta, es hacer que el menú tenga la estructura tipo ‘<ul><li>‘. Si os habéis leído ya Trascending CSS veréis que un menú ES un listado. Si todavía no conocéis ya esto y seguimos con las tablas ‘retabladas’ no sigas
Pues bien esta es la imagen del menu que queremos y la vamos a conseguir a través de un simple listado con el código html ‘<ul><li>‘.
El código puede parecer complicado la primera vez, lo descubrí en HTMLDog: Son of Suckerfish Dropdowns pero una vez te familiarizar puedes hacer menús semánticos como churros!
El código para incluir en tu html:
<ul id="menu">
<li><a href="domain-index.php">Home</a>
<ul>
<li><a href="domain-index.php">Domains</a></li>
<li><a href="oci-index.php">One-Click Install</a></li>
<li><a href="client-dbs.php">Data Bases</a></li>
</ul>
</li>
<li><a href="logout.php">Logout</a></li>
<li><a href="client-edit.php">Preferences</a></li>
</ul>
El listado (sin ningún estilo aplicado) se vería así en el navegador:
Estilos generales
#menu {
display: block;
margin: 0px 0px 0px 239px;
padding: 0px;
height: 43px;
list-style: none;
background-color: #E6F4FF; }
#menu * {
padding: 0;
margin: 0; }
#menu a {
display: block;
padding: 8px 20px;
background-color: #5188E5;
color: #ffffff;
font-size:24px;
font-weight:bold; }
#menu li ul a {
width: 200px;
display: block;
padding: 4px 20px;
background-color: #6999E9;
color: #ffffff;
font-size:21px;
font-weight:bold; }
#menu li {
float: left;
border-right: 1px solid #E6F4FF;
border-top: 1px solid #E6F4FF; }
En este punto básicamente lo único que hemos hecho es aplicar estilos generales a los menús para que aparezcan con los colores, fuentes, tamaños que corresponden.
Prácticamente dos cosas a destacar:
Le hemos quitado la ‘bolita’ o ‘cuadratito’ típico que aparecen en los listado
#menu {
list-style: none;
...
Los hemos alineado de forma que floten hacia la izquierda
#menu li {
float: left;
...
Como hacemos que se muestren bien los submenus?
La idea es inicialmente enviar al ciberespacio los submenus (-9999px es un espacio no visible de la pantalla). Cuando alguien se ponga encima del un apartado prinecipal se muestra o ‘despliega’ el submenu correspondiente.
#menu li ul {
z-index: 100;
position: absolute;
width: 200px;
left: -9999px;
}
