Menu avec image

proposé par Gérard, alias lefildargent

Ce tutoriel est entre "moyennement difficile" et "assez facile". Il permet d'associer une image à une entrée particulière d'un menu.

Des généralités importantes

Il y a des choses invariantes, immuables sur votre site Jimdo

que votre compte soit un compte free, pro ou business,
que votre design (mise en page) soit standard ou personnalisé,
que votre menu soit vertical ou horizontal

à savoir que :

chaque page est identifiée de façon unique par l'attribut id de sa balise body
chaque menu est une liste non ordonnée (balise ul) d'éléments (balise li) contenant chacun un lien (balise a) vers une page du site. Chacun de ces éléments est identifié de façon unique par l'attribut id de sa balise li.

Du concret

Un exemple

Prenons l'exemple de cette page que vous êtes en train de lire.

Avec Firebug (sous FF), Outils de dévelopement (sous IE) ou tout bêtement en affichant le source de cette page, on va trouver:

                <body class="body cc-page cc-pagemode-default cc-content-parent" id="page-1065589363">

            

De même, ce menu vertical à gauche se présente de la façon suivante :

<ul id="mainNav2" class="mainNav2">
	<li id="cc-nav-view-760066663">
		<a href="/navigation/ajouter-des-ancres/" class="level_2">
			<span>Ajouter des ancres</span>
		</a>
	</li>
	...
	<li id="cc-nav-view-1065589363">
		<a href="/navigation/menu-avec-image/" class="current level_2">
			<span>Menu avec image</span>
		</a>
	</li>
</ul>

Regardons de plus près

Arrêtons-nous sur les attributs id des balises body et li.

Mais qu'est-ce que c'est que ces numéros (1065589363, 760066663 et ???) ?

Tiens c'est bizarre, on retrouve 1065589363 !!

Et bien non, ce n'est pas bizarre, c'est "fait exprès" par Jimdo pour qu'on s'y retrouve. Le numéro contenu dans l'identifiant de l'élément de liste qui pointe vers une page du site correspond à celui contenu dans l'identifiant de la balise body de la page pointée.

Vous avez tout compris.

Et alors, on fait comment ?

Maintenant si je veux associer une image à mon élément de menu, il suffit de la mettre en fond (en background) de mon élément, ou plus exactement du lien qu'il contient.

Pour ça on utilise successivement puis et on insère ceci

<style type="text/css">
/<![CDATA[/
li#cc-nav-view-1065589363 a
	{background:
		url('http://www.glr.fr/0Commun/new8.png')
		no-repeat scroll right top transparent ;
	}
/]]>/
</style>

Quelques détails

L'image que l'on met en background (l'url entre parenthèses)
- doit être adaptée à la taille de l'élément de menu.
  - Rappel : une image en background ne s'étire pas et ne se réduit pas. Elle peut éventuellement se répéter (dans ce cas remplacer no-repeat par repeat). Si elle est trop grande, elle sera tronquée.
- elle doit avoir un format qui gère la transparence (gif ou png)
Le couple right top permet d'aligner l'image dans l'espace réservé au lien (ici à droite en haut)

Du nouveau

Maintenant (avec les versions récentes des navigateurs), il est facile de cacher le texte du lien en lui associant la pseudo couleur "transparent". Il devient alors possible d'avoir un menu complètement en image.

Dans notre cas ici, on aurait pu cacher la mention "Menu avec image" en complétant le code mentionné plus haut :

<style type="text/css">
/<![CDATA[/
li#cc-nav-view-1065589363 a
	{background:
		url('https://www.glr.fr/0Commun/new8.gif')
		no-repeat scroll right top transparent ;
	color:transparent;
	}
/]]>/
</style>