Referències:
- http://css.maxdesign.com.au/listamatic/index.htm
A la pràctica 2 d'aquest mòdul s'ha vist que, gràcies a la regla de presentació display: inline, es pot disposar els elements d'una llista alineats horitzontalment, enlloc de verticalment.
En aquest pràctica es veurà els passos a seguir per transformar una llista d'enllaços en un sofisticat menú de pestanyes de navegació, utilitzant tan sols algunes regles d'estil i mantenint la validació dels estàndards del W3C.
Es prendrà com exemple una llista d'enllaços que identifiquen diferents apartats d'una web de centre.
<ul> <li><a href="inici.html">Inici</a></li> <li><a href="qui.html">Qui som?</a></li> <li><a href="secretaria.html">Secretaria</a></li> <li><a href="estudis.html">Estudis</a></li> <li><a href="enllacos.html">Enllaços</a></li> </ul>
Obriu el fitxer m4p6.html amb el vostre editor favorit i, al mateix temps, obriu-lo amb el navegador Mozilla Firefox. Al final del procés comprovareu el resultats a diferents navegadors.
En primer pas serà identificar la llista d'enllaços com el menú de navegació. Per fer-ho haureu d'afegir a l'etiqueta ul l'atribut id amb el valor navegació. D'altra banda, també caldrà identificar quina serà la pestanya activa. A l'exemple que es treballarà, la pestanya activa correspon a la pàgina inici.html per tant, a l'element li que fa referència a la pàgina inici.html se le asignarà un id amb el valor actiu. Aquesta identificació és important donat que us permetrà construir les següents regles d'estil exclusives per al menú de navegació.
<ul id="navegacio"> <li><a id="actiu" href="inici.html">Inici</a></li> <li><a href="qui.html">Qui som?</a></li> <li><a href="secretaria.html">Secretaria</a></li> <li><a href="estudis.html">Estudis</a></li> <li><a href="enllacos.html">Enllaços</a></li> </ul>
A continuació caldrà eliminar aquells elements gràfics que, per defect, apareixen representats. És a dir: els bullets característics de les llistes desordenades i el color blau i el subratllat dels enllaços:
#navegacio li {
list-style-type: none;
}
#navegacio li a {
text-decoration: none;
color: #3c3c3c;
}
Visualment, s'obté el següent resultat:
El següent pas és modificar la condició d'element de bloc de cada ítem de la llista i fer que actui com a un element en línia. Aquest canvi provocarà que tots els elements de la llista quedin dsiposats sobre una línia horitzontal imaginària. La propietat que permet aconseguir aquest canvi és display: inline assignada a l'element li.
#navegacio li {
list-style-type: none;
display: inline;
}
#navegacio li a {
text-decoration: none;
color: #3c3c3c;
}
Visualment, s'obté el següent resultat:
Per crear les pestanyes caldrà determinar la propietat border per a cada ítem de la llista. En aquest cas, i de moment, només interessa dibuixar les vores superior, esquerra i dreta. La vora inferior no es dibuixarà per ara, per tal de poder diferènciar, més endavant, la pestanya activa de la resta.
D'altra banda, per mitjà de la propietat margin i padding s'aconseguirà separar les pestanyes lateralment.
Finalment es determinarà un fons gris (#dedede) per a cada pestanya.
#navegacio li {
list-style-type: none;
display: inline;
}
#navegacio li a {
text-decoration: none;
color: #3c3c3c;
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #dedede;
}
Visualment, s'obté el següent resultat:
Assignar els diferents estats a cada pestanya és realment senzill. Caldrà afegir dues regles noves que incorporen els selectors a:visited i a:hover, dels que només haureu de determinar quin serà el color de fons quan el cursor passi per sobre la pestanya (a:hover) i quin el color de la font quan l'enllaç ja hagi estat visitat (a:visited)
#navegacio li {
list-style-type: none;
display: inline;
}
#navegacio li a {
text-decoration: none;
color: #3c3c3c;
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #dedede;
}
#navegacio li a:visited { color: #667; }
#navegacio li a:hover {
color: #000;
background: #3fce9a;
border-color: #2334ed;
}
Visualment, s'obté el següent resultat:
Per diferenciar la pestanya activa primer s'ha d'identificar l'element a per mitjà de l'atribut id de valor actiu. A l'exemple, l'element actiu correspon a l'enllaç o element a que conté inici.
<li><a id="actiu" href="inici.html">Inici</a></li>
Ara caldrà afegir una nova regla CSS que porti per selector l'identificador anterior: #navegacio li a#actiu per tal que la seva aplicació sigui efectiva. Les propietats visuals que conté no són gens complicades: es modifica només el valor del color de fons i el de la vora inferior, per tal que sigui el mateix que el color de fons de la pàgina: #fff
#navegacio li {
list-style-type: none;
display: inline;
}
#navegacio li a {
text-decoration: none;
color: #3c3c3c;
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #dedede;
}
#navegacio li a:visited { color: #667; }
#navegacio li a:hover {
color: #000;
background: #3fce9a;
border-color: #2334ed;
}
#navegacio li a#actiu {
background-color: #fff;
border-bottom: 1px solid #fff;
}
Visualment, s'obté el següent resultat:
Finalment, i per completar el menú de navegació, només caldrà dibuixar la línia de base de les pestanyes, fent servir una propietat que quedarà inclosa dins el selector #navegacio i associada a l'element ul per mitjà de l'atribut i valor id="navegacio". La línia de base de las pestanyes es mostra per mitjà de la propietat border-bottom:1px solid #788;, é a dir, una línia d'1px de gruix i del mateix color que la resta de línies que dibuixen el contorn de les pestanyes.
Ara només quedarà corregir la posició de la línia de base per tal que quedi perfectament aliniada horitzontalment a la base de les pestanyes. Per aconseguir-ho caldrà afegir la següent propietat i valor:padding: 3px 0;
#navegacio {
border-bottom: 1px solid #788;
padding: 3px 0; /* identic al padding del element 'a' */
}
#navegacio li {
list-style-type: none;
display: inline;
}
#navegacio li a {
text-decoration: none;
color: #3c3c3c;
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #778;
border-bottom: none;
background: #dedede;
}
#navegacio li a:visited { color: #667; }
#navegacio li a:hover {
color: #000;
background: #3fce9a;
border-color: #2334ed;
}
#navegacio li a#actiu {
background-color: #fff;
border-bottom: 1px solid #fff;
}
Visualment, s'obté el següent resultat:
A l'arxiu m4p6_1.html podeu veure el resultat del procés que s'acaba d'explicar.