Css flyout menu touchscreen

Computer: Software & Programmierung HTML & CSS
#1

Hallo leute,

hab ein dropdown menü mittels css und hover. leider funzt es auf touchscreens nicht.
suche schon seit einniger zeit nach ein dropdown menü das auch auf touchscreens läuft.
leider ohne erfolg!

habt ihr da ne lösung?

LG Fred

#2

Moin,

habt ihr da ne lösung?

Nicht, ohne angemessene Fehlerbeschreibung.

Ich habe solche Menüs schon auf Handy, iPod und Co laufen sehen, also liegts vermutlich nicht an den Endgeräten.

Liebe Grüße,
-Efchen

#3

Hi,

hab ein dropdown menü mittels css und hover. leider funzt es
auf touchscreens nicht.

logisch, weil hier kein hover erfolgt. Du müsstest also den Oberpunkt klickbar machen, so dass sich die Unterpunkte öffnen. Entweder per Javascript oder mMn besser, indem Du eine Übersichtsseite mit geöffneter Unternavigation verlinkst.

Gruß
Ingo

#4

Hallo,

Das menü soll mir per klick die menü eintrag in ein textera eintragen.
das geschieht so.

if ($iterator->callHasChildren())
{
// Schlüssel ausgeben und ul öffnen
echo „-
[key().“’)">".$iterator->key()."](%255C%2522javascript:textWechsel(%255C’,%2522.%2524iterator-)
„;
}
// Einträge des Array ausgeben
else
{
if ( $iterator->current() == GetLngStr(‚DescFormImageReplacementButton‘)){$Wait = „my_form.reset();“;}
else{$Wait = „textWechsel(’,“.$iterator->current().“’)";}
echo "- „.$iterator->current().“
";
}

Nicht, ohne angemessene Fehlerbeschreibung.

wenn auf ein flyout punkt getipt wird. wird der angetipte flyout text in den textera eingetragen. was aber nicht immer erwünscht ist. sondern es soll einfach in den meisten fällen einfach das menü aufglappen.
das zu um gehen, das der unerwünschte flyout text nicht eingetragen wird in textera. bleibe mann solange auf dem menüpunkt drauf, bis von browser ein kontext menü erscheint.

das war die fehlerbschreibung.

lg fred

#5

Hi,

Du müsstest also den
Oberpunkt klickbar machen, so dass sich die Unterpunkte
öffnen. Entweder per Javascript oder mMn besser, indem Du eine
Übersichtsseite mit geöffneter Unternavigation verlinkst.

wie soll der script aussehen, hab da keinen blassen schimmer!

gruß fred

#6

Moin,

wenn Du ein HTML/CSS-Problem hast, wäre es angebrachter, allen PHP- und JavaScript-Code zu entfernen, dann wird auch das Lesen für Hilfesteller einfacher. Relevant ist für eine HTML/CSS-Frage nur noch das, was beim Browser ankommt, da kann man dann im Zweifelsfalle einfach den Quellcode aus dem Browser posten. PHP- bzw. JavaScript-Probleme besser in den entsprechenden Unterforen posten.

In Deinem verbleibenden HTML/CSS-Code ist nicht drin, was auf „flyout“ hinweist. Mit Touchscreen hat das Problem also vermutlich nichtmal was zu tun, weil das auch auf anderen Endgeräten nicht per HTML/CSS funktioniert.

Liebe Grüße,
-Efchen

#7

In Deinem verbleibenden HTML/CSS-Code ist nicht drin, was auf
„flyout“ hinweist.

echo „-
class=„fly“ >[key().“’](%255C%2522javascript:textWechsel(%255C’,%2522.%2524iterator-)

dazu auschnitt von der css datei!

.nav .fly {margin-top:-10000px;}
.nav .fly a:hover b {background-color:#fff; cursor:stuck_out_tongue:ointer;}

#8

Moin,

merkst Du was? Du erhoffst Dir eine Antwort, lieferst die relevanten Informationen aber nur tröpfchenweise nach und nach.

Ich würde vorschlagen, Du gibst hier einen Link zur Seite, dann kann man sich das Problem direkt und live ansehen und hat allen wichtigen Code selbst zur Ansicht.
Das ist immer die beste Vorgehensweise.

Liebe Grüße,
-Efchen

#9

Moin,

hab ein dropdown menü mittels css und hover. leider funzt es
auf touchscreens nicht.

logisch, weil hier kein hover erfolgt.

Das liest sich wie „Touchscreen-Endgeräte können kein :hover“. Das habe ich erst kürzlich an einem iPod widerlegt gesehen. Oder meintest Du etwas anderes? Oder gibt es solche Endgeräte, die das wirklich nicht können?

Grüße,
-Efchen

#10

Hi,

Das liest sich wie „Touchscreen-Endgeräte können kein :hover“.
Das habe ich erst kürzlich an einem iPod widerlegt gesehen.

mich würde interessieren, wie Apple dies realisieren könnte. Ich habe bei meinem TabletPC mit Android-System keinen Mauszeiger, der über einen Link fahren könnte, ohne diesen zu aktivieren. Wenn ich einen Link antippe, dann bekommt dieser den Fokus und wird aktiviert.

Bei Opera wird dann, wenn über den Link tatsächlich eine andere Seite aufgerufen wird, für die (kurze) Zeit bis zum Seitenwechsel :hover gesetzt. Ein dann ausfahrendes Untermenü kann jedoch nicht genutzt werden, da der Ladevorgang Priorität hat.
Beim Aufruf derselben Seite über einen Ankerlink wirkt sich :hover und :active überhaupt nicht aus, da kein Ladevorgang erfolgt und diese Zustände unmittelbar beendet werden; lediglich :focus wird - dauerhaft - gesetzt.

Mag sein, dass die von Dir angesprochene Seite einen Ankerlink setzt und :focus nutzt.

Gruß
Ingo

#11

mich würde interessieren, wie Apple dies realisieren könnte.
Ich habe bei meinem TabletPC mit Android-System keinen
Mauszeiger

Vermutlich mit eben diesem Mauszeiger, so wie das eben auch an Laptops mit Touchpad funktioniert.

#12

http://posting.ath.cx/search/description.php

#13

Hi,

eine nette Fehlermeldung „Es ist ein Fehler aufgetreten! Das macht aber nichts…“ für nicht IE-User. :wink:

Dieses Menü ist allerdings selbst am PC nur schlecht nutzbar.

Gruß
Ingo

#14

http://posting.ath.cx/search/description.php

Ach Du Scheiße!
Huiuiuiuiui…

Wo fängt man da an?
Größere Menge JS lagert man zwecks Wiederverwendbarkeit besser aus. Das führt bei ernautem Aufrauf auch zu schnellerem Seitenaufbau, da das JS im Cache vorliegt und somit nicht erneut geladen werden muss.

Du hast den Inhalt im JS, da gehört er nicht hin.
Für Dropdowns bzw Flyouts verwendet man gewöhnlich Container deren Visibility man mittels JS an- und ausschaltet.

Um das Rad nicht neu zu erfinden, kann man auf jQuery zurückgreifen.
http://jquery.com/
http://de.wikipedia.org/wiki/JQuery

Beispiele gibt es zuhauf.
http://www.google.de/#hl=de&gs_nf=1&cp=20&gs_id=8&xh…

Noch was zur Usability:
Dropdown-Menüs sind, besonders wenn sie viele EBenen enthalten, nicht besonders nutzerfreundlich. Wer im 5ten Untermenü ein Pixel vom rechten Weg abweicht, darf gleich wieder ganz von vorne anfangen. Einen „mouseOut“ erst nach einigen Millisekunden umzusetzen mag da etwas Abhilfe schaffen, machts aber auch nicht wirklich besser …

Gruß

osmodius

#15

Noch was zur Usability:
Dropdown-Menüs sind, besonders wenn sie viele EBenen
enthalten, nicht besonders nutzerfreundlich. Wer im 5ten
Untermenü ein Pixel vom rechten Weg abweicht, darf gleich
wieder ganz von vorne anfangen. Einen „mouseOut“ erst nach
einigen Millisekunden umzusetzen mag da etwas Abhilfe
schaffen, machts aber auch nicht wirklich besser …

Sieht vieleicht nicht so aus, aber hab mir dabei was gedacht!
Danke für den hinweis!

Um das Rad nicht neu zu erfinden, kann man auf jQuery
zurückgreifen.
http://jquery.com/
http://de.wikipedia.org/wiki/JQuery

Hab ich mir vorher schon angesehen,
hab es einen einfachen grund abgelent. deshalb meine version gewält.

Fehler
Der Wert der Eigenschaft „$“ ist null …

Was macht es für ein unterschied ob es Java das menü aufbaut oder ein anderer script. da meiner meinung nach sowieso das menü nach neuladen der seite das menü neu aufgebaut wird.
nicht nach jeden weiter vortasten im menü!

oder bin ich da falscher meinung?

Gruß Fred

#16

eine nette Fehlermeldung „Es ist ein Fehler aufgetreten! Das
macht aber nichts…“ für nicht IE-User. :wink:

weis nicht wies die fehler meldung zustande gebracht hast habs mit 3 verschiedene browser probiert. nichts!!!

Dieses Menü ist allerdings selbst am PC nur schlecht nutzbar.

ich hab damit keine probleme!
aber jedem dem seinem!

#17

Hi,

eine nette Fehlermeldung „Es ist ein Fehler aufgetreten! Das
macht aber nichts…“ für nicht IE-User. :wink:

weis nicht wies die fehler meldung zustande gebracht hast habs
mit 3 verschiedene browser probiert. nichts!!!

diese Ausgabe steht in Deinem Script selbst:

function stopError(meldung, url, zeile){

alert("Es ist ein Fehler aufgetreten! Das macht aber nichts…\n\nMeldung: " + meldung + "\nURL: " + url + "\nZeile: " + zeile);
return true;
}

und wird in meinem Firefox zweimal angezeigt:

Es ist ein Fehler aufgetreten! Das macht aber nichts...

Meldung: document.all is not a function
URL: http://posting.ath.cx/search/description.php
Zeile: 552

weil dies kein gültiges Javascript sondern IE-spezifisch ist und:

Es ist ein Fehler aufgetreten! Das macht aber nichts...

Meldung: my\_form is not defined
URL: http://posting.ath.cx/search/description.php
Zeile: 572

vermutlich ein Folgefehler.

Dieses Menü ist allerdings selbst am PC nur schlecht nutzbar.

ich hab damit keine probleme!
aber jedem dem seinem!

vor allem einen ausreichend großen Viewport, wie Du ihn wohl hast. Verkleinere Dein Fenster mal auf 1024*768, dann solltest Du die Probleme sehen können.

Gruß
Ingo

#18

Moin,

mich würde interessieren, wie Apple dies realisieren könnte.

Ich habs mal mit einem Nokia-Handy probiert.
Zunächst ist es so wie Du sagst: Kein Mauszeiger, also auch kein :hover. Allerdings habe ich es manchmal hinbekommen (ohne das rekonstruieren zu können), dass mehrere Menüebenen durch :hover aufgeklappt sind und ich einen Punkt aus einer tieferen Menüebene aufrufen konnte. Also geht es irgendwie, ob das ein Bug oder Feature ist, weiß ich aber auch nicht :smile:

Gruß,
-Efchen