Rahmen um aktive Menüpunkte entfernen

ThomasZ

Hallo,

ich bereite gerade für eine weitere Seit von uns den Umstieg von J5 auf J6 mit gleichzeitigem Wechsel von HU nach CE vor.

Hier habe ich jetzt Rahmen um den Pfeil bzw. Menüpunkte, wenn diese angeklickt werden.

Ich habe leider nicht rausgefunden, wie ich diese entferne.

Kann mir jemand weiterhelfen?

VG

Thomas

drmenzelit

Es gibt keinen Rahmen bei aktiven Menüpunkte. Der Rahmen erscheint, wenn man mit der Tab-Taste navigiert und das ist wegen Barrierefreiheit gut so.

ThomasZ

Nein, ich nutze die Tab-Taste nicht. Er kommt wenn ich einen Menüpunkt anklicke

ThomasZ

.metismenu.mod-menu .metismenu-item>span, .metismenu.mod-menu .metismenu-item>a, .metismenu.mod-menu .metismenu-item>button {
text-overflow: ellipsis;
white-space: nowrap;
text-decoration: none;
overflow: hidden;
}

Ich vermute, das es daran liegt, dass text-decoration: none; durchgestrichen ist, wenn ich die Seite untersuche.

drmenzelit

Du kannst folgendes in deiner user.css einfügen:

Code

.metismenu.mod-menu .metismenu-item > a:focus, .metismenu.mod-menu .metismenu-item > button:focus {
  outline: none;
}
.metismenu.mod-menu .metismenu-item > a:focus-visible, .metismenu.mod-menu .metismenu-item > button:focus-visible {
  outline-offset: 2px;
  outline: 2px solid;
}

ThomasZ

Hat funktioniert. Prima Vielen Dank!

Sieger66

Übrigens solltest du nicht nur:

Code

/*Rahmen beinm Anklicken im Menü entfernen*/
.metismenu.mod-menu .metismenu-item > a:focus, .metismenu.mod-menu .metismenu-item > button:focus {
  outline: none;
}

in deiner user.css wie derzeit vorhanden verwenden.

Sondern zusätzlich wie in #5 auch:

Code

.metismenu.mod-menu .metismenu-item > a:focus-visible, .metismenu.mod-menu .metismenu-item > button:focus-visible {
  outline-offset: 2px;
  outline: 2px solid;
}

damit der Rahmen erscheint, wenn man mit der Tab-Taste navigiert und das ist wegen Barrierefreiheit gut so!

ThomasZ

Okay, verstanden