Doppeltes Dropdownmenu
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anregung
aussehen
benutzen
beschreibung
code
curry
definieren
display
grund
idee
ingwer
kokosmilch
kunde
list
maus
nudel
position
problem
tag
vollbild
-
Hallo,
ich arbeite gerade wieder an einer Seite für einen tag/kunde">Kunden. Leider bin ich gerade richtig verzweifelt. Möchte aber es endlich fertig bekommen...
http://raubritta.lima-city.de/Thai-Kochstudio/speisekarte.php
Wenn ich bei dieser Seite zuerst Das Hauptmenu runterklappen lasse und dann auf Nudeln gehen will schaffe ich es nicht, weil sich das Menu immer wieder aufrollt... (auch die Pfeiltasten machen es nicht...)
Hat jemand eine Idee, wie ich das Lösen kann?
Also möglichkeiten wären es ans seitenende zu gehen und von dort aus automatisch mitzuscrollen. Aber wie?
Mein Code:
für speisekarte.php
<a href="#" class="menulink"><img src="bilder/hauptspeisen.jpg" /></a> <ul> <li><a href="#" class="sub"><img src="bilder/speisekarte/h1.jpg" /></a> <ul> <li><?php echo"<a href='speisekarte.php?v=$v&e=$e&h=1&u=1&d=$d'>"; ?> <img src="bilder/speisekarte/uh1.jpg" /></li> <li><?php echo"<a href='speisekarte.php?v=$v&e=$e&h=1&u=2&d=$d'>"; ?> <img src="bilder/speisekarte/uh2.jpg" /></li> <li><?php echo"<a href='speisekarte.php?v=$v&e=$e&h=1&u=3&d=$d'>"; ?> <img src="bilder/speisekarte/uh3.jpg" /></li> <li><?php echo"<a href='speisekarte.php?v=$v&e=$e&h=1&u=4&d=$d'>"; ?> <img src="bilder/speisekarte/uh4.jpg" /></li> <li><?php echo"<a href='speisekarte.php?v=$v&e=$e&h=1&u=5&d=$d'>"; ?> <img src="bilder/speisekarte/uh5.jpg" /></li> <li><?php echo"<a href='speisekarte.php?v=$v&e=$e&h=1&u=6&d=$d'>"; ?> <img src="bilder/speisekarte/uh6.jpg" /></li> </ul> </li>
index.css
ul.menu {list-style:none; margin:0; padding:0} ul.menu * {margin:0; padding:0} ul.menu a {display:block; text-decoration:none} ul.menu li {position:relative; float:left;} ul.menu ul {position:absolute; top:80px; left:0; display:none; opacity:0; list-style:none} ul.menu ul li {position:relative; width:200px; margin:0} ul.menu ul li a {display:block; } ul.menu ul ul {left:200px; top:-1px} ul.menu .menulink { font-weight:bold; width:200px}
wäre echt über anregungen und Hilfen erfreut. Ist immer schlimm einem Kunden sagen zu müssen, dass man es nicht hinbekommt...
ich könnte vielleicht jedes Menu einzeln nach oben verschieben?! hab es aber echt noch nicht hinbekommen.. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Mit Firefox bekommt man auch Nudeln!
Sogar im Internet Explorer funktioniert das ganze ohne weitere Probleme, welchen Browser benutzt du denn zum Testen?
Beitrag zuletzt geändert: 31.3.2009 22:23:22 von thedarkside -
Das man zu Nudeln kommt ist kein Problem. Nur halt auf Brandnudeln mit Garnelen ist extrem schwierig... Das ist ne wirkliche Fingerspitzenarbeit...
also ich arbeite mit dem FF3. Habs gerade mit dem IE6 versucht (der macht mir da ja noch Feeehler rein
;und ich dachte, ich hätte alle Browserspezifischen sachen bereinigt...)
wie genau scrollst du denn nach unten? Bei mir liegt es vielleicht an der Maus. Aber wenn ich runter scrolle macht er immer so kleine abstände, die er nach unten scrollt und keine flüssige Bewegung. Aus dem Grund rollt sich das Menu immer wieder hoch.... -
hallo!
zur info - ich hab safari 3, da geht das --- im vollbild
wenn ich das fenster kleiner mache und scrollen will, geht's auch nicht. naja, anregungen hab ich nicht, aber es liegt nicht an deiner maus - irgendwas drückt das fenster immer wieder hoch. -
Normalerweise muss ich überhaupt nicht scrollen, bei einer Bildschirmauflösung von 1280x1024 wird das ausgeklappte Menü noch bequem ohne Scrollbalken dargestellt. Sofern man das Browserfenster verkleinert, ist das Scrollen bei mir auch kein Problem, ich komme bequem zum letzten Menüpunkt (habe aber auch eine recht "feinfühlige" Maus).
Vielleicht solltest du als Möglichkeit in Betracht ziehen, das Menü so lange ausgeklappt zu lassen, bis die Maus auf ein anderes Menü gleitet und das alte dann mit dem Öffnen des Neuen geschlossen wird.
Maus gleitet über "Hauptmenü" -> Menü öffnet sich.
Maus verlässt das Menü auf den Seitenhintergrund -> Menü bleibt geöffnet.
Maus gleitet über Vorsuppe/etc. -> "Hauptmenü" wird geschlossen, Menü "Vorsuppe" öffnet sich.
Beitrag zuletzt geändert: 31.3.2009 22:46:50 von thedarkside -
mhm, das wäre natürlich eine Möglichkeit. Sieht zwar nicht so gut aus würde aber mein Problem beheben
hat jemand noch andere "gute" Ideen?
@sonok: ich weiß: fast alle Programmierer haben extrem große Auflösungen. Nur ich muss auch an die Leute mit 800 x 600 und 1024 x 768 denken. 2eres benutzen immerhin die meisten der Betrachter. Im Nicht-Vollbild-Modus kommt man da bei 1024 x 768 schon an Probleme. Ich selbst benutze am häufigsten 1024 x 768 und Surfe nicht im Vollbild Modus. Extra auf Vollbildmodus umzuschalten wäre mir bei so einer Seite schon fast zu doof. -
1. Ansatz: Sauberes HTML schreiben. Tidy meldet 407 (!) Warnungen auf der Seite.
Die Verschachtelung deiner Tags stimmt nicht.
<li><a href='speisekarte.php?v=&e=6&h=&u=&d='> <img src="bilder/speisekarte/e6.jpg" /></li></a>
sollte so aussehen:
<li><a href='speisekarte.php?v=&e=6&h=&u=&d='> <img src="bilder/speisekarte/e6.jpg" /></a></li>
hier ist es noch schlimmer:
<li><a href='speisekarte.php?v=1&e=&h=&u=&d='> <a onmouseover="return overlib('<strong>Eine Cremesuppe aus frischen Möhren mit Kokosmilch, Curry und Ingwer verfeinert</strong>', CAPTION, 'Beschreibung', FGCOLOR, '#c68561', BGCOLOR, '#9e561c', BORDER, 4, CAPTIONFONT, 'Garamond', TEXTFONT, 'Courier', TEXTSIZE, 3);" onmouseout="nd();"> <img src="bilder/speisekarte/v1.jpg" /></li></a></a>
richtig wäre:
<li><a href='speisekarte.php?v=1&e=&h=&u=&d=' onmouseover="return overlib('<strong>Eine Cremesuppe aus frischen Möhren mit Kokosmilch, Curry und Ingwer verfeinert</strong>', CAPTION, 'Beschreibung', FGCOLOR, '#c68561', BGCOLOR, '#9e561c', BORDER, 4, CAPTIONFONT, 'Garamond', TEXTFONT, 'Courier', TEXTSIZE, 3);" onmouseout="nd();"> <img src="bilder/speisekarte/v1.jpg" /></a></li>
Das waren jetzt nur 2 Beispiele, den Fehler hast Du in allen Listenelementen.
Noch etwas:
Den onmaouseover mußt Du nicht in ein separates a-Tag packen.
Wenn Du schon dabei bist, könntest Du die Schriftart der Tooltips an den Rest der Page anpassen. Wenn Du dann noch die Standardparameter für Overlib global festlegst, wird der Code gleich ein Stück übersichtlicher.
Beitrag zuletzt geändert: 1.4.2009 15:17:11 von subdomain -
zur 1:
mhm, eigentlich dürfte das nie zu schwerwiegenden Fehlern kommen oder?
Obwohl du natürlich recht hast. Ich verbessere das gleich mal.
zur 2:
Es hat einen Grund, den du nicht kennst: PHP...
eigentlich heißt es also:
<li><?php echo"<a href='speisekarte.php?v=1&e=$e&h=$h&u=$u&d=$d'>"; ?> <a onmouseover="return overlib('<strong>Eine Cremesuppe aus frischen Möhren mit Kokosmilch, Curry und Ingwer verfeinert</strong>', CAPTION, 'Beschreibung', FGCOLOR, '#c68561', BGCOLOR, '#9e561c', BORDER, 4, CAPTIONFONT, 'Garamond', TEXTFONT, 'Courier', TEXTSIZE, 3);" onmouseout="nd();"> <img src="bilder/speisekarte/v1.jpg" /></li></a></a>
Das Design der Boxen gefällt meinem Kunden zwar so schon. Aber ich bin gerade genau daran dieses Design zu machen. Also es wird bald bei dem Font besser aussehen...
Wenn Du dann noch die Standardparameter für Overlib global festlegst, wird der Code gleich ein Stück übersichtlicher.
Meinst du Global mit: im overlib.js definieren
oder meinst du:
define("CONSTANT", "Hello world.");
oder eine eigene Overlib funktion? (arbeite erst seit diesem Projekt mit Overlib.) -
raubritta schrieb:
zur 1:
mhm, eigentlich dürfte das nie zu schwerwiegenden Fehlern kommen oder?
Obwohl du natürlich recht hast. Ich verbessere das gleich mal.
Unerwartete Seiteneffekte sind bei Codefehlern immer möglich. Ob diese Fehler jetzt Ursache sind, kann ich dir auch nicht sagen. Ein sauberer Coder erleichtert aber allemal die Fehlersuche.
raubritta schrieb:
zur 2:
Es hat einen Grund, den du nicht kennst: PHP...
eigentlich heißt es also:
<li><?php echo"<a href='speisekarte.php?v=1&e=$e&h=$h&u=$u&d=$d'>"; ?> <a onmouseover="return overlib('<strong>Eine Cremesuppe aus frischen Möhren mit Kokosmilch, Curry und Ingwer verfeinert</strong>', CAPTION, 'Beschreibung', FGCOLOR, '#c68561', BGCOLOR, '#9e561c', BORDER, 4, CAPTIONFONT, 'Garamond', TEXTFONT, 'Courier', TEXTSIZE, 3);" onmouseout="nd();"> <img src="bilder/speisekarte/v1.jpg" /></li></a></a>
PHP ist kein Grund.
Setz das onmouseover einfach mit in das PHP-generierte a-Tag.
EDIT: Könnte dann so aussehen:
<li><a href="<?php echo "speisekarte.php?v=1&e=$e&h=$h&u=$u&d=$d"; ?>" onmouseover="return overlib('<strong>Eine Cremesuppe aus frischen Möhren mit Kokosmilch, Curry und Ingwer verfeinert</strong>', CAPTION, 'Beschreibung', FGCOLOR, '#c68561', BGCOLOR, '#9e561c', BORDER, 4, CAPTIONFONT, 'Garamond', TEXTFONT, 'Courier', TEXTSIZE, 3);" onmouseout="nd();"> <img src="bilder/speisekarte/v1.jpg" /></a></li>
raubritta schrieb:
Meinst du Global mit: im overlib.js definieren
oder meinst du:
define("CONSTANT", "Hello world.");
oder eine eigene Overlib funktion? (arbeite erst seit diesem Projekt mit Overlib.)
Du hast 2 Möglichkeiten.
Entweder die Parameter in overlib.js anpassen. Dann gelten Sie für alle Tooltips.
Oder ein zusätzliches Script-Tag in den Code der Seite einbauen.
<script type="text/javascript"> var ol_textfont = "Courier New, Courier"; var andere_option ="Wert", . . . </script>
Dann gilt die Definition nur für die jeweilige Seite.
siehe Overlib Doku Punkt 7
Wenn Du einzelne Tooltips mit anderen Werten einbinden willst, kannst Du diese immer noch explizit im jeweiligen onmouseover festlegen.
Beitrag zuletzt geändert: 1.4.2009 16:02:57 von subdomain -
zu 1: ich habe es geändert und hochgeladen
zu 2: für mich ist PHP ein Grund, da ich irgendwie ein ' benutzen muss um den Caption auch zu definieren. Bekommst du es irgendwie anders hin? Also ich leider nicht :(
zu 3: geändert und hochgeladen
-
raubritta schrieb:
zu 2: für mich ist PHP ein Grund, da ich irgendwie ein ' benutzen muss um den Caption auch zu definieren. Bekommst du es irgendwie anders hin? Also ich leider nicht :(
Mein Edit der letzten Antwort hast Du gesehen? So sollte es gehen.
So, wie Du es jetzt hast, klappt es gar nicht. Das a-Tag ist leer. Ergo hat der User nix zum clicken. ;)
Wenn das scrollen weiterhin nicht klappt, müßtest Du dir dein Javascript mal genauer ansehen. Eventuell klemmt da noch was. -
nein, dein Edit hatte ich nicht gesehen. Schon schlimm, dass man manchmal bei den kleinen Sachen an seine grenzen stößt^^
danke dafür. Klappt natürlich super :)
mhm, wenn niemand eine Idee hat muss ich wohl thedarksides Lösung nehmen :/
-
Du könntest allenfalls so eine art delay einbauen, d.h. wenn die Maus das Menü verlässt, bleibt es noch 2-3 Sekunden sichtbar, so, dass man eine reale Chance hat, den Mauszeiger nach dem Scrollvorgang wieder auf's Menü zu bekommen.
-
mhm, auch ne Idee. Mein größtes problem ist, dass beim FF es einfach nicht klappt. Egal, ob ich drauf bin oder nicht. Beim Internetexplorer wäre deine Idee wahrscheinlich die Lösung. Aber ich muss es ja auch für FF fertigstellen. Die beste lösung wäre wahrscheinlich eine Skalierung ALLER Bilder, sodass alles raufpasst...
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
