Style personnalisé d'un sous-menu de navigation différent selon le parent

[FilmsdeLover]

Bonjour, je suis en train de remettre les mains dans le cambouis de mon site suite à une mise à jour de mon design perso et j'ai une question pour les experts portant sur le menu de navigation Jimdo.

Est-il possible de styliser indépendamment des <li> du menu de navigation de deuxième rang sans avoir à le faire pour chacun d'entre eux et sans que ça n'impacte les autres deuxièmes rangs de ma navigation (mais qui ont un niveau parent différent) ? Je ne sais pas si je m'explique bien donc je vais essayer de reformuler : avec la navigation Jimdo, est-il possible de styliser différemment deux menus de navigation de deuxième rang (MainNav2) ? Je ne sais pas si c'est plus clair.

[FredVig]

il me semble que c'est possible avec un ciblage de certains enfants, dépendant du premier contenant : par exemple pour toucher seulement 'idées cadeaux' sur ton site

Code:

div.col1:nth-child(2) > ul:nth-child(2) > li:nth-child(2){background-color: black;}

c'est ce que tu veux faire ?

ou bien cibler un li sur 2 dans la colonne 2 de "rubriques" :

Code:

div.col1:nth-child(2) > ul:nth-child(2) > li:nth-child(2n){background-color: black;}

[FilmsdeLover]

Alors, il me semble que tu as modifié avec ce code ma navigation "maison", qui n'est pas celle de Jimdo. En fait, j'aimerais pouvoir modifier le menu de gauche de cette page : https://www.filmsdelover.com/rubriques/ sans que ça n'affecte le menu de gauche de cette page-ci : https://www.filmsdelover.com/critiques/ Ces deux menus sont des MainNav2.

[FredVig]

Le plus simple à mon avis est de faire une modification de css selon la page. Cela est bien compatible avec le design perso il me semble.
Sinon, il faut cibler les élements mais seulement de la page concernée

Code:

#page-228631050 ul.mainNav2 li:nth-child(2n) a{color: blue;}

[FilmsdeLover]

Ok donc c'est bien ce qu'il me semblait, ce n'est pas possible d'automatiser ça... Merci !

[FredVig]

Avec mon dernier code, il te suffit de décider de la page, donc je ne dois pas comprendre un truc…

[FilmsdeLover]

C'est pas facile à comprendre, mais j'arrive pas à bien l'expliquer. En fait, je veux styler mon MainNav2 de façon indépendante selon le parent MainNav1. Mon MainNav2 sous "Critiques" comprend mes 651 pages films et je ne veux pas que ce sous-menu prennent les modifications que j'aimerais donner au MainNav2 sous "Rubriques". Je vais essayer de mettre des images dans mon prochain message pour mieux expliquer. ^^

[FilmsdeLover]

Alors, avec des images. J'aimerais pouvoir styliser automatiquement en CSS les "enfants" en MainNav2 de la partie "Rubriques" sans que les changements que je fais n'affectent les "enfants" en MainNav2 de la partie "Critiques".

Le problème est que je ne sais pas si la fonction "child" marche bien avec le menu Jimdo et surtout si on l'applique dans ce cas précis.

[FredVig]

Ok…
Le problème c'est d'appliquer le style à toutes pages sous "Rubriques", mais pas au 651 pages de Critiques. étant donné la structure de ton site, ça demande une réflexion intéressante.
Je suppose qu'il faut chercher à partir d'un javascript qui tient compte du début de l'adresse de la page : si l'adresse contient "https://www.filmsdelover.com/critiques" ne pas appliquer le style "nouveau style de liens".
Je vais y réfléchir…

[FilmsdeLover]

Non, t'embêtes pas, je me demandais juste si y'avait un moyen simple de le faire en CSS mais si y'en a pas, je vais essayer de les styler à la main, pour les 15 pages des différentes rubriques. C'est pas idéal, mais au moins, ça fera le job. Merci quand même de ton aide !

[FredVig]

Parce que, quand on me jette un bâton, je le rapporte, quoi qu'il advienne
Voilà la solution :

1) mettre en css la class qui modifie les liens
.bleubleu{color:blue!important;}

2) mettre un javascript en sidebar (ou en design perso)
qui indique de changer la classe des éléments ciblés lorsque le mot "rubriques" est dans l'adresse
cibler dans le javascript les liens
et ajouter le code :

Code:

<script type="text/javascript">
/* <![CDATA[ */
var cible = document.getElementByClassName("level_2");
    
if(window.location.href.includes("rubriques") == true)
{
 cible.className="bleubleu";
}else{
cible.className=null;
}

/* ]]> */
</script>

[FilmsdeLover]

Merci, je vais essayer ça ! J'ai toujours un peu de réticence à utiliser du Javascript sur mon site mais je vais tenter le coup. Merci encore !

[FredVig]

Si tu as des craintes, demande à un spécialiste de le passer à la validation (Gérard ?)
J'ai testé le code sur une page de mon site. il faudra sans doute peaufiner le ciblage, quelque !important à enlever ou remettre, ciblage à modifier en fonction de ce que tu veux mettre comme style (sur les typo, sur les fonds,au survol etc.)

[Disney Analysis]

Impossible de modifier chaque "li", c'est encore plus long que page par page. En somme, je ne vois que deux solutions pour du 100% CSS sans javascript :

1) CSS page par page

2) Recréer deux menus en HTML avec des ID différents et modifier le CSS en fonction (par exemple un avec l'ID "MainNav2Rubriques" et l'autre "MainNav2Critiques") (uniquement possible si c'est un menu créé de toute pièce, et non si c'est un menu natif de Jimdo, ce qui semble être ton cas).

Perso, je partirais sur la deuxième solution (si non-natif), peut-être plus longue au début, mais qui au final te tracassera moins pour la suite en cas de nouveau changement.

[Contenu sponsorisé]