Look XP

Revenir à l'article | Télécharger | http://iubito.free.fr

Réaliser un menu au look XP est un peu contraignant mais tout à fait réalisable avec du CSS et quelques images. Voyons voir un peu...

Images

Pour faire le look à la XP avec les icônes à gauche des éléments du menu, on crée une image appelée lookxpback.gif et dans le css, on met :

.ssmenu {
	background-image: url('lookxpback.gif');
	background-attachment:left;
	background-repeat:repeat-y;
}

Cette image fait 24 pixels de largeur.

A ce sous-menu, on ajoute aussi une ombre avec

FILTER: progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#bbb8b7,strength=4);

Ensuite, on crée une image lookxpvide.gif de 16x16px, complètement transparente.
On crée également toutes les icônes voulues (par exemple ou ...).
Quand un item a besoin d'une icône à gauche, on met :

<li>
	<a href="lookxp.htm">
		<img src="ICONE.gif" align="absmiddle" alt="" />Look XP
		<span> ;</span>
	</a>
</li>

Quand il n'a pas d'icône, on remplace ICONE par lookxpvide.gif (le nom de notre image vide).

La bordure des liens survolés

Une autre particularité, les liens "survolés" ont une bordure, mais les non survolés n'en ont pas. Donc on a dans le CSS :

.ssmenu ul:hover, .ssmenu a:hover, .ssmenu a:focus, .menu a:hover, .menu a:focus {
	border:1px solid #316BC6;
	background-color:#C2CEEF;
	padding:2px 3px;
	...
}

La bordure fait 1px de large donc pour compenser cette largeur (on ne veut pas de border sur les liens non-survolés...), on met :

.menu a, .ssmenu a, .menu a:visited, .ssmenu a:visited {
	padding:3px 4px;
}

Séparateurs

Pour compléter le menu au look XP, on va ajouter de temps en temps des lignes qui font un trait de séparation :

	<li>
		...un lien...
	</li>
	<img src="lookxphr.gif" class="hr" alt="" />
	<li>
		...un lien...
	</li>

Dans le CSS, on met ceci (évitez de le modifier) :

.ssmenu img.hr {
	margin-top:1px;
	margin-bottom:1px;
	margin-left:0;
	margin-right:0;
	width:100%;
	height:1;
	display:block;
}