[RÉGLÉ] Création menu déroulant Joomla 3.4 (menu haut, navigation horizontale)

[supertoto]

Bonjour à tous,

j'ai regardé des vidéos sur la création de sous menu mais je n'ai pas réussi à obtenir ce que je souhaitais faire.

Mon besoin est basique, je souhaite que les sous menu apparaissent au survol du menu principal :

Menu principal
- Sous menu 1
- Sous menu 2

J'utilise le template par défaut de l'installation Joomla 3.4.8.

Dans les tutoriaux, il est dit de créer un menu parent en tant que séparateur (dans "liens divers") et de rattacher les "menus enfants" (Sous menu 1 et Sous menu 2).
Hors, lorsque je configure le menu principal en tant que séparateur alors le style qui lui est attribué le démarque des autres (ce que je ne souhaite pas) et les sous menus ne s'affichent pas au survol.

Par contre, quand je configure le lien principal en tant qu'article, alors au survol il m'affiche bien les sous rubriques.

Toutefois deux choses me gênent :
- Les liens apparaissent au survol uniquement si j'ai cliqué auparavant sur le "Menu principal" ce qui m'oblique donc à afficher l'article qui lui est affecté.
- J'aimerais que le menu principal ne soit pas cliquable et n'affiche donc pas d'article.

Auriez-vous une idée pour que je puisse avoir un sous-menu qui apparaisse au survol sans devoir cliquer sur la rubrique parente ?

Merci d'avance pour votre retour.

[toffffe]

Re : Création menu déroulant Joomla 3.4 (menu haut, navigation horizontale)

Salut
Pour ne pas que l'onglet principal soit cliquable, c'est bien un séparateur qu'il faut utiliser. Sur certains templates il faut redonner un coup de css pour qu'il ressemble exactement aux autres liens.
Pour ton menu déroulant, as-tu regarder l'extension maximenuck ?

[supertoto]

Re : Création menu déroulant Joomla 3.4 (menu haut, navigation horizontale)

Salut
Pour ne pas que l'onglet principal soit cliquable, c'est bien un séparateur qu'il faut utiliser. Sur certains templates il faut redonner un coup de css pour qu'il ressemble exactement aux autres liens.
Pour ton menu déroulant, as-tu regarder l'extension maximenuck ?

Bonjour toffffe,

grand merci pour ta réponse.
Ca me conforte dans mon action.

Effectivement, lors de mes recherches j'ai vu l'extension maximenu-ck mais avant de l'installer je voulais utiliser les outils de base pour ne pas trop "alourdir" le système.

De ce fait, je vais voir pour analyser le code et rajouter un coup de CSS, il faudra peut-être un peu plus, car au delà de l'aspect physique, il y a aussi le fait qu'au survol les sous-rubriques ne s'affichent pas.

Je mettrai le résultat de mon action ici. En attendant je reste preneur de suggestions et conseils ;-)

[toffffe]

Re : Création menu déroulant Joomla 3.4 (menu haut, navigation horizontale)

Pour que les sous menus s'affichent regarde le paramétrage de ton module de menu

[supertoto]

Re : Création menu déroulant Joomla 3.4 (menu haut, navigation horizontale)

Pour que les sous menus s'affichent regarde le paramétrage de ton module de menu

Merci pour ton retour, j'ai donc regardé au niveau paramétrage.
Rien de nouveau pour l'instant.
Dans le paramétrage "Module::menu" j'ai coché "Afficher tous les liens".

J'ai fait des recherches, je suis tombé sur une conversation qui décrit exactement le même problème que celui que je rencontre, ici mais la personne ne sait pas comment elle a fait pour résoudre le problème

J'ai effectué la modification proposée dans le post ci-dessus en ajoutant " nav-pills" mais ça n'a pas réglé mon problème. Pas sûr que ça agisse sur le contenu du HTML généré car ça agit seulement sur le style je suppose (les sous menus sont absents du html lorsque je ne clique pas sur le menu parent notamment).

Mon module d'affichage est protostar.
Un constat que je fais dans le code html c'est que lorsque je ne clique pas sur le menu qui contient des sous menus, alors le code HTML généré est le suivant (les sous-rubriques n'existent pas).

<li class="item-478 parent"><a href="#">Mon menu</a></li>
  <a href="#">Mon menu</a>
</li>

Par contre quand je clique sur le menu parent j'ai le HTML suivant (là il y a bien la présence de ma sous rubrique qui s'affiche au survol) :

<li class="item-478 current active deeper parent">
 <a href="/mon-site/index.php/mon-menu">Mon menu</a>
 <ul class="nav-child unstyled small"><li class="item-479">
     <a href="/mon-site/index.php/mon-menu/sous-menu">Sous menu</a></li>
 </ul>
</li>

Egalement, lorsque mon menu est un séparateur, alors il n'est pas cliquable, ok, mais par contre rien ne se passe au survol (d'ailleurs les sous-rubriques ne sont pas présentes dans le HTML) et je perds le style (pour ça il me suffira d'agir sur le css une fois que ce sera ok).

J'ai regardé un peu le code de Joomla mais je ne vois pas trop où est-ce que le module du menu horizontal (position1) boucle sur les informations en base de données afin de construire les sous rubriques.
Cela me permettrait peut être de comprendre la condition qui fait que dans un cas le sous menu est produit en HTML et dans un autre cas non.

Je suis preneur de vos conseils.

Sinon, je serai contraint d'installer le module tiers que tu me conseilles, mais il me semble un peu trop évolué par rapport à mon besoin ...

[supertoto]

Re : Création menu déroulant Joomla 3.4 (menu haut, navigation horizontale)

Pour information,

je suis passé par le module MaxiMenu CK.
En effet, il m'affiche tout bien comme il faut :
> il me crée bien les fils du menu parent sans que je n'ai besoin de cliquer sur le menu parent.
> lorsque je déclare le menu parent en tant que séparateur, il conserve bien le même style d'affichage que les autres menus qui eux sont cliquables.

Au niveau paramètrage j'ai juste eu à faire :
> publier le module
> définir la position (position-1)
> dépublier le menu haut de base, sinon j'ai les deux menus

Du coup, ce module répond à mon besoin fonctionnel, toutefois, il est un peu grossier (trop futuriste et animé), si je maintiens son utilisation, il faudra que je le configure pour le rendre plus sobre.

Avant de fermer ce sujet, je vais tout de même tenter de faire fonctionner le menu de base.
L'installation de MaxiMenu CK m'a permis de comprendre qu'effectivement le code qui tourne derrière charge bien les sous rubriques du menu parent.
Ce n'est donc pas un problème de paramétrage entre rubrique et sous rubrique, tout est là, c'est le module de base qui ne charge pas les fils lorsque je clique ailleurs que sur le menu parent.

Les pistes que j'ai pour l'instant :
1) refaire une installation de joomla avec la version 3.5 j'étais en 3.4.8 (peut-être faire une installation sans données d'exemple d'ailleurs ...)
2) essayer de trouver comment est généré le menu haut dans le code de Joomla ou faire un mini module qui ne ferait que la construction du menu haut avec le style par défaut mais sans les problèmes que je rencontre

Si vous avez des suggestions ou idée de tutoriaux qui fonctionnent bien, pour le point 2) n'hésitez pas (j'ai pas encore vraiment creusé sur ce point là).

Je viendrai enrichir le contenu de ce post pour les malheureux qui se trouvent ou se trouveront dans mon cas ...

Merci d'avance et bonne journée.

[manu93fr]

Re : Création menu déroulant Joomla 3.4 (menu haut, navigation horizontale)

Bonjour,
maximenuCK est parametrable pratiquement a l'infini ... pour peu que tu sois a l'aise en CSS
Tu peux aussi te faciliter la tache en achetant et installant le plugin qui gère ces paramètres personnalisés. Cette extension fait bien plus que de s'occuper de sous-menu

Mais si tu souhaites conserver le menu d'origine, sous quel template es tu ? As tu un lien vers le site ? meme en construction ...

[supertoto]

Re : Création menu déroulant Joomla 3.4 (menu haut, navigation horizontale)

Merci pour ton retour manu93fr

Effectivement j'aimerais bien conserver le menu d'origine.

Pour information depuis hier, j'ai refait une installation en 3.5 avec juste une page d'accueil FR par défaut pour éviter de polluer l'admin et voir si le problème persistait. Malheureusement ça n'a rien changé.

Je suis sous le template protostar.

Ci-dessous 3 images qui permettent de voir le rendu (le menu parent02 est un séparateur) :
Le menu déroulé suite au survol (fonctionnement ok mais j'ai d'abord dû cliquer sur le menu parent01)


Le menu non déroulé au survol (je n'ai pas cliqué sur le lien parent avant mais sur le lien accueil, résultat les sous rubriques n'apparaissent plus au survol)


Le paramètrage de la filiation (rubrique parent / enfant) dans l'admin :


En plus de ce message, je t'ai transmis un lien vers mon site en message privé au cas où.

Merci pour ton aide.

[supertoto]

Bonjour à tous,

j'ai trouvé un début de réponse.
En cherchant un peu dans le code et en base, j'ai trouvé une solution qui me permet d'afficher les fils (sous rubriques) d'une rubrique parente.

Cela se trouve en base, dans le champs "params" de la table "modules" (voir requête texte et image ci-dessous).

select * from modules where position="position-1";

J'ai passé showAllChildren à 1 (il était à 0)



Donc maintenant au survol de mon lien "séparateur" j'ai bien le fils qui apparaît, ça avance.

Ensuite, je suis retourné dans le module menu pour modifier la valeur de "Afficher tous les liens", et c'est bien ça qui agit sur la valeur de "showAllChildren".

D'ailleurs dans la version 3.5 que j'ai installé hier je n'avais pas refait ce paramétrage dans l'admin donc ça ne pouvait pas résoudre le problème.
Je viens de tenter et effectivement sur ma nouvelle version toute fraîche c'est ok.
C'est d'ailleurs ok aussi dans ma version 3.4.8 depuis que j'ai fait la modification à la main.
Alors du coup, tout est rentré dans l'ordre ...

Désormais, il ne me reste plus que la partie css à gérer pour que le séparateur ait le style des autres liens.

Si vous avez un élément de réponse, je suis preneur, sinon je mentionnerai le résultat de mes recherches pour clore le sujet de façon global.

[supertoto]

Bonjour à tous,

j'y vois désormais plus clair sur mon erreur.
En fait, j'avais bien coché "afficher tous les liens" mais pas sur le bon module ;-(
Dans ce cas, effectivement ça marche moins bien.

Ensuite pour ce qui est de la création de sous menu avec la conservation d'un style cohérent, deux solutions :
1) créer un menu parent qui est une url externe avec comme valeur de lien : "#"
Cette solution est pratique car elle permet d'hériter des styles de l'application et donc si on change la couleur du template, les liens (couleur, background ...) s'harmonisent également.

2) créer un menu parent en tant que séparateur
Cette solution est plus propre car on ne crée pas un lien fictif pour faire de la mise en page et cette pratique parait plus appréciée pour le référencement.
Toutefois, la mise en page ne suit pas et il faut surcharger le style par défaut avec les propriétés css suivantes pour harmoniser le menu (ici ce sont les couleurs par défaut de protostar) :

.separator {
    border-radius: 5px;
    margin-bottom: 2px;
    margin-top: 2px;
    padding-bottom: 8px;
    padding-top: 8px;

    line-height: 14px;
    margin-right: 2px;
    padding-left: 12px;
    padding-right: 12px;

	display: block;
    color: #08c;
    text-decoration: none;	
}

.separator:hover, .separator:focus  {
	background-color: #eee;
	cursor: pointer;
}

.active > .separator {
    background-color: #08c;
    color: #fff;	
}

A noter également, que la mise à jour des couleurs du template nécessiteront de mettre à jour les css ci-dessus.

Pour surcharger les styles css :
> pour la version 3.5 de Joomla, ajouter le fichier user.css dans :
template/protostar/css/user.css

> pour les versions antérieures à 3.5 : créer le fichier template/protostar/css/myuser.css (ou le nom que vous souhaitez)
Puis ajouter la deuxième ligne ci-dessous (la première figure déjà) dans le fichier template/protostar/index.php :

// Add Stylesheets
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/template.css');
$doc->addStyleSheet($this->baseurl . '/templates/' . $this->template . '/css/myuser.css');

Voilà, c'est tout, si ça peut servir à quelqu'un c'est cool.