07 janvier 2010

Afficher les sous-menus dans un cartouche

La présentation des sous-menus latéraux peut être agréablement personnalisée par l'ajout d'un cartouche.

article_cartouche article_cartouche2
sans cartouche avec cartouche

Voici la procédure à suivre :

1- Créer une image complète du cartouche à la bonne largeur (voir cet article). Elle doit être assez longue dans le sens de la hauteur, plus que ce qu'on en verra :

cartouche

2- La diviser en deux images raccordables, l'une pour le titre :

titre2 
image-titre

et l'autre pour la liste :

cart 
image-liste

3- Ajouter les indications d'insertion d'image dans les sélecteurs navlinks .title et navlinks ul :

.navlinks .title {
          background: url(URL de l'image-titre) top center no-repeat;
}
.navlinks ul {
          background: url(URL de l'image-liste) bottom center no-repeat;
}

4- Modifier les réglages des marges externes (margin) et internes (padding) dans les sélecteurs navlinks .title, navlinks ul, navlinks li et (éventuellement) ul.tagcloud. Exemple :

.navlinks .title {
          background: url(URL de l'image-titre) top center no-repeat;
          margin: 0px;
          padding: 0px;
}
.navlinks ul {
          background: url(URL de l'image-liste) bottom center no-repeat;
          margin: 0px 0px 20px 0px;
          padding: 0px 0px 20px 0px;
}
.navlinks li {
          margin: 0px 0px 0px 20px;
          padding: 3px 20px 3px 0px;
}
ul.tagcloud {
          margin: 0px 0px 20px 0px;
          padding: 0px 5px 20px 0px;
}

* *
*

L'astuce consiste donc à utiliser :
- deux images raccordables que l'on affiche l'une sous l'autre en réglant les marges
- et une image ayant une hauteur maximale et positionnée sur le bas (bottom) de la liste.
Mais elle a ses limites : la liste ne doit pas être plus haute qu'elle.

Notez qu'elle ne nécessite aucune modification des pages HTML.

Posté par Michal53 à 09:41 - - Permalien [#]
Tags : , , , , ,