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 :

 soustitres helix1

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 :soustitres helix2

 

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.

soustitres helix3

 

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 :

soustitres helix4

Amusez-vous avec les CSS et proposez ainsi à vos clients de beaux menus avec cette nouvelle option.

Sauvegarder
Choix utilisateur pour les Cookies
Nous utilisons des cookies afin de vous proposer les meilleurs services possibles. Si vous déclinez l'utilisation de ces cookies, le site web pourrait ne pas fonctionner correctement.
Tout accepter
Tout décliner
Fonctionnels