Création d’un nouveau menu

Voyons maintenant comment créer un nouveau menu. Nous allons choisir le nom Livre JOOMLA! 1.5. Le lien devra mener à la page du site offi ciel de Joomla! en France, http://www.joomla.fr/. Nous ferons apparaître le site dans une autre fenêtre. Le nouveau menu sera présenté sous le menu principal dans la colonne gauche.

Sélectionnez la commande MENUS > GESTION DES MENUS puis cliquez sur NOUVEAU. Dans le champ du type de menu, vous devez indiquer le nom interne du menu. Il faut choisir un nom suggestif sans utiliser d’espace ni de lettre accentuée. Un nom plus suggestif peut être donné dans le champ TITRE. Il apparaîtra sur le site Web. Vous devrez également désigner le module correspondant, et désigner les éléments pour peupler le nouveau menu (voir Figure 7.21).

Menus > Gestion des menus – Nouveau

Figure 7.21 Menus > Gestion des menus – Nouveau.

Type de menu. C’est le nom utilisé dans le code de Joomla!. Vous n’avez pas le droit aux espaces ni aux lettres accentuées. Choisissons par exemple livre_joomla. Cet Identifiant ne sera jamais visible sur le site Web. Il sert à établir la connexion logique entre le module et le menu.

Titre. Le nom public du menu. Dans l’exemple, nous indiquons Livre JOOMLA! 1.5.
Description. Une description facultative qui n’apparaît que dans la partie administrative, par exemple dans les listes.

Titre du module. Le nom public du module. Nous choisissons aussi Livre JOOMLA! 1.5.
Cliquez sur le bouton SAUVER pour provoquer la création d’un nouveau module avec les paramètres choisis. Vous revenez dans la vue globale des menus. Le nouveau menu apparaît, mais il est vide (voir Figure 7.22). Par ailleurs, le nouveau menu a été ajouté au menu général MENUS.

Le nouveau menu vide

Figure 7.22 Le nouveau menu vide.

Dans la ligne du nouveau lien LIVRE JOOMLA! 1.5, cliquez sur la petite icône de la colonne ÉLÉMENTS DE MENUS (elle symbolise un crayon, mais c’est difficile à voir). Vous accédez ainsi à la page de gestion du contenu de ce menu (voir Figure 7.23).

Liste des éléments du nouveau menu

Figure 7.23 Liste des éléments du nouveau menu.

Pour l’instant, le menu est vide. Cliquez sur le bouton NOUVEAU. Commencez par choisir le type de l’élément parmi les différents domaines proposés (voir Figure 7.24). Pour ne pas nous aventurer dans quelque chose de trop complexe, nous allons choisir un lien externe simple qui mènera vers le site joomla.fr.

Sélection du type d’élément de menu

Figure 7.24 Sélection du type d’élément de menu.

Cliquez donc sur le lien intitulé LIEN EXTERNE. Vous voyez apparaître un page de saisie (voir Figure 7.25).

Nouveau lien de menu

Figure 7.25 Nouveau lien de menu.

Vous connaissez déjà le contenu de ce formulaire. Voici comment le renseigner dans le cas d’un élément de menu.

Titre. Le nom du lien qui apparaît dans le menu (Site Web du projet Joomla!).

Alias. Le nom abrégé de l’adresse URL (projet-joomla).

Lien. Le lien qui mène à la page Web (http://www.joomla.fr)

Afficher dans. Nous allons l’Afficher dans notre nouveau menu, Livre JOOMLA! 1.5. Élément parent. Il n’y en a pas encore car c’est le premier élément.
Publié. Vous allez décider de publier ce menu ? (Oui).

Ordre. Puisque c’est le premier élément, il n’y a pas encore de tri possible. En général, les nouveaux éléments sont ajoutés à la fin des menus. Vous pourrez modifier l’ordre après avoir utilisé Sauver.

Niveau d’accès. Choisissez de rendre le menu accessible à tous les visiteurs (Public), à ce qui sont Enregistré ou au groupe Spécial.

En cliquant, ouvrir dans. Choisissez de faire apparaître la cible du lien dans une nouvelle fenêtre de navigateur. Si vous cliquez sur APPLIQUER, vous restez dans la même page. Cliquez sur SAUVER pour enregistrer les donnée et quitter cette page.

Le menu est dorénavant peuplé d’un élément. Il n’est pas encore visible dans la partie publique. Il faut de nouveau publier le module correspondant. Choisissez la commande EXTENSIONS > GESTION DES MODULES (voir Figure 7.26). Cliquez dans la croix rouge de la colonne ENABLED (ACTIVÉ). Notez les petits triangles qui permettent d’intervenir sur l’ordre. N’y touchez pas.

Extensions > Gestion des modules

Figure 7.26 Extensions > Gestion des modules.

Vous pouvez dorénavant accéder à votre site Web (pensez à réactualiser par F5). Vous devriez voir apparaître le nouveau menu LIVRE JOOMLA! 1.5 (voir Figure 7.27).

Extensions > Gestion des modules

Figure 7.27 Le nouveau menu Livre JOOMLA! 1.5 sur le site.

Mais le nouveau menu n’a pas le même aspect que le menu principal. Il n’a pas ce cadre bleu caractéristique. La présentation dépend du fichier CSS du template. Il nous reste à relier logiquement notre nouveau menu au même template que celui du menu principal. Il faut que le module fasse référence à une classe de style CSS bien précise. Pour l’instant, notre menu est associé à la classe nommée module. Il suffit d’accéder au code source HTML de la page pour le vérifi er (Listing 7.1).

<div class=”module”><div><div><div>
<h3>Livre JOOMLA! 1.5</h3>
<ul class=”menu”>
<li class=”item54”>
<a href=”http://www.joomla.fr” target=”_blank”>
<span>Site Web du projet Joomla!</span>
</a>
</li>
</ul>
</div></div></div></div>

Listing 7.1 : Code source du nouveau sous-menu

En comparaison, le menu principal fait référence à la classe intitulée module_menu (Listing 7.2).

<div class= ”module_menu”><div><div><div>
<h3>Menu principal</h3>
<ul class=”menu”>
<li id=”current” class=”active item1”>
<a href=”http://localhost/joomla150/”>
<span>Accueil</span>
</a>
</li>
 ... autres liens ...
</ul>
</div></div></div></div>

Listing 7.2 : Code source du menu principal Main Menu

Il faut accéder à la gestion des modules pour créer la bonne liaison entre le menu et la classe CSS.
Choisissez à nouveau EXTENSIONS > GESTION DES MODULES > LIVRE JOOMLA! 1.5. Accédez aux détails du volet des paramètres avancés. Dans le champ SUFFIXE DE CLASSE DE MODULE, saisissez l’Identifiant suivant (voir Figure 7.28) :
_menu

Le nouveau menu avec un style CSS adapté

Figure 7.28 Modification du suffixe de classe CSS


Accédez à nouveau à votre site Web. Le menu est correctement mis en forme (voir Figure 7.29).
Si vous cliquez sur l’unique lien du menu (SITE WEB DU PROJET JOOMLA!), la page d’accueil du site cible apparaît.

Modification du suffixe de classe CSS

Figure 7.29 Le nouveau menu avec un style CSS adapté.

Commentaires

Merci pour ce tuto qui m'a bien aidé !