1. #1
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    401
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 401
    Points : 529
    Points
    529

    Par défaut Modification couleur des fléches sur un menu horizontal

    Bon, je fais un blocage sur un menu horizontal avec des flèches et 3 niveaux.
    Sûr, que ça va sauter aux yeux de certains, mais malgré tous mes essais, j'ai l'intellect qui flanche.

    https://codepen.io/JefReb/pen/POBwZL

    Lorsque je survole le sous-niveau 3 la flèche du sous-niveau 2 reste bleu clair alors qu'elle devrait passer au bleu foncé comme au survol su 1er niveau.
    Une petite aide s'impose ... merci d'avance

  2. #2
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 548
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 548
    Points : 21 098
    Points
    21 098

    Par défaut

    Bonjour,

    1- met la flèche sur le a, pas sur le li.

    2- attention à ne pas copier-coller n'importe quoi (indice : dans le code HTML)
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  3. #3
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    401
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 401
    Points : 529
    Points
    529

    Par défaut

    Merci Jerome, mais cela fait la même chose.
    J'ai simplifié et je suis partie sur la base des exercices avec Laurent.

    https://codepen.io/JefReb/pen/ooMwjx

    Le problème existe uniquement lorsque l'on passe sur le niveau3 du premier li de niveau 2, la flèche reste bleu clair au lieu de passer bleu foncé. (janvier et février de cession1)
    Alors que c'est correct partout ailleurs.
    J'ai beau chercher, je ne vois pas la solution.
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    nav > ul > li ul li:first-child > a::before  {
    	content: '';
    	position: absolute;
    	left: 10px;
    	top:-6px;
    	border-style: solid;
    	border-width: 0 6px 10px 6px;
    	border-color: transparent transparent #001847;	/* bleu foncé */
    }
    nav > ul > li ul li:first-child:hover > a::before {
    	border-color: transparent transparent #7db6d9;	/* bleu clair */	
    }
    nav > ul > li ul ul li:first-child > a::before {
    	content: '';
    	position: absolute;
    	left: -6px;
    	top: 10px;
    	border-style: solid;
    	border-width: 6px 10px 6px 0;
    	border-color: transparent #001847 transparent;	
    }
    nav > ul > li ul ul li:first-child:hover > a::before {
    	border-color: transparent #7db6d9 transparent;	
    }

  4. #4
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 548
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 548
    Points : 21 098
    Points
    21 098

    Par défaut

    OK.
    Je t'explique...

    1- li:hover = "au survol du <li>"
    SAUF QUE.... le curseur est sur le <li> du niveau 3.... qui est lui-même CONTENU dans le <li> du niveau 2 !
    Le li:hover concerne alors les DEUX <li> ! (et même le li parent niveau 1)
    Ce qui explique pourquoi les 2 flèches s'allument.

    2- C'est pourquoi je t'ai dit de mettre la flèche sur le <a>, pour qu'elle ne s'allume QUE au survol du <a> sur lequel se trouve le curseur.

    DONC ce n'est pas li:hover > a::before qu'il faut écrire, mais li > a:hover::before.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    nav > ul > li ul li:first-child > a:hover::before {
    	border-color: transparent transparent #7db6d9;	/* bleu clair */	
    }
    CQFC !
    (Ce Qu'il Fallait Coder)

    3- <a href="javasript:void();return false;"> : rien ne te choque ?

    4- Attention à la version "PHONE" de ton menu... (min-width: 80px;, ce n'est pas assez).
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  5. #5
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    401
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 401
    Points : 529
    Points
    529

    Par défaut

    Arrrggg! Merci Jérôme, oui c'est très très clair.
    Je pleure, moi qui pensais commencer à bien maîtriser le menu horizontal.

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    nav > ul > li ul li:first-child > a::before  {
    	content: '';
    	position: absolute;
    	left: 10px;
    	top:-6px;
    	border-style: solid;
    	border-width: 0 6px 10px 6px;
    	border-color: transparent transparent #001847;	/* bleu foncé */
    }
    nav > ul > li ul li:first-child > a:hover::before {
    	border-color: transparent transparent #7db6d9;	/* bleu clair */	
    }
    nav > ul > li ul ul li:first-child > a::before {
    	content: '';
    	position: absolute;
    	left: -6px;
    	top: 10px;
    	border-style: solid;
    	border-width: 6px 10px 6px 0;
    	border-color: transparent #001847 transparent;	
    }
    nav > ul > li ul ul li:first-child > a:hover::before {
    	border-color: transparent #7db6d9 transparent;	
    }

    3) oui bien sûr j'ai tout de suite vu la correction à faire
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <a href="javascript:void();return false;">
    4) oui c'est un oublie, mais je ne visais pas le phone. merci de me l'avoir signalé ...

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 996
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 996
    Points : 32 133
    Points
    32 133

    Par défaut

    Bonjour,
    dans un menu, à mon avis, on devrait toujours savoir/connaitre le chemin, le « fil d'ariane », du sous-menu que l'on va choisir. Ceci entraine que l'on devrait garder la surbrillance en amont.

  7. #7
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 548
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 548
    Points : 21 098
    Points
    21 098

    Par défaut

    Bonjour,

    je suis d'accord avec NoSmoking (c'est d'ailleurs comme ça dans les scripts que j'ai proposés).
    Après... c'est au choix de chacun.

    JefReb, ça se fait très simplement à partir de ton script précédent : https://codepen.io/JefReb/pen/ooMwjx
    Il suffit de remplacer :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    nav  a:hover {
    	background: #7db6d9;
    	text-decoration: underline;
    }
    par :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    nav li:hover > a {
    	background: #7db6d9;
    	text-decoration: underline;
    }
    Les <a> s'allument à travers la "cascade" des <li> concernés par le survol (:hover).

    On peut même s'amuser avec une 3ème couleur :
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    nav li:hover > a:not(:hover) {
    	background: #045FB4;
    }
    nav li > a:hover {
    	background: #7db6d9;
    	text-decoration: underline;
    }
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  8. #8
    Membre confirmé
    Homme Profil pro
    Retraité informatique
    Inscrit en
    juin 2012
    Messages
    401
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Retraité informatique
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : juin 2012
    Messages : 401
    Points : 529
    Points
    529

    Par défaut

    Super, mille merci, mais ... il me semble que l'on n'obtienne pas du tout le même rendu.
    https://codepen.io/JefReb/pen/ooMwjx
    et
    https://codepen.io/JefReb/pen/xParLb

    Même si ce dernier indique mieux le chemin utilisé.

  9. #9
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    10 548
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 10 548
    Points : 21 098
    Points
    21 098

    Par défaut

    Euhhh..... Ben oui, c'est le principe...
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 996
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 996
    Points : 32 133
    Points
    32 133

    Par défaut

    Précision :
    Ceci entraine que l'on devrait garder la surbrillance en amont.
    peut n'être que sur le texte pas forcément le fond survolé, c'est pour accrocher l'oeil.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [Python 3.X] Problème sur le remplissage d'une liste avec des lambdas
    Par TSF.Lyon dans le forum Général Python
    Réponses: 2
    Dernier message: 24/04/2016, 14h02
  2. problème sur isset menu déroulant
    Par Evelyne31 dans le forum PHP & MySQL
    Réponses: 43
    Dernier message: 04/08/2012, 22h25
  3. Menu horizontal - Adapter la taille des sous-menus
    Par sourisbleue dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 18/05/2011, 13h55
  4. Problème de positionnement menu horizontal
    Par bogsy15 dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 03/07/2007, 09h13
  5. nombreux problèmes sur mon menu de gauche
    Par pp51 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 12/12/2005, 22h00

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo