[RÉGLÉ] Modifier design menu du module "thegruemenu"

[thebadgones77]

Bonjour,

J'ai installé le module "thegruemenu" afin de générer un menu sur mon site web, aucun problème quant à son utilisation.

lien du site : http://florian.barbaud.free.fr

Je souhaiterais modifier le thème du menu j'ai fouillé un peu dans les fichier css du module ainsi qu'inspecter mon site avec firebug mais ne parviens pas à trouver le fichier qui génére le design du menu. J'ai l'impression que c'est du java script, et là c'est le drame


voici ce que j'aimerais mettre, en essayant de s'y inspirer

ou une flèches jaunes


Sur le panneau d'administration du module, on a seulement la possibilité de changer de couleurs.

En vous remerciant pour votre aide

[lomart]

Bonjour,

que voulez-vous faire exactement. Une petite simulation serait la bienvenue.

Le JS n'est pas en cause dans le style du menu

[manu93fr]

Bonjour,
@thebadgones77
tu as reussi a faire tourner un site Joomla!3 sur Free ? bravo !!! Mais je doute quand a son maintient avec les mises a jour ... etc .. etc .. dailleurs ton site est en version 3.1.5 !!! Autant dire a la préhistoire.
Je te conseille vivement de prendre un autre hébergement avant d'aller plus loin, ou d'installer un serveur local sur ta machine si tu veux juste tester les possibilités de Joomla!

[thebadgones77]

Bonjour,

lomart on a déjà évoqué le soucis ensemble sur un autre post, cependant je reviens vers vous, car j'ai changé de module pour le menu. Le précédent n'allais pas avec ce que je voulais faire surtout au niveau de l'articulation en accordeon, celui-ce se développe sur les cotés.

voici le projet que j'essaye de faire



Mon menu s'organise actuellement comme ceci

manu93fr mon site est actuellement hébergé localement en attente d'un hébergement officiel . je l'ai hébergé sur Free pour que vous puissiez jeter un oeil au code concernant le module.

[lomart]

lomart on a déjà évoqué le soucis ensemble sur un autre post,

Ca me disait bien quelque chose

Il faut jouer sur #gruemenu.grue_110 ul li
mais pas facile à faire avec des images sous l'inspecteur de code

[thebadgones77]

j'ai essayé dans un premier temps de modifier la couleur en cherchant le fichier css adéquat. l'inspecteur de code indique "inline"

/* Left-to-Right */
#gruemenu.grue_110 ul li { margin:0!important; padding:0!important }
#gruemenu.grue_110 > ul > li { display:block }
#gruemenu.grue_110 > ul > li.has-sub > a::after {border-left-color: #D1E3FB;  right: 17px; top: 20px; }
#gruemenu.grue_110 > ul > li.has-sub.active > a::after,
#gruemenu.grue_110 > ul > li.has-sub:hover > a {border-left-color: #FFFFFF;}
#gruemenu.grue_110 ul ul { position: absolute; left: -9999px; top: auto; padding-left: 6px;}
#gruemenu.grue_110 > ul > li > ul::after { content: ""; position: absolute; width: 0; height: 0; border: 5px solid transparent; top: 20px; left: -3px;}
#gruemenu.grue_110 ul ul ul::after {content: "";position: absolute; width: 0; height: 0; border: 5px solid transparent;  top: 11px; left: -3px;}
#gruemenu.grue_110 > ul > li:hover > ul {top:0;left:100%;}
#gruemenu.grue_110 ul ul ul {padding-top: 0;padding-left: 6px;}
#gruemenu.grue_110 ul ul > li:hover > ul {left: 220px;top: 0;}
#gruemenu.grue_110 > ul > li > ul::after { border-right-color: #192F4D}
#gruemenu.grue_110 ul ul ul::after {border-right-color:  #192F4D }
#gruemenu.grue_110 ul ul li.has-sub > a::after {border-left-color: #D1E3FB;   right: 17px; top: 14px; }
#gruemenu.grue_110 ul ul li.has-sub.active > a::after,
#gruemenu.grue_110 ul ul li.has-sub:hover > a::after {border-left-color:#FFFFFF; }
#gruemenu.grue_110 { background: #192F4D; }
#gruemenu.grue_110 ul li a, #gruemenu.grue_110
#gruemenu.grue_110 {font-family: "Open Sans", Arial, Helvetica, sans-serif ;}
#gruemenu.grue_110,
#gruemenu.grue_110 ul,
#gruemenu.grue_110 ul li,
#gruemenu.grue_110 ul > li > a { font-size:16px}
#gruemenu.grue_110 ul > li > ul > li > a { font-size:15px!important}
#gruemenu.grue_110 > ul > li > a { color: #D1E3FB; text-transform:uppercase}
#gruemenu.grue_110 > ul > li:hover > a,
#gruemenu.grue_110 > ul > li > a:hover,
#gruemenu.grue_110 > ul > li.active > a {color: #FFFFFF; background: #11243D;}
#gruemenu.grue_110 ul ul li:hover > a,
#gruemenu.grue_110 ul ul li.active > a {color: #FFFFFF; background: #11243D;}
#gruemenu.grue_110 ul ul li a, #navigation-toggle {color: #D1E3FB; background: #192F4D;}
#gruemenu.grue_110 ul ul li:hover > a,
#gruemenu.grue_110 ul ul li.active > a,
#navigation-toggle:hover {color: #FFFFFF;background:#11243D;}
#gruemenu.grue_110 #menu-button{ color: #D1E3FB; }
#gruemenu.grue_110 {-webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px;  border-radius: 3px;}
#gruemenu.grue_110 ul li:first-child > a  { border-top-left-radius: 3px; border-bottom-left-radius: 3px;}
#gruemenu.grue_110 ul ul li:first-child > a { border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 0px; border-bottom-right-radius: px;}
#gruemenu.grue_110 ul ul li:last-child > a {border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;}
#gruemenu.grue_110 #menu-button::after {border-top: 2px solid #D1E3FB; border-bottom: 2px solid #D1E3FB; }
#gruemenu.grue_110 #menu-button::before {border-top: 2px solid #D1E3FB; }
/* Enable Mobile Menu */
[USER="80685"]media[/USER] screen and (max-width: 720px) {
#navigation-toggle { z-index:999; display:block; position:fixed; top:10px; right:10px; padding:10px 10px; box-shadow:0px 1px 1px rgba(0,0,0,0.15);    border-radius:3px;    text-shadow:0px 1px 0px rgba(0,0,0,0.5); font-size:20px;        transition:color linear 0.15s; text-decoration: none !important; }
#navigation-toggle span.nav-line { display:block; height:3px; width:20px; margin-bottom:4px; background:#fff}
#navigation-toggle:hover {text-decoration:none;    }
#gruemenu.grue_110  {display: none;}
}

Ce code n'est pas modifiable, c'est ce qui est généré depuis le panneau d'administration du module

[thebadgones77]

Personne pour m'aiguiller?

[lomart]

Bonsoir,

Tous le code étant en inline, il faudrait désactiver sa génération puis créer un fichier CSS pour le remplacer avec ses propres désirs.
Un gros boulot en perspective ...

[thebadgones77]

ah, ça parait compliqué à mettre en place. dois-je me diriger vers un autre module n'ayant pas autant de protection que celui-ci?

[thebadgones77]

Où alors me tourner vers du code css plutôt qu'un module tout fait?

[lomart]

Bonjour,

Où alors me tourner vers du code css plutôt qu'un module tout fait?

Oui et non, car il faudra toujours du php pour créer le code HTML qui appele le CSS
Il est préférable de trouver un module tout fait

[thebadgones77]

Je suis sur maximenu ck qui à l'air beaucoup plus accessible niveau protection

[lomart]

Je suis sur maximenu ck qui à l'air beaucoup plus accessible niveau protection

Ce n'est pas une protection, c'est une méthode de codage
De mémoire, MaximenuCK utilise un fichier PHP pour créer une feuille de style dynamique. C'est pas forcément plus simple