menú navegació administració #89

New Issue

oriol · 2023-11-13T01:31:36Z

oriol commented

2023-11-13 01:31:36 +00:00

en el menú canviar ressaltat a sobre i afegir ressaltat "quan ets a la pàgina X"

oriol self-assigned this 2023-11-13 01:31:36 +00:00

oriol commented

2023-11-13 08:41:48 +00:00

he posat aquest CSS a la demo, línia 542

/* menu tauler */

#profile-menu summary:hover, #profile-menu summary:focus, ul[role="menu"].action-menu button:hover, ul[role="menu"].action-menu a:hover, body > nav a {
  color: var(--numerus--text-color);
  text-decoration: none;
  transition: 0.25s ease;
}

#profile-menu summary:hover, #profile-menu summary:focus, ul[role="menu"].action-menu button:hover, ul[role="menu"].action-menu a:hover, body > nav ul:hover a {
  color: #ccc;
}

#profile-menu summary:hover, #profile-menu summary:focus, ul[role="menu"].action-menu button:hover, ul[role="menu"].action-menu a:hover, body > nav ul:hover a:hover {
  color: var(--numerus--text-color);
  text-decoration: underline;
}


#profile-menu summary:active, #profile-menu summary:active, ul[role="menu"].action-menu button:active, ul[role="menu"].action-menu a:active, body > nav ul:active li:active a:active {
  color: var(--numerus--text-color);
text-decoration: underline;
}


/* menu tauler final */

però no em surt que quan ets dins la pàgina X, es quedi amb l'efecte "hover"

he posat aquest CSS a la demo, línia 542 ``` /* menu tauler */ #profile-menu summary:hover, #profile-menu summary:focus, ul[role="menu"].action-menu button:hover, ul[role="menu"].action-menu a:hover, body > nav a { color: var(--numerus--text-color); text-decoration: none; transition: 0.25s ease; } #profile-menu summary:hover, #profile-menu summary:focus, ul[role="menu"].action-menu button:hover, ul[role="menu"].action-menu a:hover, body > nav ul:hover a { color: #ccc; } #profile-menu summary:hover, #profile-menu summary:focus, ul[role="menu"].action-menu button:hover, ul[role="menu"].action-menu a:hover, body > nav ul:hover a:hover { color: var(--numerus--text-color); text-decoration: underline; } #profile-menu summary:active, #profile-menu summary:active, ul[role="menu"].action-menu button:active, ul[role="menu"].action-menu a:active, body > nav ul:active li:active a:active { color: var(--numerus--text-color); text-decoration: underline; } /* menu tauler final */ ``` però no em surt que quan ets dins la pàgina X, es quedi amb l'efecte "hover"

jfita commented

2023-11-13 10:35:18 +00:00

però no em surt que quan ets dins la pàgina X, es quedi amb l'efecte "hover"

Diria que no pots amb només CSS, perquè no hi tens la informació de l’URL, pel que l’aplicació haurà d’afegir alguna classe a l’enllaç de la pàgina que s’ha carregat.

> > però no em surt que quan ets dins la pàgina X, es quedi amb l'efecte "hover" > Diria que no pots amb només CSS, perquè no hi tens la informació de l’URL, pel que l’aplicació haurà d’afegir alguna classe a l’enllaç de la pàgina que s’ha carregat.

oriol commented

2023-11-13 11:23:43 +00:00

ok... hi pots afegir una classe a la pàgina activa?

jfita referenced this issue from a commit

2023-11-13 13:47:03 +00:00

Add aria-current attribute to links in the top menu

jfita commented

2023-11-13 19:02:03 +00:00

ok... hi pots afegir una classe a la pàgina activa?

A la demo hi he afegit l’atribut aria-current. T’hi he posat un color de fons groc lleig només per provar-ho, que no sabia com ho volies fer.

> ok... hi pots afegir una classe a la pàgina activa? A la demo hi he afegit l’atribut `aria-current`. T’hi he posat un color de fons groc lleig només per provar-ho, que no sabia com ho volies fer.

👍 1

jfita commented

2024-08-28 08:15:06 +00:00

Fet a f3fdc0d7.

Fet a f3fdc0d7.

jfita closed this issue

2024-08-28 08:15:08 +00:00

Sign in to join this conversation.