Hovern von Extramenüs

Hey mal wieder
ich hab mir mal Gedanken über das Hovern gemacht. Mit dem normalen Menü ist das ja einfach. Es wurde ja gesagt, dass es mit den selbst eingefügten Menüs nicht funktioniert. Aber ich dachte mir, wieso eigentlich nicht?
Die selbst angelegten Menüs haben doch auch ihren Platz im script, oder? Dann müsste man doch einen code entwerfen können, mit dem man auch die anderen Menüs hovern kann, nicht?

Vielen Dank

Hallo,

das hat man dir wohl gesagt, weil die CSS-Zuweisung etwas kniffliger ist, da es für eigene Navigationslinks natürlich keine spezielle Class/ID gibt.
Aber mit einem Attributselektor kann man stattdessen bestens arbeiten.

Ich habe das schonmal einem User erklärt, finde aber gerade den Thread nicht mehr. Deshalb hier nochmals in Kurzform.
Grundsätzlich folgst du diesem Thread:
[CSS] Navibar jeden button einzeln hovern.

Statt z.B. #i_icon_mini_gallery erfolgen die Zuweisungen aber nach folgendem Schema:

Code:

.mainmenu[href="VERWEISZIEL"] img

Bei "Verweisziel" setzt du ein, wohin der Navigationslink verweist - z.B. für eine HTML-Seite deines Forums:

Code:

.mainmenu[href="/h1-test"] img

Liebe Grüße
Günther

Ja genau sowas meinte ich hab das schonmal bei Firebug gesehen. Vielen Dank Ich probiers gleich aus ^^
Und dann einfach das aus dem anderen thread einfügen, was?

Bin wieder da.

Wie du siehst, hat Frank dein Beispiel entfernt, da es zum Einen fehlerhaft ist und zum anderen Daten enthält (deine tid-Sitzungsnummer), die ein Sicherheitsrisiko darstellen können und nie veröffentlicht werden dürfen.

Du hast beim Verweisziel grundsätzlich einen kleinen Denkfehler. Lies dir das nochmal genau durch:

Günther schrieb:Bei "Verweisziel" setzt du ein, wohin der Navigationslink verweist - z.B. für eine HTML-Seite deines Forums:

Code:

.mainmenu[href="/h1-test"] img

Ich denke kaum, dass der Navilink in deinen Adminbereich verweisen soll?

Fällt dir diese Überlegung nicht so leicht, dann denke in dieser Art: "Wenn man auf diesen Navibutton klickt, wohin gelangt man dann?" Diese Ziel-URL siehst du dir an und setzt sie dort ein.
Gelangt man nach einem Klick auf den Navibutton z.B. zu http://codelabs.usersboard.com/h1-htmlseite dann müsste die Zuweisung so aussehen:

Code:

.mainmenu[href="/h1-htmlseite"] img {
  ...
}
.mainmenu[href="/h1-htmlseite"]:hover img {
  ...
}

Trägt das zum besseren Verständnis bei?

Edit:
Endlich habe ich auch den Thread wieder gefunden, in dem ich dieselbe Frage schon mal genauer beantwortet hatte. Das kannst du dir ergänzend noch durchlesen: https://hilfe.forumieren.com/t33710-phpbb2-css-menu#220058

Thread wieder geöffnet auf Wunsch von Blade@CodeLabs

Ja, super vielen Dank für die schnelle Entsperrung. Also wenn man sich im Forum das mal ansieht, kann man erkennen, das die Buttons immer erst "verschwinden" bevor dann das hover image erscheint. Langsam wird das etwas nervig, und ich wollte fragen obs da ne Möglichkeit gibt, oder ob ich lieber wieder die normalen images nehmen soll...
Danke...

Edit:

Es gibt da zwei Möglichkeiten.
Du kannst dir diese mal im Netz suchen.
Zum einen gibt es eine Möglichkeit, die Grafiken schon in den Crache vorzuladen, damit sie schon im Speicher sind und nicht erst beim Hovern geladen werden müssen, was diesen Effekt hervorruft.
Und dann gibt es noch diese Möglichkeit:
http://www.ohne-css.gehts-gar.net/0026.php

Edit: das "Vorladen" der grafiken wird hier erklärt:
http://www.web-toolbox.net/webtoolbox/bilder/images-vorladen.htm

Bitte.

Das kommt daher, dass die Hovergrafiken beim Hovern erst geladen werden müssen, bis sie angezeigt werden. Diesen kleinen Moment lang wird deshalb keine Grafik angezeigt, da dein Browser sie noch nicht erhalten hat. Sobald sie einmal geladen wurde, befindet sie sich im Browsercache und wird beim Hovern nahtlos angezeigt.

Aus diesem Grund ist eine gängige Vorgehensweise, Hovergrafiken beim Seitenaufbau vorzuladen - bevor sie dann tatsächlich zum Einsatz kommen. Das führt dazu, dass sie sich bereits beim Laden der Seite im Cache befinden und daraus sofort aufgerufen werden können, sobald sie als Hobergrafik angezeigt werden sollen.
Hierzu gibt es zwei Möglichkeiten:
1) vorladen mit HTML-/CSS-"Tricks"
2) vorladen mit Javascript
Klassisch ist die Scriptumsetzung, aber aus Gründen der generellen Ladezeit und lokalen Performance sollte auf Scripte weitgehend verzichtet werden, falls diese nicht unbedingt nötig sind. Deshalb ist die Vorgehensweise mit HTML/CSS vorzuziehen. Dabei setzt man die Grafiken so in den Quellcode ein, dass sie im Anfangszeitraum des Seitenaufbaus geladen, aber dort nicht angezeigt werden. Dazu könntest du die Grafiken z.B. in ein persönliches Indexmodul einsetzen:

Code:

<img src="BILDURL" style="display: none;" />
...

Dieses erstellst du mit der Option
Die Standardaufstellung nutzen: Nein
und setzt es dann ganz oben in die linke Modulspalte ein.

Als weitere Möglichkeit bieten sich auch noch sogenannte CSS-Sprites an. Dabei handelt es sich um eine moderne Umsetzung, bei der beide Grafiken (Normal- und Hoverzustand) in eine einzelne Grafik eingesetzt werden. Mittels CSS wird diese Hintergrundgrafik dann mit Negativwerten so positioniert, dass jeweils der nicht benötigte Grafikbereich nicht sichtbar ist. Beim Hovern werden diese Werte entsprechend verändert, sodass nun die andere Hälfte der Grafik angezeigt wird. Das wird übrigens bei den Forumieren-Standardbuttons an mehreren Stellen des Forums automatisch so gehandhabt.
Falls dich das interessiert und du dir entsprechende Kenntnisse aneignen willst, kannst du dazu ja auch mal recherchieren.

Edit: Ich habe jetzt auch noch angesendet, weil ich das alles schon geschrieben hatte.

Auf jeden Fall, ich seh mir das mal an Vielen Dank mal wieder!

Dann schließe ich hier wieder.
-closed-