mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 28.03.2024 22:05 Benutzername: Passwort: Auto-Login

Thema: Interaktive Karte - CSS Menü klappt nicht zu auf iPad vom 31.08.2012


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Interaktive Karte - CSS Menü klappt nicht zu auf iPad
Autor Nachricht
zappan
Threadersteller

Dabei seit: 31.08.2012
Ort: -
Alter: 63
Geschlecht: -
Verfasst Fr 31.08.2012 17:35
Titel

Interaktive Karte - CSS Menü klappt nicht zu auf iPad

Antworten mit Zitat Zum Seitenanfang

Hallo,

habe hier eine interaktive Karte gemacht, wobei es mir eher um die Präsentation von Panoramen geht und ich eher der Fotograf bin. Das Projekt ist schon online bei der Gemeinde als PC-Version.

Die Karte will ich jetzt umstellen, so dass die Karte und die Panoramen auch auf dem iPad / iPhone angeschaut werden können. Dazu wollte ich das Menü oben einbauen. Leider klappt das auf den mobielen Geräten nicht mehr zu.
Ich hab schon gelesen, dass das an dem hover liegen könnte, komme aber hier nicht weiter.

Kann mir jemand helfen, das Ding zum laufen zu bringen??
Wäre ja super.

hier ein Teil des Codes aus der Datei leiste.css

Code:

/*  _______________________________________

   Drop down Menü
    _______________________________________  */



#leiste_menu {
   margin: 0;
   padding: 0;
   width:auto;
      
}


#leiste_menu li {
   list-style: none;
   float: left;
   font-size:14px;
   padding: 10px 10px 10px 10px;
   border-right:1px solid #111111;
   border-left:1px solid #444444;
   background:#3E3E3E;
   
   
   /* CSS3 Stylings - Creates the gradient background */
   background: -moz-linear-gradient(top, #3E3E3E, #313131);
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3E3E3E), to(#313131));
}
#leiste_menu li:hover {
   background:#313131;
   /* CSS3 Stylings - Creates the gradient background */
   background: -moz-linear-gradient(top, #313131, #3E3E3E);
   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#313131), to(#3E3E3E));
}
#leiste_menu li a {
   display: block;
   color: #cccccc;
   text-decoration: none;
}
#leiste_menu li a:hover {
      color:  #5EB0E3;
}
#leiste_menu .home_bottom { /* Homebotton */
    padding:5px 8px 0px 8px;
    border:none;
    background:none;

}
#leiste_menu .home_bottom a { /* Das Bild ersetzen  */
    background:url("img/home.png") top left no-repeat;
    width:36px;
    height:30px;
}
#leiste_menu li.home_bottom:hover {
    background:none;
}
#leiste_menu li.home_bottom a:hover {
    background:url("img/home2.png") top left no-repeat;
}


/* Drop Down */

   
#leiste_menu li ul.dropup {
   display: none;
   width: 10em; /* Width for Opera */
}
#leiste_menu li:hover ul.dropup  {
   display: block;
   position: absolute;
   margin: 0 0 0 -12px;
   top:36px; /* abstand unten von navigation */
   background-color:#222222;
   border: 1px solid #111111;
   border-bottom:none;


}
#leiste_menu li:hover li { /* Liste Style */
   float: none;
   background:none;
   border:none;
   border-bottom:1px solid #CC0000;
   padding:12px 10px 12px 10px;

}
#leiste_menu li:hover a {
   color:rgb(255,255,255);
}
#leiste_menu li:hover a:hover {
   color:  #5EB0E3;
}
#leiste_menu li:hover p {
   margin:6px 0;
}




/*  _______________________________________

   03 Top - spalten CONTENT
    _______________________________________  */



/* Following the principles of the 960 grid, we define here 3 containers
   which can contain from 1 to 3 columns */
   
#leiste .dropdown_1column,
#leiste .dropdown_2columns,
#leiste .dropdown_3columns {
   margin:4px auto;
   position:absolute;
   padding:10px 5px 10px 5px;
   display:none;
   text-align:left;
}

/* Drop Downs Sizes */

#leiste .dropdown_1column {width: 160px;}
#leiste .dropdown_2columns {width: 390px;}
#leiste .dropdown_3columns {width: 390px;}

/* Showing Drop Down on Mouse Hover - Left aligned */

#leiste_menu li:hover .dropdown_1column,
#leiste_menu li:hover .dropdown_2columns,
#leiste_menu li:hover .dropdown_3columns {
   display: block;
   position: absolute;
   margin: 0 0 0 -12px;
   top:36px;
   background-color:#222222;
   border: 1px solid #111111;

   /* CSS3 Stylings - Rounded Corners */
   -moz-border-radius: 0px 0px 7px 7px;
   -webkit-border-radius: 0px 0px 7px 7px;
   border-radius: 0px 0px 7px 7px;
}



/* Columns sizes, they have to be placed within a dropdown_columns DIV */

#leiste .col_1,
#leiste .col_2,
#leiste .col_3 {
   display:inline;
   float: left;
   position: relative;
   margin-left: 5px;
   margin-right: 5px;
}
#leiste .col_1 {width:160px;}
#leiste .col_2 {width:380px;}
#leiste .col_3 {width:380px;}

/* Lists stylings */

#leiste_menu li ul.simple { /* Reset stylings for other lists inside columns */
   margin-left:5px;
}
#leiste_menu li ul.simple li {
   border:none;
   padding:0px;
   width:120px;
   line-height:24px;
   margin-left:5px;
}
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Sa 01.09.2012 01:27
Titel

Antworten mit Zitat Zum Seitenanfang

Erster Schritt: Die ul nicht erst stylen, wenn sie per li:hover ul sichtbar gemacht wird, sondern schon vorher - d.h. per li:hover ul kommt in Deinem Falle ausschließlich display: block;, der ganze Rest wandert in die normale Regel.

iPad und iPhone mögen es nicht, wenn bei Subnavis allzuviel per :hover kommt, daher sollte man hier wirklich nur das hinschreiben, was für's Sichtbarmachen nötig ist.

Ob das in Deinem konkreten Fall hilft, weiß ich nicht, aber ich hatte schon Fälle, in denen Subnavis in iPhone & Co. gesponnen haben, weil sie quasi erst beim Hovern formatiert wurden.

Übrigens sollte man für Screenreader- und im Prinzip auch Tabulatur-Nutzer die Subnavi nicht per display: none; ausblenden, sondern per top & left ins Nirvana schieben. Die Regel li:hover ul enthielte dann ausschließlich diese beiden Eigenschaften (auf auto oder eben einen konkreten Wert gesetzt).
  View user's profile Private Nachricht senden
Anzeige
Anzeige
zappan
Threadersteller

Dabei seit: 31.08.2012
Ort: -
Alter: 63
Geschlecht: -
Verfasst Sa 01.09.2012 09:23
Titel

Antworten mit Zitat Zum Seitenanfang

heiko_rs hat geschrieben:
Erster Schritt: Die ul nicht erst stylen, wenn sie per li:hover ul sichtbar gemacht wird, sondern schon vorher - d.h. per li:hover ul kommt in Deinem Falle ausschließlich display: block;, der ganze Rest wandert in die normale Regel.

iPad und iPhone mögen es nicht, wenn bei Subnavis allzuviel per :hover kommt, daher sollte man hier wirklich nur das hinschreiben, was für's Sichtbarmachen nötig ist.

Ob das in Deinem konkreten Fall hilft, weiß ich nicht, aber ich hatte schon Fälle, in denen Subnavis in iPhone & Co. gesponnen haben, weil sie quasi erst beim Hovern formatiert wurden.

Übrigens sollte man für Screenreader- und im Prinzip auch Tabulatur-Nutzer die Subnavi nicht per display: none; ausblenden, sondern per top & left ins Nirvana schieben. Die Regel li:hover ul enthielte dann ausschließlich diese beiden Eigenschaften (auf auto oder eben einen konkreten Wert gesetzt).


Hallo Heiko,
vielen Dank für deine Antwort.
Ich habe mir deine Tipps angeschaut und das mit dem display: none einmal geändert.
Glaube das Problem liiegt woanders.
Das Menü klappt wieder ein, wenn ich z.B. auf den rechten grünen Rand des Menüs, s. Pfeil im Bild.


klicke oder auf einen Link in der rechten Spalte. Also innerhalb dieser beiden divs.

Nur auf die Karte selbst komme ich mit dem iPad nicht.

Die Menüleiste hat auch einen z-index, der muss sein, damit ich die Leiste vor der Karte habe.
Vielleicht gibts auch andere Menümöglichkeiten, ich kenne mich da leider nur sehr sehr wenig aus,
hoffe jedoch, dass ich das noch hinkriege mit Unterstützung.
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst So 02.09.2012 14:41
Titel

Antworten mit Zitat Zum Seitenanfang

Von dem, was ich als ersten Schritt beschrieb, sehe ich nichts. Bei stehen immer noch Dinge wie

Code:
#leiste_menu li:hover .dropdown_1column,
#leiste_menu li:hover .dropdown_2columns,
#leiste_menu li:hover .dropdown_3columns {
   display: block;
   position: absolute;
   margin: 0 0 0 -12px;
   top:36px;
   background-color:#222222;
   border: 10px solid #111111;   
   z-index:0;   
   
   /* CSS3 Stylings - Rounded Corners */
   -moz-border-radius: 0px 0px 7px 7px;
   -webkit-border-radius: 0px 0px 7px 7px;
   border-radius: 0px 0px 7px 7px;
}


D.h. Du machst das immer noch alles erst beim Hovern, und wie gesagt, iPhone & Co. spinnen dann gerne mal bei Dropdown-Navis.
  View user's profile Private Nachricht senden
zappan
Threadersteller

Dabei seit: 31.08.2012
Ort: -
Alter: 63
Geschlecht: -
Verfasst So 02.09.2012 21:20
Titel

Antworten mit Zitat Zum Seitenanfang

heiko_rs hat geschrieben:
Von dem, was ich als ersten Schritt beschrieb, sehe ich nichts. Bei stehen immer noch Dinge wie

Code:
#leiste_menu li:hover .dropdown_1column,
#leiste_menu li:hover .dropdown_2columns,
#leiste_menu li:hover .dropdown_3columns {
   display: block;
   position: absolute;
   margin: 0 0 0 -12px;
   top:36px;
   background-color:#222222;
   border: 10px solid #111111;   
   z-index:0;   
   
   /* CSS3 Stylings - Rounded Corners */
   -moz-border-radius: 0px 0px 7px 7px;
   -webkit-border-radius: 0px 0px 7px 7px;
   border-radius: 0px 0px 7px 7px;
}


D.h. Du machst das immer noch alles erst beim Hovern, und wie gesagt, iPhone & Co. spinnen dann gerne mal bei Dropdown-Navis.


Hallo Heiko,
Ich hatte das schon mal geändert und wieder die original CSS genommen, es hatte sich nichts geändert am Verhalten.
Ich hoffe ich hab das richtig gemacht, weil zum Schluss dann nichts mehr gepasst hatte.

Jetzt hab ich extra mal ein Rechteck drüber gelegt, beim antippen geht das Menü zu.
Hier der Link

Es muss daran liegen, wie die Karte erzeugt wird, das wird das Problem sein.
  View user's profile Private Nachricht senden
heiko_rs

Dabei seit: 06.02.2008
Ort: Berlin
Alter: -
Geschlecht: Männlich
Verfasst Mo 03.09.2012 15:20
Titel

Antworten mit Zitat Zum Seitenanfang

Ist Dein einziges Problem, dass man das Menü nur an bestimmten Stellen zum Zuklappen bekommt?

Dass es nicht von selber wieder zuklappt, liegt in der Natur der Sache, aber warum es nur durch Tippen auf bestimmte Stellen geht, wird sich ohne iPad leider wahrscheinlich nicht klären lassen (ich habe auch keines zur Hand, checke iPad immer bei einem Kollegen).

Zumal auch ausgiebig JS verwandt wird - auch das habe ich schonmal als Dropdown-Störfaktor für iPhone & Co. erlebt (im konkreten Falle war es UserVoice-Feedback).

Was ich an Deiner Stelle tun würde: Jegliches JS entfernen und schauen, ob es dann geht. Wenn ja, JS Stück für Stück wiederkommen lassen, bis es nicht mehr geht - dann bist Du wenigstens schonmal auf der richtigen Spur, d.h. weißt, welches JS verantwortlich ist. Und dann kannst Du ja auch nochmal posten.
  View user's profile Private Nachricht senden
 
Ähnliche Themen Interaktive 360° Produktanimation für ipad (offline)
Womit wurde diese interaktive Karte erstellt?
InDesign:Interaktive PDF - DropDown-Menü?
Menü Javascript - klappt nicht wie ich will - Hilfe!
Menü superfish klappt beim hoovern kein Untermenü auf
Menü Leiste bei ezPDF Reader auf iPad komplett ausblenden
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.