[RÉSOLU] Personnaliser la navigation avec CSS (a.current ne marche pas !)
2 participants
Page 1 sur 1
[RÉSOLU] Personnaliser la navigation avec CSS (a.current ne marche pas !)
Bonjour,
Je personnalise la navigation grâce au "Modifier le head" (voir http://www.randosourd.ch).
.navigation-colors a:link { background-color... } => ça marche qu'on veut bien la décoration des menus
.navigation-colors a:active { background-color... } => ça marche quand le bouton de souris est resté appuyé sur le menu
.navigation-colors a:hover { background-color... } => ça marche quand on place le curseur de la souris sur le menu
Un problème
Quand on ouvre le site, le menu "accueil" est automatique actif ou je clique sur le menu, la page change et le menu sélectionné doit être actif
.navigation-colors a:selected { ... } => ça n'a pas fonctionné
.navigation-colors a.parent ou a.current { ... } => ça n'a pas fonctionné
Pourriez-vous m'aider cette solution.
Merci.
Je personnalise la navigation grâce au "Modifier le head" (voir http://www.randosourd.ch).
.navigation-colors a:link { background-color... } => ça marche qu'on veut bien la décoration des menus
.navigation-colors a:active { background-color... } => ça marche quand le bouton de souris est resté appuyé sur le menu
.navigation-colors a:hover { background-color... } => ça marche quand on place le curseur de la souris sur le menu
Un problème
Quand on ouvre le site, le menu "accueil" est automatique actif ou je clique sur le menu, la page change et le menu sélectionné doit être actif
.navigation-colors a:selected { ... } => ça n'a pas fonctionné
.navigation-colors a.parent ou a.current { ... } => ça n'a pas fonctionné
Pourriez-vous m'aider cette solution.
Merci.
Dernière édition par RandoSourd le Ven 29 Avr 2016 - 10:11, édité 1 fois
Re: [RÉSOLU] Personnaliser la navigation avec CSS (a.current ne marche pas !)
Le changement d'aspect des li fonctionne en :hover car DEUX propriétés sont indiquées pour cet état :
.navigation-colors li.cc-nav-current > a:link {
background-color: #060;}
et
.navigation-colors a:hover {
background-image: linear-gradient(#00FF00,black);
Par contre, la seconde propriété n'est pas spécifiée pour :active :focus :visited (:current n'est pas un sélecteur, c'est une erreur fréquente) >
:link (état par défaut);
:visited (lien pointant sur une page déjà visitée, et présente dans l'historique du navigateur);
:hover (état survolé);
:focus (état d'un élément qui a reçu «l'attention», par exemple un lien lorsqu'on y accède grâce au clavier, ou un champ texte d'un formulaire lorsqu'on clique dedans);
:active (état cliqué).
Il faut déclarer ces pseudos-classes dans cet ordre.
l
.navigation-colors li.cc-nav-current > a:link {
background-color: #060;}
et
.navigation-colors a:hover {
background-image: linear-gradient(#00FF00,black);
Par contre, la seconde propriété n'est pas spécifiée pour :active :focus :visited (:current n'est pas un sélecteur, c'est une erreur fréquente) >
:link (état par défaut);
:visited (lien pointant sur une page déjà visitée, et présente dans l'historique du navigateur);
:hover (état survolé);
:focus (état d'un élément qui a reçu «l'attention», par exemple un lien lorsqu'on y accède grâce au clavier, ou un champ texte d'un formulaire lorsqu'on clique dedans);
:active (état cliqué).
Il faut déclarer ces pseudos-classes dans cet ordre.
l
Re: [RÉSOLU] Personnaliser la navigation avec CSS (a.current ne marche pas !)
ça marche formidable avec ".navigation-colors li.cc-nav-current a:link { ... }"
C'est exactement ce que je cherche.
Merci beaucoup à FredVig pour votre aide.
C'est exactement ce que je cherche.
Merci beaucoup à FredVig pour votre aide.
Re: [RÉSOLU] Personnaliser la navigation avec CSS (a.current ne marche pas !)
Bien !
Attention (j'insiste) :
"current", dans "cc-nav-current" est ici un nom de classe choisi par Jimdo.
Cela pourrait être n'importe quelle formulation, "courant", "bidule"…
Attention (j'insiste) :
"current", dans "cc-nav-current" est ici un nom de classe choisi par Jimdo.
Cela pourrait être n'importe quelle formulation, "courant", "bidule"…
Sujets similaires
» personnaliser une navigation en barre laterale
» comment styliser une navigation personnalisé (résolu)
» Cacher la navigation dans une seule page(RESOLU)
» Modifier L'onglet du haut de la barre de navigation [résolu]
» Melbourne: problème avec la navigation
» comment styliser une navigation personnalisé (résolu)
» Cacher la navigation dans une seule page(RESOLU)
» Modifier L'onglet du haut de la barre de navigation [résolu]
» Melbourne: problème avec la navigation
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|