Navigation Gaja: Mousover-Hintergrundfarbe stimmt nicht mit Verlinkung überein!

19.01.2020 10:58
#1 Navigation Gaja: Mousover-Hintergrundfarbe stimmt nicht mit Verlinkung überein!
avatar
Mitglied

Bewegt man die Maus über die Navigationleiste, färbt sich der Hintergrund über das Auswahlfeld ein. Auch der Mauszeiger wird zur Hand!
Aber!
Wenn man nicht genau auf die Schrift klickt, wird keine Seite aufgerufen!
Sehr unschön!

Lösung!
Besser währe eine Auslösung über die gesamte Auswahlfläche!


Vorablösung:
Habe keine vernünftige Lösung gefunden, ohne das Template zu verändern!
Aber wenigsten wird der Mauszeiger erst zur Hand, wenn ein Mausklick die Seite aufruft!

Eintrag in "Eigener CSS Code":

1
2
3
4
 
<style>
.nav_n li:hover{cursor:default;}
#nav_userinfo_li {cursor:pointer;}
</style>
 



Bis dann
Wolfgang

20.01.2020 11:22 (zuletzt bearbeitet: 20.01.2020 11:22)
avatar  Ingmar
#2 RE: Navigation Gaja: Mousover-Hintergrundfarbe stimmt nicht mit Verlinkung überein!
avatar
Technik

Danke für den Hinweis. Ich würde das per CSS lösen...

1
2
3
4
5
 
.nav_n ul li{padding: 0px;}
.nav_n a{
padding: 4px 14px;
display: inline-block;
}
 



Ist dann ~intern behoben~
Änderungen werden immer erst mit dem nächsten Update übernommen. Der Zeitpunkt und Umfang des Updates werden unter Aktuelle News bekanntgegeben

Viele Grüße,
Ingmar


 Technik · Homepagemodules.de · Miranus GmbH

 Antworten

 Beitrag melden
20.01.2020 20:40 (zuletzt bearbeitet: 20.01.2020 20:58)
#3 RE: Navigation Gaja: Mousover-Hintergrundfarbe stimmt nicht mit Verlinkung überein!
avatar
Mitglied

Wow, super Lösung!
Habe schon etwas mit "onclick" hinbekommen, aber da hätte das Template verändert werden müssen!
Bei mir funktioniert der CSS-Eintrag im Gaja nur mit !important (Zeile 2).
Es fehlen allerdings die Untermenüs!
Mit "padding" währe das nicht so elegant, weil die Untermenüs sich der Breite des ausgewählten Kategorien anpassen!
Die Auslösebreite würde von der Wortlänge und dem padding-Eintrag abhängig sein (50px)!
Aber immer noch besser als ohne Eintrag!
Würde so aussehen (Zeile 7-9):

1
2
3
4
5
6
7
8
9
 
.nav_n ul li, .nav_n ul li ul li {
padding: 0px !important;}
.nav_n a {
padding: 4px 14px;
display: inline-block;}
 
.nav_n ul li ul li a {
padding: 4px 50px 4px 14px;
}
 



PS:
Empfehlenswert währe es, den pointer-Eintrag unter ".nav_n ul li ul li:hover" herauszunehmen.
Dann wird die Maus auch nur zur Hand, wenn der Mausklick zur Webseite führt!

Gruß
Wolfgang

21.01.2020 15:30 (zuletzt bearbeitet: 21.01.2020 15:37)
#4 RE: Navigation Gaja: Mousover-Hintergrundfarbe stimmt nicht mit Verlinkung überein!
avatar
Mitglied

Hallo Ingmar,
muss mich nochmal melden...
Habe eine gute Lösung aus CSS-Eintrag und Template-Änderung gefunden!

Lösung:
Für die Navi-Leiste ist der CSS-Trag perfekt!
Für das Untermenü, währe hier der "Onclick-Befehl", wie er auch im "User-Menü" verwendet wird, Top!
Es darf dann allerdings nicht der Hover-Eintrag entfernt werden (wie oben unter "PS" vorgeschlagen)!

CSS-Eintrag mit "!important":

1
2
3
4
5
6
7
 
.nav_n ul li {
padding: 0px !important;
}
.nav_n a {
padding: 4px 14px;
display: inline-block;
}
 



"Onclick-Eintrag" im Gaja "Obere Leiste" (nur für die Untermenüs in der Navi-Leiste):

1
2
 
. . .  {{firstsubmenu==false.end}}
<li onclick="window.location='{{menulist:ziel}}'; return false;"><a href="{{menulist:ziel}}" . . . . .
 




Bis dann
Gruß
Wolfgang

21.01.2020 15:57
avatar  Ingmar
#5 RE: Navigation Gaja: Mousover-Hintergrundfarbe stimmt nicht mit Verlinkung überein!
avatar
Technik

oder du machst das eben auch mit dem padding-css (so hab ich das jetzt intern gelöst):

.nav_n ul li ul li {padding: none;}
.nav_n ul li ul li a {padding: 10px 14px;}

ggf mit !important

Viele Grüße,
Ingmar


 Technik · Homepagemodules.de · Miranus GmbH

 Antworten

 Beitrag melden
21.01.2020 17:12 (zuletzt bearbeitet: 21.01.2020 17:17)
#6 RE: Navigation Gaja: Mousover-Hintergrundfarbe stimmt nicht mit Verlinkung überein!
avatar
Mitglied

Hallo Ingmar,
danke für die schnelle Antwort!
Eine ähnliche Lösung hatte ich in Beitrag #3 vorgeschlagen!

Nachteil:
Wenn die Wörter oder Begriffe im Untermenü recht kurz sind, führt ein Mausklick nicht auf ganzer Länge, nicht im ganzen Feld, zur Webseite!
Nur 14px rechts vom Wort, obwohl der Mauszeiger zur Hand wird (hover-Eintrag)!
Deswegen der "Onklick-Vorschlag" in Beitrag #4 ....

Oder?


Wolfgang

21.01.2020 17:37
avatar  Ingmar
#7 RE: Navigation Gaja: Mousover-Hintergrundfarbe stimmt nicht mit Verlinkung überein!
avatar
Technik

Zitat von Wolfgang im Beitrag #6
Wenn die Wörter oder Begriffe im Untermenü recht kurz sind, führt ein Mausklick nicht auf ganzer Länge, nicht im ganzen Feld, zur Webseite!


Da hast du mal wieder besser getestet als ich

Da ich das aber trotzdem lieber per CSS mache würde ich dann folgendes anbieten:

.nav_n ul li ul li {padding: none; overflow: hidden;}
.nav_n ul li ul li a {padding: 10px 14px; width: 100%;}

Jetzt kommst du

Viele Grüße,
Ingmar


 Technik · Homepagemodules.de · Miranus GmbH

 Antworten

 Beitrag melden
21.01.2020 19:35 (zuletzt bearbeitet: 21.01.2020 19:41)
#8 RE: Navigation Gaja: Mousover-Hintergrundfarbe stimmt nicht mit Verlinkung überein!
avatar
Mitglied

Wow,
hätte nicht gedacht, dass es nur mit CSS geht! Super!

Sorry, muss nochmal nachfragen:
Warum "10px"?
Der Wert war doch vorher "4px" (siehe Beitrag #2). Sieht jetzt siemlich wuchtig aus...
Absicht?

.nav_n ul li ul li a {padding: 10px 14px; width: 100%;}



Besten Dank
Wolfgang

Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!