Parmis les prestations proposées par les templates modernes pour la création de votre site internet, la fonctionnalité de sous-titres dans les mega-menus est un atout.
La version de base d'helix ne comprends pas cette fonction. Nous allons aborder ici comment l'ajouter. Procédons par étape.
Ajouter le champs dans les éléments de menu
En premier lieu, il nous faut créer un paramètre qui attribuera un sous‑titre à chaque élément de menu.
Pour cela il nous faut aller dans /plugins/system/helix3/params/page-title.xml
Ce fichier gère l'onglet titre de page, et c'est là que nous allons mettre notre champs à remplir.
Cet onglet apparaît dans chaque élément de menu.
À la ligne 13 environ, trouver :
<field name="page_title_bg_image" type="media" label="PAGE_BACKGROUND_IMAGE" description="PAGE_BACKGROUND_IMAGE_DESC" />
remplacer par :
<field name="page_title_bg_image" type="media" label="PAGE_BACKGROUND_IMAGE" description="PAGE_BACKGROUND_IMAGE_DESC" /> <field name="link_subtitle" type="text" label="LINK_SUBTITLE" description="LINK_SUBTITLE_DESC" />
explication : on a ajouté un champs dont le nom est link_subtitle, de type texte, avec une étiquette et une description.
Voici ce que cela donne :
Modifier le fichier langue
Comme nous le voyons, la chaîne n'est pas traduite, mais nous savons modifier cela dans le fichier de langue français téléchargé sur web54.fr.
Allez à : /administrator/language/fr-FR/fr-FR.plg_system_helix3.ini
et ajoutez ces lignes :
#sous titre lien de menu" LINK_SUBTITLE="sous-titre du lien de menu" LINK_SUBTITLE_DESC="entrez ici un sous titre pour votre lien de menu si désiré"
Sauvegardez et admirez le résultat :
Rentrons un sous-titre, il n’apparaît toujours pas sur le site …
Récupérer le paramètre et l'afficher
Il nous faut maintenant transformer ce paramètre en variable et l'afficher.
Nous allons le faire dans le même fichier, c'est à dire dans plugins/system/helix3/core/classes/menu.php
Créer la variable de sous-menu
vers la ligne 380: transformer
$item->anchor_css = ($item->anchor_css) ? ' ' . $item->anchor_css : ''; $class = ($class) ? 'class="' . $class . $item->anchor_css . '" ' : '';
en :
$item->anchor_css = ($item->anchor_css) ? ' ' . $item->anchor_css : ''; $class = ($class) ? 'class="' . $class . $item->anchor_css . '" ' : ''; $link_subtitle = $item->params->get('link_subtitle');
Explication : on récupère le paramètre link_subtitle pour le mettre dans la variable $link_subtitle.
Afficher la variable sous-menu
Vers la ligne 428 on transforme
return $output;
en
$output = $output.'<span class="linksubtitle">'.$link_subtitle.'</span>'; return $output;
Sauvegardez et vous voyez désormais apparaître dans le menu le sous-titre.
Nous voyons qu'il reste un problème à résoudre : l'affichage proprement dit, cela se passe à la prochaine étape de finition : les CSS
Modifier quelques CSS
Pour l'affichage des sous-titres en dessous de votre élément de menu, il vous faudra trouver les bons styles.
Nous n'avons pas la prétention de vous proposer une solution universelle, toutefois voici un code qui a convenu à notre exemple, nous le partageons donc ici :
.sp-megamenu-parent > li > a { color: #000; display: inline-block; font-size: 12px; letter-spacing: 1px; line-height: 100%; padding: 30px 15px 0; text-transform: uppercase; } .linksubtitle { display: table-cell; }
et voici donc le résultat :
Amusez-vous avec les CSS et proposez ainsi à vos clients de beaux menus avec cette nouvelle option.