Bout de code survol lien de menu

Bonjour
Je cherche désespérément à réaliser un effet un peu plus sophistiqué que ce que je vois sur beaucoup de site.
La difficulté, c'est que je ne peux avoir accès aux codes html généré par le cms joomla (dans ce cas)

J'ai donc cherché un certain nombre d'exemples de menu sympathique
Pouvez-vous me communiquer le code à insérer dans le user.css sur la page
https://cochanger.eu/autres/cochanger-eu
En effet j'ai du mal à adapter le code.
L'idée est d'avoir
* aucun soulignement sur l'item de menu par défaut
* un effet d'encadrement dynamique au survol du lien
* le maintien d'un encadrement complet du lien actif

Des exemples qui me semblent pas trop difficile à réaliser sans JavaScript sont sur la page
https://webdevtrick.com/css-link-hover-effects/
Ce qui s'approcherait est les exemples 6,5,2,4 (par intérêt décroissant).
Modifié par HDcms (30 May 2022 - 16:40)

HDcms a écrit :
Bonjour
Je cherche désespérément à réaliser un effet un peu plus sophistiqué que ce que je vois sur beaucoup de site.
La difficulté, c'est que je ne peux avoir accès aux codes html généré par le cms joomla (dans ce cas)

J'ai donc cherché un certain nombre d'exemples de menu sympathique
Pouvez-vous me communiquer le code à insérer dans le user.css sur la page
https://cochanger.eu/autres/cochanger-eu
En effet j'ai du mal à adapter le code.
L'idée est d'avoir
* aucun soulignement sur l'item de menu par défaut
* un effet d'encadrement dynamique au survol du lien
* le maintien d'un encadrement complet du lien actif

Des exemples qui me semblent pas trop difficile à réaliser sans JavaScript sont sur la page
https://webdevtrick.com/css-link-hover-effects/
Ce qui s'approcherait est les exemples 6,5,2,4 (par intérêt décroissant).

Le html de cochanger.eu/autres/cochanger-eu tu peux le modifier ou pas ? (afin de placer le CSS de l'autre URL avec des class et des span ?

Bonjour,

Si besoin de modifier le code html du menu, tu peux normalement faire une surcharge de la vue du module mod_menu en dupliquant le fichier modules/mod_menu/tmpl/default.php dans ton propre template templates/mon-template/html/mod_menu/default.php pour de le personnaliser comme tu le souhaites sans modifier le code original du module (afin de pouvoir le mettre à jour notamment).
Voir https://docs.joomla.org/Understanding_Output_Overrides pour plus de détails.

A priori tu utilises le template par défaut cassiopeia qui inclus déjà une surcharge pour le mod_menu, regarde les fichiers déjà inclus dans templates/cassiopeia/html/mod_menu, tu devrais y retrouver le code php qui génère le html du menu.
Modifié par Pitet (31 May 2022 - 11:38)

Bonjour
Non sinon je pense que je serai arrivé à faire le css
Je crois que c'est possible en pointant sur l'élément au-dessus ? Mais cela dépasse mes compétences vu le nombre d'heures passé pour adapter un exemple aussi bien que ceux mentionnait sur cette page.

@Pitet
(réponse vu après)
Merci pour cette piste que j'avai déjà en tête, mais bon j'aurais préféré une solution CSS, sans intervenir au niveau du code php
Modifié par HDcms (31 May 2022 - 11:45)

Pour adapter les exemples 2 et 4, tu ne devrais pas avoir besoin de changer le code html du menu. Tu peux simplement surcharger le css de ton menu en reprenant les règles css de l'exemple et en modifiant le sélecteur css .effect2 par le sélecteur css de tes éléments de menu.
Pense à utiliser un sélecteur css plus lourd (via un id par exemple) que ceux déjà utilisés par ton css pour que la surcharge soient bien pris en compte (notion de poids des sélecteurs css).

Par exemple en reprenant le code html du menu et le css de ton site, puis en copiant l'exemple 2 et en modifiant le sélecteur .effect2 par #navbar1 .nav-item, on arrive bien à reproduire l'effet de l'exemple : https://jsfiddle.net/aub5m9pq/
Penser à agrandir le rendu sur jsfiddle pour voir le résultat. Il faudra adapter le css pour les résolutions plus petites.

Pour les exemples 5 et 6, il faudrait modifier le html du mod_menu pour ajouter la balise span dans le lien du menu.
Eventuellement, tu peux peut-être te passer de la structure a > span de l'exemple en utilisant à la place ta liste html via la structure li > a, mais il faudra surement modifier le css pour corriger les éventuels conflits avec le css déjà présent sur ton site.

Re
@Pitet
Super si tu connais joomla
A/ Surcharge joomla
J'ai regardé à nouveau car le 6 ou le 5 m'intéresserait plus
J'ai déjà faits des surcharges d'articles, mais là je me trouve avec plusieurs fichiers après avoir généré une override. A priori, c'est le fichier default_url.php mais je ne retrouve pas la structure du html. il y une structure html dans collapse-default.php mais ce n'est pas bon

B/ ta proposition
Je ne vois pas ce que tu dis sur https://jsfiddle.net/aub5m9pq/
J'ai bien essayé de copier/coller le code dans le user.css mais je ne vois pas non plus de résultat sur le site !

C/ mon dernier essai
Finalement je me suis résolu à simplifier encore en mettant

#navbar1 .nav-item:hover {
  border:2px solid black;
}
#navbar1 .current {
  border:1px solid black;
}

IL y a vraiment quelque chose qui m'échappe sur ce code simple. Il y a un effet au survol d'un élément de menu que je n'arrive pas à enlever. Je ne vois pas ou se trouve cet autre effet :hover

D/ Finition
Sinon si toi ou quelqu'un d'autre ayant de meilleure compétence webdesign que moi pour finaliser ce menu !?
J'aurais notamment souhaité avoir sur le bas du menu, un arrondi comme sous la mise en avant du texte "vcsdsdsd" avec si possible un petit dégradé avec la même variable var(--cassiopeia-color-primary);

Bonjour
Étrange le message précédent d'un nouveau membre. Spam ?

J'ai "peut-être" résolu le problème de survol en mettant le même padding au survol et sur l'item de menu courant, mais c'est quand même moins bien que les exemples 6 ... mentionnés au-dessus (snif)

Pour la finalisation de l'en-tête, j'ai ouvert https://forum.alsacreations.com/topic-4-89661-1-Aide-a-la-finalisation-dune-belle-en-tete-sans-ligne-droite.html

Je laisse ouvert ce fil de discussion pour éventuelle modif du fichier php (surcharge joomla) ou si quelqu'un avait les compétences pour adapter le menu suivant https://webdevtrick.com/css-link-hover-effects/
Ce qui s'approcherait est les exemples 6,5,2,4 (par intérêt décroissant).