Avec Joomla 1.5, il est possible de créer simplement des menus avec des sous-menus. Mais en natif, il n'est pas possible de créer un menu avec des effets pour faire apparaître et disparaître le sous-menu.
Il existe de extensions joomla qui peuvent servir à cela dont voici les références :
Je n'ai pas vu de demo et je ne l'ai pas essayé. La raison est que le site sur lequel j'ai été amené était bourré de publicité en popup et donc cela ne m'a pas inspiré.
Ceci n'est pas une extension mais une technique qui permet de mettre en évidence le menu principale et d'afficher le sous-menu. Malheureusement, ce n'est pas le but que je recherche car le sous-menu n'apparaitra pas lorsqu'on passera sur le menu principal. Mais il s'agit d'unarticle intéressant.
Cette extension est vraiment très bien et possède un grand nombre de paramètres. A cela, il faut ajouter des CSS et du Javascript pour que le menu fonctionne comme on le désire et cela va prendre autant de temps que ce que nous allons réaliser ici dessous. Mais il possède l'avantage de faire un menu sur base de sections et de catégories, ce qui est probablement un très grand avantage. Mais alors votre menu est lié à votre section et à vos catégories. Si vous voulez vous amuser n'hésitez pas à y jeter un oeil, je vous le recommande mais il vous faudra probablement un peu de patience avant de maitriser la bête.
I. Créer un menu avec des sous-menu avec Joomla 1.5
Pour commencer, je peux vous conseiller ce livre en ligne si vous désirez en savoir plus sur Joomla 1.5 : Joomla! 1.5
La première chose à faire est de créer des sections et des catégories et y mettre des articles.
Pour mon exemple, j'ai créé cette arborescence (j'ai désactivé la page Home) :
- Vie numérique (section)
- Découverte Internet
- Réseaux sociaux
- Joomla
- Joomla Screencast
- Joomla Links
- CSS
- CSS Links
J'ai ensuite créé mon menu (que j'ai appelé "mainmenu"):
- Main Menu
- Weblog (défaut à la place de Home) qui mène vers la section Vie numérique
- High Tech (mène vers un article quelquoncque)
- CSS -> Mène vers la catégories CSS
- Joomla -> Mène vers la catégorie Joomla
Je sais que j'ai moins de menu que de sections/catégories mais il ne tient qu'à vous à développer cela pour vos tests.
Pour créer des sections/catégories/articles, je vous renvoie vers le site cité précédemment : Le menu contenu
Créez vos articles et mettez-les dans les sections que vous désirez.
Dès que tout cela est fait, il ne vous reste plus qu'à créer votre module menu et de lui indiquer les paramètres adéquat :
- Allez dans Extension > Gestion des modules
- Choisissez nouveau
- Prenez l'option menu
- Dans l'écran de configuration indiquez
- Titre : Mon menu
- Montrer le titre : non
- Activé : oui
- Position : top
- Nom du menu : mainmenu (ou le nom du menu que vous avez défini dans la section Menu)
- Style de menu : Liste
- Niveau de départ : 0
- Dernier niveau : 2
- Toujours afficher les sous-menu : oui
- Dans paramètres avancés, pour Suffixe à ajouter à la classe de module, ajoutez _menu (Ceci ajoutera _menu à la classe menu = menu_menu) de manière à vous y retrouver dans vos css.
- Dans la partie affectation des menus, choisissez tous.
II. Importer les fichiers javascript, css et prépare les fichier index.php
Avant d'importer les fichiers, il faut d'abord les créer. Mais il faut aussi télécharger jquery.
Nous allons donc construire l'arborescence suivante :
- /$votretemplate/css/template.css
- /$votretemplate/js/jquery-1.3.2.min.js (le fichier téléchargé)
Dès que tout cela est en place, éditez le fichier index.php qui se trouve dans votre répertoire $votretemplate et ajoutez ces lignes dans le head de votre html :
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<script src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/jquery-1.3.2.min.js" ></script>
Maintenant, nous allons écrire ces lignes dans la partie body du fichier index.php :
<?php if($this->countModules('top')) : ?>
<div style="float:left;">
<jdoc:include type="modules" name="top" />
<ul id="subcontent">
</ul>
</div>
<?php endif; ?>
le div avec l'id subcontent va nous permettre de prendre le sous menu et de l'afficher dans cette partie.
Vous êtes maintenant prêt à écrire le code css que j'ai simplifié au niveau design pour cet exemple et à écrire le code javascript dans votre fichier index.php ou dans dans un fichier à part.
III. Ecrire le code CSS
/* Creation d'un menu horizontal avec un sous-menu */
#current{display:inline;float:left;} /* est le menu selectionné il faut lui indiquer qu'il apparaitra en ligne*/
/* Définissons maintenant le menu principal */
.menu_menu{list-style-type: none;padding: 0; margin: 0;} /* définit le ul sans décoration de bullet */
.menu_menu li{display: inline; } /* définit le li en ligne */
.menu_menu li a{float: left;width:5em;} /* le lien se*/
.menu_menu li.active{}
.menu_menu li.parent{}
/* Définition des sous-menus. Les menus avec des sous-menus possède la classe parent (définit par joomla) */
.menu_menu li.parent ul{clear:both;padding: 0; margin: 0;display:block;list-style-type: none;}
.menu_menu li.parent ul li{display:inline;}
.menu_menu li.parent ul li.active{}
/* Définissons maintenant la partie qui va afficher le sous-menu */
ul#subcontent {clear:both;padding: 0; margin: 0;display:block;list-style-type: none;}
ul#subcontent li{display:inline;}
/* PERSONNaLiZED */
.menu_menu li a{}
/* définissons maintenant l couleur de fond du sous menu */ul#subcontent{
/* et ici le sous-menu actif */ background-color: yellow;
}
ul#subcontent li#curr a{
color: red;
}
ul#subcontent li a{
padding-right: 5px;
}
La définition de la CSS est maintenant en place. Mettez tout cela dans le fichier template.css
IV. Ecrire le code jQuery
Le code qui va être présenté maintenant va permerttre de ne pas afficher les sous-menus lors de l'affichage de la page sauf si un élément de sous-menu a été choisit.
On pourra améliorer ce code de manière à afficher les sous-menus de la page active.
La difficulté que j'ai rencontré provient de l'id current. Lorsqu'un sous-menu est selectionné, Joomla affecte à l'élément qui a été cliqué cet id. Mais comme je prend le contenu pour le placer dans dans le ul#subcontent et qu'il s'agit d'une copie, je me retrouve avec deux id current. Ce que le javascript ne gère pas teès bien. Je dois donc changer cet id en #curr, placer le contenu dans ul#subcontent et ensuite rechanger l'id #curr en #current. c'est la raison pour laquelle je me retrouve avec ces nombreuses lignes :
<script type="text/javascript">
$(document).ready(function(){
var subcontent = $("#subcontent");
$(".parent ul").hide();
var current = $("#current");
current.attr("id","curr");
if (current.parents(".active") ){
subcontent.append(current.parents(".active ul").html());
} else {
subcontent.append($(".active ul").html());
}
current.attr("id","current");
$(".menu_menu li").mouseover(function(){
subcontent.empty();
var tcurrent = "";
if ($(this).attr("class").contains("active")){
tcurrent = $(this).find("#current");
tcurrent.attr("id","curr");
}
var actualul = $(this).find("ul");
subcontent.append(actualul.html());
if (tcurrent != ""){
tcurrent.attr("id", "current");
}
});
});
</script>
Vous n'avez plus qu'à placer ces lignes dans le head de votre index.php
Vous pouvez télécharger le fichier zip (ci-dessus et un peu pollué par d'autres fichiers).
ATTENTION : pour que cela fonctionne, vous devez remplacer les codes HTML par des < et >
ATTENTION : pour que cela fonctionne, vous devez remplacer les codes HTML par des < et >
Quilovnic
0 commentaires:
Enregistrer un commentaire