Lexi Help
Partner
www.forumieren.com

[phpBB2] Menüleiste einzeln abdunkeln bei Berührung?

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt [phpBB2] Menüleiste einzeln abdunkeln bei Berührung?

Beitrag von silberling am Mi 29 Mai 2013 - 19:41

Derzeit habe ich diesen Code von unten eingefügt, damit die einzelnen Menüpunkte bei Berührung durchsichtig werden. Kann man den Code auch abändern, damit die Menüpunkte nicht durchsichtig werden sondern bei Berührung sich einzeln abdunkeln (Forum 1)? Es sollte so werden wie die einzelnen Bilder auf der Portalseite ganz unten die bei Berührung automatisch abdunkeln.

Spoiler:
/* Buttons der Menüleiste Hovern */
a.mainmenu:hover{
text-decoration: underline;
position: relative; top: -0.0px; left: -0.0px;
opacity: 0.6;
}
/*----- ENDE ---*/

silberling
Stammgast
Stammgast

Männlich Beiträge : 262
Anmeldedatum : 02.02.13

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Menüleiste einzeln abdunkeln bei Berührung?

Beitrag von Günther am Mi 29 Mai 2013 - 20:52

Hallo,
@silberling schrieb:Es sollte so werden wie die einzelnen Bilder auf der Portalseite ganz unten die bei Berührung automatisch abdunkeln.
Wo liegt dann die Schwierigkeit, den Effekt von deinen Portalbildern auf die Navibuttons zu übertragen?

Du selbst hast für den Effekt der Portalbilder den folgenden Code in dein Stylesheet eingesetzt:
Code:
.fotoBox img {
    transition: opacity 0.3s linear 0s;
}
.fotoBox img:hover {
    opacity: 0.3;
}
Du kennst auch die Klassen der Navibuttons - dann sollte es für dich doch ein Leichtes sein, denselben CSS-Code auch auf die Navibuttons zu beziehen, oder nicht? Smile

Liebe Grüße
Günther

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Menüleiste einzeln abdunkeln bei Berührung?

Beitrag von silberling am Mi 29 Mai 2013 - 22:16

Ich habe es auch schon versucht, nur wenn ich den Code einfüge werden die Menüpunkte durchsichtig was ich jedoch nicht haben möchte?

Spoiler:
.mainmenu img {
transition: opacity 0.3s linear 0s;
}

.mainmenu img:hover {
opacity: 0.3;
}

silberling
Stammgast
Stammgast

Männlich Beiträge : 262
Anmeldedatum : 02.02.13

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Menüleiste einzeln abdunkeln bei Berührung?

Beitrag von Günther am Do 30 Mai 2013 - 4:37

Dann muss ich dir das nochmal erklären. In beiden Fällen handelt es sich genau um denselben Effekt. Wink
"Opacity" gibt den Grad der Transparenz an. Die Bilder am Portalseitenende befinden sich auf einem schwarzen Hintergrund. Werden sie teiltransparent, scheint der schwarze Hintergrund zum Teil durch - und du nimmst sie als dunkler wahr.
Befinden sich die Navibuttons hingegen auf einem helleren Hintergrund (Banner), dann führt derselbe opacity-Effekt zum genauen Gegenteil: Die helleren Bereiche scheinen zum Teil durch - und du nimmst die Buttons dadurch als durchsichtig wahr.

Fazit: Opacity erfüllt in beiden Fällen genau dieselbe Wirkung, aber wegen der unterschiedlichen Hintergründe nimmst du diese einmal als "Verdunklung" und einmal als "Durchsichtigkeit" wahr.

Weitere CSS-Möglichkeiten, um die Helligkeit zu verändern, gibt es momentan noch nicht. CSS-Filter werden u.a. diese Möglichkeit in Zukunft hoffentlich bieten, derzeit werden sie aber noch nicht von allen gängigen Browsern unterstützt, auch von Firefox nicht.
Also bleibt dir nur die Möglichkeit mit opacity und einem dunkleren Hintergrund auch für die Navibuttons übrig, wenn ihre Helligkeit beim Hovern abnehmen soll. Dazu stehen dir zwei Wege offen:

  1. Du sorgst auch bei den Navibuttons für einen schwarzen Hintergrund, indem du den Bereich des Banners, auf dem sich die Navibuttons befinden, entsprechend umgestaltest bzw. die Navibuttons auf einen schwarzen Hintergrund umpositionierst.

  2. Du lässt einen schwarzen Hintergrund über CSS anzeigen, sodass dieser beim Hovern durch die opacity der Buttons seine Wirkung erfüllt.
    Dazu ist also Voraussetzung nötig, dass du diese Eigenschaft wieder entfernst:
    Code:
    a.mainmenu:hover {
      opacity: 0.6;
    }
    Außerdem dürfen die Navibuttons keinen transparenten Rand mehr besitzen, wie das derzeit der Fall ist. Du müsstest die Grafiken also entsprechend bearbeiten.
    Anschließend kannst du folgende CSS-Codes einsetzen:
    Code:
    .mainmenu {
      background-color: #000000;
      display: inline-block;
      height: HÖHE DER NAVIBUTTONS IN PX;
    }
    .mainmenu:hover img {
      opacity: 0.5;
    }
    Dadurch wird hinter den Buttons der nötige schwarze Hintergrund angezeigt, der im Normalzustand nicht sichtbar ist. Hovert man aber einen Navibutton, wird dieser teiltransparent (opacity-Wert ggf. anpassen) und "verdunkelt" sich, weil der Hintergrund durchscheint.

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Menüleiste einzeln abdunkeln bei Berührung?

Beitrag von silberling am Do 30 Mai 2013 - 9:28

danke

silberling
Stammgast
Stammgast

Männlich Beiträge : 262
Anmeldedatum : 02.02.13

Benutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2] Menüleiste einzeln abdunkeln bei Berührung?

Beitrag von Günther am Do 30 Mai 2013 - 13:08

Bitte. Smile
-closed-

Günther
Admin a.D.
Admin a.D.

Männlich Beiträge : 15349
Anmeldedatum : 16.07.08
Firefox

Benutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten