En este caso el efecto que se persigue es la aparición de un rótulo que indica que ya se ha visitado el enlace.
Para comprobarlo puedes pulsar el primer enlace y luego la flecha de vuelta atrás de tu navegador.
Como estás viendo hemos dejado un importante margen en la zona derecha de los menús porque es necesario para dejar espacio a los rótulos que aparecerán. También habrá que tener en cuenta este detalle cuando este tipo de menús se utilice en una estructura de marcos.
En esta ocasión no hemos creado una lista, sino una serie de contenedores encerrados dentro de otro contenedor genérico que tiene fondo gris. La idea en la que se basa el menú es que cada uno de los contenedores tiene el enlace y un fragmento en línea tal como puedes ver a continuación:
<div
class="box">
<a
href="http://www.cssplay.co.uk/menus/visitedmenu.html">Menú
1
<span>VISTO</span>
</a>
</div>Para hacer que el fragmento en línea aprovechamos
las características de herencia y utilizamos las
propiedad CSS
display:none para que cualquier elemento span
que sea descendiente
de un enlace que, a su vez, sea descendiente del contenedor
que hemos nombrado con el identificador menu,
no se
muestre.
#menu a span {
display:none;}Lo único que nos queda es añadir la
pseudo clase :visited a los enlaces para que
los fragmentos en
línea span que sean
descendientes de un enlace visitado que, a su
vez, sea descendiente del contenedor que hemos
nombrado con el identificador menu,
se muestren con la
apariencia que indicamos con las reglas CSS.
Además
especificaremos un índice de profundidad alto para que se
superponga a otros elementos que pudieran quedar por debajo.
#menu a:visited span {
display:block;
position:absolute;
top:0;
left:11em;
width:5em;
font-size:0.7em;
color:#c00;
border:1px solid #c00;
text-align:center;
z-index:50;
}El resto de reglas CSS no merecen explicación especial ya que su función es la común de indicar el aspecto de los diversos elementos de la página.