FDBI Prestations informatiques sur mesure

TUTORIEL: Menu horizontal rémanent pour Joomla 1.5 et 1.6

Pour la réalisation d'un site, nous avions besoin d'un menu horizontal sur 2 niveaux. Pour plus de clarté, notre client souhaitait que l’entrée de menu correspondant à la page active soit mise en valeur lors du chargement d’une page. De plus, pour faciliter la navigation, il a été décidé que le dernier menu survolé devait rester visible même si le curseur de la souris quittait la zone.

Pour réaliser cette barre de menu, nous nous sommes inspirés d'un modèle trouvé sur le site http://www.joomlack.fr que nous avons modifié pour atteindre l’objectif fixé.

Accéder aux commentaires (5)

Exemple fonctionnel du menu horizontal rémanent

L’exemple ci-dessus simule l’arrivée sur la page correspondant au sous-menu1.2 du MENU1.

Pour voir le fonctionnement complet du menu, rendez-vous sur le site joomla de démonstration.

Dans le fichier index.php du template Joomla

Important : La librairie mootools est nécesaire pour le fonctionnement du script. Si le template de votre page et/ou les composants utlisés ne la chargent pas, il est nécessaire de l'inclure dans l'entête de la page.

Copier/coller le code suivant entre les balises <head></head>:

<script type="text/javascript">
var EltMenuNiveau1 = null;
var EltMenuNiveau2 = null;

function OnOpenTask() 
  {
	var sfEls = document.getElementById("multihorizontal").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
		var classNameContent = sfEls[i].className;
		
		if (classNameContent.indexOf("active") != -1)
		{
			if (classNameContent.indexOf("parent") != -1)
			{
				EltMenuNiveau1 = sfEls[i];
				EltMenuNiveau1.className+=" MenuEnCours";
			}
			else
			{
				EltMenuNiveau2 = sfEls[i];
				EltMenuNiveau2.className+=" SousMenuEnCours";
			}
		}
	}
}

window.addEvent('domready', function() {
	var previous =null;
    var sfEls = document.getElementById("multihorizontal").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
        sfEls[i].onmouseover=function() {
			if (previous)
			{
				previous.className=previous.className.replace(new RegExp(" sfhover\\b"), "");
			}
			if (this.className.indexOf("parent") != -1)
			{
            	this.className+=" sfhover";
			}
			
			if ((EltMenuNiveau1) && (this != EltMenuNiveau1))
			{
				EltMenuNiveau1.className=EltMenuNiveau1.className.replace(new RegExp(" MenuEnCours\\b"), "");
				EltMenuNiveau1 = null;
				if (EltMenuNiveau2)
				{ 
					EltMenuNiveau2.className=EltMenuNiveau2.className.replace(new RegExp(" SousMenuEnCours\\b"), "");
					EltMenuNiveau2 = null;
				}
			}
			
			if ((EltMenuNiveau2) && (this != EltMenuNiveau2))
			{
				EltMenuNiveau2.className=EltMenuNiveau2.className.replace(new RegExp(" SousMenuEnCours\\b"), "");
				EltMenuNiveau2 = null;
			}
        }
        sfEls[i].onmouseout=function() {
			if (this.className.indexOf("parent") != -1)
			{
				previous = this;
			}
        }
    }
});
</script>

Dans la balise <body> appeler la fonction javascript OnOpenTask() comme suit:

<body onload="javascript:OnOpenTask();">

Cette fonction ajoute les classes MenuEnCours et SousMenuEnCours aux entrées de menu qui doivent être mises en valeur lors du chargement de la page.

Insérer un div, que nous avons nommé dans notre exemple "multihorizontal" .

Attention : Bien vérifier que l'id du div (dans notre exemple "multihorizontal") corresponde au paramètre passé à document.getElementById (dans le code javascript).

Appeler dans ce div le module correspondant au menu comme suit :

<div id="multihorizontal"><jdoc:include type="modules" name="position-1"/></div>

La "position-1" correspond à la position que nous avons donnée à notre menu dans notre exemple.

Les styles CSS du menu horizontal.

Ouvrir le fichier template.css dans le répertoire css du template.

Copier/coller les lignes suivantes à la fin du fichier.

#multihorizontal {
	width:1030px;
	height:73px;
	font-weight:bold;
	color:#FFF;
	background-image: url(../../../images/menu/fond-menu.png);
	background-repeat: repeat-x;
	float:left;
	position:relative;
	text-transform: uppercase;
	margin:0 10px 0px;
}

#multihorizontal ul{
	list-style-type: none;
	margin:0;
	padding:0;
}

#multihorizontal ul li {
	background:none;
}

/* Pour l'image Home*/
#multihorizontal ul li a img, #multihorizontal ul li a:visited img {
	position:absolute;
	top:0px;
	left:0px;
	border:0;
}

#multihorizontal ul li:hover a img, #multihorizontal ul li.sfhover a img, #multihorizontal ul li a:hover img, #multihorizontal ul li a.sfhover img{
	position:absolute;
	top:0px;
	text-align: center;
}

/* Pour les menus de type texte*/
#multihorizontal ul li a, #multihorizontal ul li a:visited{
	float:left;
	width:auto;
	text-decoration:none;
	padding-top:8px;
	color: #FFF;
	margin-left: 0px;
	width:110px;
	text-align: center;
}
#multihorizontal ul li a:hover, #multihorizontal ul li.sfhover a, #multihorizontal ul li.MenuEnCours a{
	color:#fe8f30;
	background-color:#166da9;
	width:110px;
	height:29px;
}

#multihorizontal ul li ul {
	visibility:hidden;
	position:absolute;
	top:42px;
	width:720px;
}

#multihorizontal ul li.MenuEnCours ul li a{
	visibility:visible;
	background:none;
}

#multihorizontal ul li:hover ul, #multihorizontal ul li.sfhover ul {
	visibility:visible;
	width:720px;
}

#multihorizontal ul li:hover ul li a, #multihorizontal ul li.MenuEnCours ul li a,  #multihorizontal ul li.sfhover ul li a {
	display:block;
	color:#fff;
	background:none;
	font-size:0.95em;
	text-transform: none;
}

#multihorizontal ul li ul li a:hover, #multihorizontal ul li ul li.SousMenuEnCours a {
	text-decoration: underline;
}

Paramétrage dans Joomla 1.5 ou 1.6

Créer votre menu avec ses sous-menus, dans notre exemple nous l'avons nommé "tutorial".

Le code proposé pour ce tutoriel ne fonctionne que pour un menu avec 1 seul niveau de sous-menu.

Dans le gestionnaire de module, sélectionner le module de type "menu" correspondant au menu tutorial.

Renseigner les paramètres comme suit:

Tutoriel menu horizontal joomla

Voilà, votre menu est enfin prêt à fonctionner. Il ne vous reste plus qu'à le personnaliser à vos couleurs.

Bonne chance!

Conditions d'utilisation

Nous espérons que ce didacticiel vous sera utile. Vous êtes libres d'utiliser ou de modifier ce code pour vos propres sites. Tous les éléments de cette page sont proposés en l’état sans aucune garantie de résultat. Nous déclinons donc toute responsabilité si le résultat ne correspondait pas à ce que vous escomptez ainsi que pour toutes conséquences qui en résulteraient.

Vos commentaires

Daniel - 12/02/2012
"Très bon tuto à mettre entre toutes les mains merci".

Marc - 13/01/2012
"Now working with your script on a new website: http://www.homeopathiewevers.nl. It's hard to make it fit my site, but it works. Thanks a lot.".

Jaycee - 20/07/2011
"Keep these articles coming as they've opened many new doors for me."

Dorothy - 21/07/2011
"Way to go on this essay, helped a ton".

Bobcat - 21/07/2011
"Very informative for me, Mr. internet writer."

Commentaire ou demande d'informations sur le tutoriel joomla

Merci d’utiliser le formulaire ci-dessous pour les commentaires, remarques, suggestions ou questions que vous souhaitez nous adresser.

01 40 85 02 28

Nom :
Email :
Commentaire :