Mmenu springt - Scrollleiste aktivieren

**tsunami** · 22.07.2020, 09:42

Hallo zusammen,
ich habe nun mit viel Spucke meine Version von 3.5 auf 4.9 aktualisiert. Soweit geht erstmal alles. Nur mit dem Mmenu habe ich zwei Problemchen. Sobal dich das Menu zuklappe springt der Inhalt. Nach nem Hinweis habe ich gesehen, dass es an der Scrollbar liegt. Sobald ich das Menu aufklappe verschwindet diese und sobald ichs schließe ist diese wieder da und daher springt der Inhalt um ein paar Pixel.
Nun habe ich versucht einfach im Body Bereich overflow:scroll; zu setzen. Gleicher Versuch im wrapper. Ohne Erfolg.

Das zweite Problemchen betrifft den ersten Eintrag im Menü. Der ist aus irgendeinem Grunde schmaler als der Rest. (Höhe).
Die Untersuchung im Chrome ergab 400x20px als Abmessung für den ersten Eintrag. Da bräuchte ich sowas wie 400pxx30px. Wo finde ich die Einträge??
Ein Versuch über "li.active first" und "span.active first" die Höhe zu ändern scheiterte. Um einfach mal den Zugriff generell zu testen habe ich einfach mal bei beiden Klassen ein "color:red gesetzt". Ohne Erfolg.
Es scheint also danach noch irgendwo eine css geladen zu werden. Obwohl ich "externe css" zuerst laden lasse.
Wo finde ich die entsprechenden Einträge?
mfG
tsunami
pS Ich hatte erst einen Versuch via xampp gestartet. Erfolglos. Danach bin ich umgestiegen um habs in ner Subdomain gemacht. Da hatte ich dieselbe Frage schgon gestellt, da es offtopic war, habe ich da nichts mehr gehört und ich hier an korrekterer Stelle ainen neuen Thread gestartet.

**tsunami** · 27.07.2020, 14:31

Oder ist es so schwer?

**tschero** · 28.07.2020, 06:30

Zitat von tsunami

Hallo zusammen,
ich habe nun mit viel Spucke meine Version von 3.5 auf 4.9 aktualisiert. Soweit geht erstmal alles. Nur mit dem Mmenu habe ich zwei Problemchen. Sobal dich das Menu zuklappe springt der Inhalt. Nach nem Hinweis habe ich gesehen, dass es an der Scrollbar liegt. Sobald ich das Menu aufklappe verschwindet diese und sobald ichs schließe ist diese wieder da und daher springt der Inhalt um ein paar Pixel.
Nun habe ich versucht einfach im Body Bereich overflow:scroll; zu setzen. Gleicher Versuch im wrapper. Ohne Erfolg.

Hi,

hast Du mal versucht, den overflow auf das html-Element zu setzen? So habe ich das bisher immer gemacht.

Code:

html{
	overflow-y:scroll;	
}

Oder ist es so schwer?

Hast Du einen Link zur Seite?
Dann ist es vermutlich zumindest einfacher Dir zu helfen.

Gruß
tschero

**tsunami** · 30.07.2020, 07:58

Guten Morgen,
Die Seite: http://neu.edv-dienstleistungen.com/
Allerdings habe ich die letzten Tage soviel dran rumgespielt, dass gar nichts mehr geht.
Muss erst noch fixen. Danke erstmal für einen Ansatz.
edit: Irgendwer eine Idee, wo ich einen Haken vergessen habe? Oder besser neu installieren? Cache ist geleert, Datenbank gewartet. Aber beim Klick aufs Menu passiert nichts. Jquery ist aktiviert.
Gruß
tsunami

**mlweb** · 30.07.2020, 10:49

Schon gefixt?
Das Menü ist zwar weitestgehend ungestylt, funktioniert bei mir aber und ein Springen habe ich auch nicht beobachtet (Firefox 79, Windows 10).

**tsunami** · 30.07.2020, 10:52

nun ist das Springen weg. Danke an tschero!

Nun zur zweiten Frage: Hat das irgendeinen Sinn, dass der erste Menüeintrag sehr schmal ist? Genau wie der active-Eintrag.
Zudem wäre doch ein margin-left beim aktiven Link nicht schlecht. Aber an welcher Stelle muss man die Schrauben drehen? Bzw. Wo kann man das nachlesen?

HTML-Code:

<li class="sibling first"><a href="./" title="Eikel.edv Dienstleistungen" class="sibling first" itemprop="url"><span itemprop="name">home</span></a></li>

steht im Quellcode. Wenn ich aber nur zum testen einfach ein color:red; zu li.sibling.first oder a.sibling.first hinzufüge passiert gar nichts.

Gehe ich allerdings in Chrome auf Untersuchen steht da

HTML-Code:

<li class="sibling first mm-listitem"><a href="./" title="Eikel.edv Dienstleistungen" class="sibling first mm-listitem" itemprop="url"><span itemprop="name">home</span></a></li>

Also ein mm-listitem zusätzlich. Wieso finde ich das im normalen Quellcode nicht? Aber auch wenn ich einfach ne Klasse mache a.sibling first mm-listitem {color:red;} passiert gar nichts.

Irgendwer eine Idee?

**mlweb** · 30.07.2020, 12:14

Die Gestaltung ist reines CSS. Da gibt es etliche Bücher zum Lernen. Meine Favoriten dafür sind die Bücher von Peter Müller, sein neuestes Buch zum Beispiel https://www.rheinwerk-verlag.de/eins...-und-css_5108/.

Welche Selektoren Du im konkreten Fall ansprechen kannst für Veränderungen, siehst Du am besten in den Entwicklertools des Browsers Deiner Wahl.
Ich kenne das mmenu nicht wirklich - setze es jedenfalls nicht produktiv ein. Der Unterschied den Du zwischen Quellcode und Entwicklertools siehst, kommt durch javascript zustande. Schalte einfach javascript aus und Du wirst sehen, dass dann auch keine Unterschiede zwischen Quellcode und Entwicklertools gibt.

Jetzt zu Deinem Code-Beispiel

Ohne javascript greift

Code:

a.first{color: red;
}

oder Dein (höhere Spezifität als notwendig)

Code:

a.sibling.first{color: red;
}

für das erste Element, wenn dieses nicht der aktive Menüpunkt ist.
Mit javascript wird diese Anweisung "ignoriert", denn mm-menu a:link hat eine höhere Spezifität

Code:

.mm-menu a, .mm-menu a:active, .mm-menu a:hover, .mm-menu a:link, .mm-menu a:visited {color: inherit;
}

Dort würde funktionieren

Code:

a.first{color: red !important;
}

Das wäre ganz schlechter Stil und sollte unbedingt vermieden werden.
Eine Möglichkeit wäre

Code:

.mm-menu a.first, .mm-menu a.first:active, .mm-menu a.first:hover, .mm-menu a.first:link, .mm-menu a.first:visited {color: red;
}

Der aktive Menüpunkt ist kein Link-Element sondern "strong", wird also durch die oben angegebenen Styles gar nicht berührt. Hier musst Du Dir das analog für "strong" anschauen.

Edit: a.sibling first mm-listitem {color:red;} kann nicht funktionieren, weil es ein solches Element gar nicht gibt. Das würde ein Element mit der Klasse "mm-listitem" ansprechen, welches innerhalb eines Elements mit der Klasse "first" liegt. Das Element mit der Klasse "first" muss seinerseits noch innerhalb eines Linkelementes mit der Klasse sibling liegen.

Funktionieren würde dagegen

Code:

a.sibling.first.mm-listitem__text {
    color: red;
}

Ich würde allerdings die erste Lösung bevorzugen.

**tsunami** · 30.07.2020, 15:05

So,
nun habe ich es soweit hinbekommen. Vielen Dank. Nun noch etwas am Accordeon.
Wenn ich es richtig verstanden habe, bedeutet:

HTML-Code:

.mm-menu a, .mm-menu a:active, .mm-menu a:hover, .mm-menu a:link, .mm-menu a:visited {
color: inherit;
}

Mache für alle Link(-Zustände), also visited, first,active, hover, unterhalb von allem was mit mm-menu als umschließendes Element zu tun hat:
Farbe rot
Fett usw.
Dasselbe habe ich für strong.
Alles was innerhalb von mmenu und sromg sitzt, mache dies und das?