Frage von Noahvh, 33

HTML5/CSS3 mobiles Menü verschiebt sich bei dem ausklappen minimal?

Hey, ich habe ein Menü geschrieben wenn ich es jetzt aber auf einem mobilen Device abrufe und ausklappe verschiebt es sich. Das graue Menü verschiebt sich nach unten sodass ein kleiner dünner weißer Streifen zwischen dem Menü und dem

bildet, woran könnte es liegen, danke. LG Noah ->Die Website:

http://nhh.bplaced.net/creatore/creatore.html#menucon
Antwort
von PeterKremsner, 23

Du hast bei marginTop deines ersten Elementes (<li> Tag) im Dropdow einen Wert von größer als 0.

Diesen Wert musst du gezielt für das erste Element im Dropdown auf 0 setzen.

Du solltest auch den Margin Bottom deines letzten Elementes auf 0 setzen, dann hast du keinen Spalt zwischen Menü und Seiteninhalt.

Kommentar von Noahvh ,

Ok, Super! Echt Danke ;-) bin daran fast verzweifelt.

Kommentar von PeterKremsner ,

Damit du solche Fragen selbst schnell beantworten kannst und eine Lösung finden kannst würde ich dir Raten die Entwicklertools von Google Chrome oder Firebug für Firefox zu verwenden.

Da kannst du dir die CSS Eigenschaften jedes einzelnen Elementes anzeigen lassen wenn du mit der Maus drüber fährst und auch Werte im CSS gezielt verändern und direkt im Browser sehen was sich dadurch verändert.

Das ist für solche Probleme extrem hilfreich, weil man die Möglichkeit hat den Fehler immer weiter einzugrenzen.

Mit Google Chrome kannst du dich auch mit dem Chrome auf deinem Handy verbinden und so direkt auf dem Handy und ohne Simulation Javascript und CSS direkt auf dem Handy debuggen und das Ergebnis siehst du am PC.

Kommentar von Noahvh ,

Ok, das werde ich gleich mal ausprobieren, aber ich habe noch eine Frage, wenn ich die Seite auf einem Smartphone öffne funktioniert das Dropdown Menü nicht, wenn ich jedoch auf einem Pc das Smartphone Fenster simuliere funktioniert es, was tun? nhh.bplaced.net (Die große und Farbe werden natürlich noch geändert)

Kommentar von PeterKremsner ,

Könnte ein Problem mit jQuery und dem Touch Event sein.

Das Touch Event löst nämlich je nach Implementierung kein onclick event aus.

Versuche mal jQuery Mobile in die Seite einzubinden.

Mehr dazu hier:

http://www.w3schools.com/jquerymobile/jquerymobile_events_touch.asp

http://stackoverflow.com/questions/11397028/document-click-function-for-touch-de...

http://stackoverflow.com/questions/4755505/how-to-recognize-touch-events-using-j...

Btw wenn du wirklich ein Menü mit allen möglichen Features haben möchtest, versuche Bootstrap.

Das ist ein von Twitter Entwickeltes Framework mit css und Javascript, dass das alles abdeckt was du derzeit  hast, bzw haben möchtest. Hab bisher damit nur gute Erfahrungen gemacht.

Natürlich stellt es ein Overhead an CSS und Javascript dar wenn du es nur für das Menü verwendest, aber meistens findest du später immer wieder Sachen in Bootstrap die du auf deiner Seite haben willst und dann relativiert sich das ganze auch.

Keine passende Antwort gefunden?

Fragen Sie die Community