https://www.facebook.com/tr?ev=6029847359740&cd[value]=0.01&cd[currency]=EUR&noscript=1

Note de l'utilisateur: 5 / 5

Donnez une note !
5 sur 5 - 3 votes
Merci d'avoir noté cet article.

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.

Commentaires   

0 #8 Serge Billon 28-12-2016 12:39
ok :
you 'll have to had this css :
.linksubtitle:hover {
color: red;
}
in the css files or in the template
Citer | Signaler à l’administrateur
+1 #7 Serge Billon 28-12-2016 12:39
ok :
you 'll have to had this css :
.linksubtitle:hover {
color: red;
}
in the css files or in the template
Citer | Signaler à l’administrateur
0 #6 Facundo 28-12-2016 11:52
Serge mille merci pour votre réponse. Le lien Web était un exemple est pas mon site. J'ai déjà répondu par e-mail
Citer | Signaler à l’administrateur
0 #5 Facundo 28-12-2016 11:52
Serge mille merci pour votre réponse. Le lien Web était un exemple est pas mon site. J'ai déjà répondu par e-mail
Citer | Signaler à l’administrateur
0 #4 Serge Billon 28-12-2016 10:44
je vois bien les titres dans votre menu, mais pas les sous titres.
Citer | Signaler à l’administrateur
+1 #3 Serge Billon 28-12-2016 10:44
je vois bien les titres dans votre menu, mais pas les sous titres.
Citer | Signaler à l’administrateur
0 #2 Facundo 28-12-2016 09:44
Je ne suis pas un usage français google translate. D'abord, je tiens à féliciter le grand tutoriel fait.
Pourriez-vous me dire comment placeriez-vous de faire les sous-titres faisaient partie du titre du menu et en passant la souris sur le texte changer la couleur du lien. Cela signifie que le texte des sous-titres doit avoir un saut de BR et appartiennent à la même ligne du code de titre du lien de menu. Vous pouvez consulter le menu de ce site pour mieux comprendre ce que je veux dire.

telogis dot com
Citer | Signaler à l’administrateur
0 #1 Facundo 28-12-2016 09:44
Je ne suis pas un usage français google translate. D'abord, je tiens à féliciter le grand tutoriel fait.
Pourriez-vous me dire comment placeriez-vous de faire les sous-titres faisaient partie du titre du menu et en passant la souris sur le texte changer la couleur du lien. Cela signifie que le texte des sous-titres doit avoir un saut de BR et appartiennent à la même ligne du code de titre du lien de menu. Vous pouvez consulter le menu de ce site pour mieux comprendre ce que je veux dire.

telogis dot com
Citer | Signaler à l’administrateur

Ajouter un Commentaire