CSS hover menü mit kniff

diamond_t · 02.10.2008, 16:45

Hi Leute,

ich habe eine Idee, die ich aber bisher nciht realisieren kann.
Mir fehlt die zündende Idee bzw. das wissen, wie ich das im Code umsetzen kann.
Ich würde gern ein Menü machen, das aus einem Thermometer besteht
(als Bsp. siehe Bild: http://www.walthers.de/blogs/media/Thermometer1.jpg )
Dort sollen anstatt der Zahlen die einzelnen Menüpunkte stehen und die Anzeige soll immer von Unten her bis zum Menüpunkt steigen, sobald dieser mit der Maus angefahren wird.

Ich würde dies gern mit einem ganz normalen a:link und a:hover CSS machen.
Doch wie kann ich das so schreiben, dass es mir jeweils die einzelnen bilder der Grad-anzeige austauscht? ist das so möglich wie ich mir das vorstelle?

Ich hoff es ist überhaupt verständlich, was ich meine ^^

JEGO · 02.10.2008, 16:48

Ich vermute mal, dass du javascript dafür brauchen wirst.

nikosch · 02.10.2008, 16:53

Man könnte es sprunghaft allein mit CSS gestalten. Dann wäre das background-image ein leerer Teil des Röhrchens, bei :hover ein gefüllter.

JEGO · 02.10.2008, 16:55

@nikosch dann hüpft aber das Thermometer.

Ich dachte dabei an ansteigend.

nikosch · 02.10.2008, 16:59

Was das Wort "sprunghaft" nun mehr als deutlich ausdrücken sollte.

diamond_t · 02.10.2008, 18:33

mh, aber das termometer sollte nicht nur "ganz heiß" oder "eiskalt" anzeigen.. es sollte vielmehr nur bis zum jeweiligen Menüpunkt gehn.

weiß nicht ob du das mit Sprunghaft meintest.

mh, java is blöd, das hab ich garnich drauf ^^

nikosch · 02.10.2008, 18:37

Javascript.

Ich meine es so: Es würde die einzelnen Menüpunkte direkt anspringen. Nicht langsam steigen, wie es ein echtes Thermometer tut.

diamond_t · 02.10.2008, 18:59

ja das stimmt.
aber da ich kein javascript beherrsche kann ich an diesem Punkt abstriche machen. Dass es nicht langsam steigt macht mir nichts.
Allerdings frage ich mich, wie ich das bewerkstellige mit css.
ich kann ja dem link verschieden BG-img zuweißen. aber geht das auch wenn eine Hover funktion eines links ein bild an einer ganz anderen stelle (in diesem fall links vom link) ändert bzw. ein anders bild läd?

nikosch · 02.10.2008, 19:14

Gar nicht. Du gibst jedem Link (links > rechts) die selbe absolute position (Thermometer Startpunkt). Dann weiter nach rechts einen immer höheren left-padding und schaltest nur das background-bild für diesen Link.

nikosch · 02.10.2008, 19:20

Ach ja, und der z-index ist wichtig. Exemplarisch:

Code:

<style>
ul li {position:absolute; left:100;top:100;}
ul li.p1 {z-index:3;}
ul li.p2 {z-index:2;}
ul li.p3 {z-index:1;}
ul li.p1 a {padding-left:0;}
ul li.p2 a {padding-left:120px;}
ul li.p3 a {padding-left:300px;}
ul li a:hover {background-color:#FF0000;}
</style>

<ul>
<li class="p1"><a href="">Punkt 1</a></li>
<li class="p2"><a href="">Punkt 2</a></li>
<li class="p3"><a href="">Punkt 3</a></li>
</ul>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
horizontales Menü	Fritz73	Scriptbörse	9	26.05.2008 22:26
Menü das mitscrollt	mristau2k5	HTML, Usability und Barrierefreiheit	3	04.06.2006 18:50
Menu navigation	marcels	PHP Tipps 2007	1	16.11.2005 18:47
wie gehts schöner/besser?	AliceD	HTML, Usability und Barrierefreiheit	1	06.09.2005 08:59
Menü Steuerung History !!!		PHP Tipps 2005-2	12	23.08.2005 11:51
Menü aus MySQL Datenbank ausgelesen		PHP Tipps 2005	9	02.06.2005 17:11
PHP Menu mit 2 untermenus		PHP Tipps 2005	3	23.05.2005 00:04
so scrollen das menü usw. dableibt		PHP Tipps 2005	10	21.05.2005 21:15
Menü auf php-Seite		PHP Tipps 2005	20	01.02.2005 20:24
html seite aus menü in php seite einbinden??		PHP Tipps 2004-2	4	21.12.2004 18:00
über ein menü eine datenbankabfrage --> ergebnisse auflis		PHP Tipps 2004-2	1	18.11.2004 17:42
Menü Links tauschen		PHP Tipps 2004	14	03.09.2004 09:17
[Erledigt] drop down menü werte weitergeben		PHP Tipps 2004	3	24.08.2004 15:08
[Erledigt] Wie erstelle ich ein Upload Menü mit mehreren Menüpunkten ?		PHP Tipps 2004	3	22.08.2004 14:19
[Erledigt] PopDown Menü fast fertig!!		HTML, Usability und Barrierefreiheit	3	27.07.2004 00:11

02.10.2008, 16:45
diamond_t Neuer Benutzer Registriert seit: 24.09.2008 Beiträge: 14	CSS hover menü mit kniff Hi Leute, ich habe eine Idee, die ich aber bisher nciht realisieren kann. Mir fehlt die zündende Idee bzw. das wissen, wie ich das im Code umsetzen kann. Ich würde gern ein Menü machen, das aus einem Thermometer besteht (als Bsp. siehe Bild: http://www.walthers.de/blogs/media/Thermometer1.jpg ) Dort sollen anstatt der Zahlen die einzelnen Menüpunkte stehen und die Anzeige soll immer von Unten her bis zum Menüpunkt steigen, sobald dieser mit der Maus angefahren wird. Ich würde dies gern mit einem ganz normalen a:link und a:hover CSS machen. Doch wie kann ich das so schreiben, dass es mir jeweils die einzelnen bilder der Grad-anzeige austauscht? ist das so möglich wie ich mir das vorstelle? Ich hoff es ist überhaupt verständlich, was ich meine ^^


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

02.10.2008, 16:48
JEGO Erfahrener Benutzer Registriert seit: 01.12.2003 Beiträge: 2.555 PHP-Kenntnisse: Anfänger	Ich vermute mal, dass du javascript dafür brauchen wirst. __________________ Gruß JEGO Ein PHP Script tut, was Du schreibst, nicht was Du willst.

02.10.2008, 16:53
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Man könnte es sprunghaft allein mit CSS gestalten. Dann wäre das background-image ein leerer Teil des Röhrchens, bei :hover ein gefüllter. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

02.10.2008, 16:55
JEGO Erfahrener Benutzer Registriert seit: 01.12.2003 Beiträge: 2.555 PHP-Kenntnisse: Anfänger	@nikosch dann hüpft aber das Thermometer. Ich dachte dabei an ansteigend. __________________ Gruß JEGO Ein PHP Script tut, was Du schreibst, nicht was Du willst.

02.10.2008, 16:59
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Was das Wort "sprunghaft" nun mehr als deutlich ausdrücken sollte. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

02.10.2008, 18:33
diamond_t Neuer Benutzer Registriert seit: 24.09.2008 Beiträge: 14	mh, aber das termometer sollte nicht nur "ganz heiß" oder "eiskalt" anzeigen.. es sollte vielmehr nur bis zum jeweiligen Menüpunkt gehn. weiß nicht ob du das mit Sprunghaft meintest. mh, java is blöd, das hab ich garnich drauf ^^

02.10.2008, 18:37
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Javascript. Ich meine es so: Es würde die einzelnen Menüpunkte direkt anspringen. Nicht langsam steigen, wie es ein echtes Thermometer tut. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

02.10.2008, 18:59
diamond_t Neuer Benutzer Registriert seit: 24.09.2008 Beiträge: 14	ja das stimmt. aber da ich kein javascript beherrsche kann ich an diesem Punkt abstriche machen. Dass es nicht langsam steigt macht mir nichts. Allerdings frage ich mich, wie ich das bewerkstellige mit css. ich kann ja dem link verschieden BG-img zuweißen. aber geht das auch wenn eine Hover funktion eines links ein bild an einer ganz anderen stelle (in diesem fall links vom link) ändert bzw. ein anders bild läd?

02.10.2008, 19:14
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Gar nicht. Du gibst jedem Link (links > rechts) die selbe absolute position (Thermometer Startpunkt). Dann weiter nach rechts einen immer höheren left-padding und schaltest nur das background-bild für diesen Link. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --