Suite à cette demande [[Tuto noodom] Menu menuNavButton - #146 par noodom], voici une évolution donnant la possibilité de mettre des images à la place des icônes fontawesome.
Dans un premier temps, je vais détailler les modifications à apporter sur une installation déjà existante.
Modifications depuis un menu existant
- Sélectionner le menu
"Plugins">"Programmation">"HTML Display" - Sélectionner l’équipement du menu (
"Menu3DAnim"), puis l’onglet"Dashboard" - Modifier le code du menu comme ci-dessous :
let buttons = data.buttons.map(function (button) {
let imgType =
button.icon.toLowerCase().endsWith(".jpg") ||
button.icon.toLowerCase().endsWith(".jpeg") ||
button.icon.toLowerCase().endsWith(".png") ||
button.icon.toLowerCase().endsWith(".gif");
let buttonImg = '';
if (imgType) {
buttonImg = ' <span><img src="' + button.icon + '" height=50px width=50px></span>';
} else {
buttonImg = ' <span class="' + button.icon + '"></span>';
}
return '<li class="' + button.label + '" id="' + button.link + '" onClick="gotoPlan(' + button.link + ')"' + '>'
+ '<a href="#">'
+ ' <div class="layer">'
+ ' <span></span>'
+ ' <span></span>'
+ ' <span></span>'
+ ' <span></span>'
//+ ' <span class="' + button.icon + '"></span>'
+ buttonImg
+ ' </div>'
+ ' <div class="text">'
+ ' ' + button.label
+ ' </div>'
+ '</a>'
+ '</li>';
- Aller dans l’éditeur de fichier
- Modifier le fichier
"/data/menusNoodom/menuNoo3DAnim/css/perso.css"(dernière ligne avecspan:has(img)en plus)
nav#menuNoo3DAnim ul.navul a .layer span.fa,
nav#menuNoo3DAnim ul.navul a .layer span.fas,
nav#menuNoo3DAnim ul.navul a .layer span.fab,
nav#menuNoo3DAnim ul.navul a .layer span:has(img) {
font-size: 30px;
line-height: 55px;
text-align: center;
}
- Modifier le fichier
"/data/menusNoodom/menuNoo3DAnim/json/perso.json" - Créer le répertoire
"/data/menusNoodom/menuNoo3DAnim/img"et ajouter les images souhaitées dans le menu
Le code du menu sur mon Github a été modifié pour les futures installations du menu pour intégrer directement cette évolution.