mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Fr 19.04.2024 21:43 Benutzername: Passwort: Auto-Login

Thema: Problem mit Menu nur unter iphone / ipad vom 13.05.2013


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Problem mit Menu nur unter iphone / ipad
Seite: 1, 2  Weiter
Autor Nachricht
smisonline2
Threadersteller

Dabei seit: 13.08.2012
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 13.05.2013 15:24
Titel

Problem mit Menu nur unter iphone / ipad

 Antworten mit Zitat Zum Seitenanfang
Hallo,

das Problem ist folgendes.


Wenn ich dort auf den "test link 0" fahre, öffnet sich das Submenu. Wnen ich jetzt auf einen Link klicke oder aus dem Menu herausfahre, geht es auf Applegeräten nicht zu oder nur manchmal. Zu 90% bleibt es aber offen, bis man auf einen andere n Link außerhalb dieses Submenus klickt. Danke für Eure Hilfe


http://www.sxrg-energy.com/pre/ttt/


Die css Definition sieht so aus.






Code:
/* Mainnavigation */
#content_mainnavigation {
   font-size: 14px;
   /*font-weight:bold;*/
   z-index:20000;
   width:100%;
   min-width:770px;
   position:fixed;
   top:0px;
   margin: 0 auto;
   height:115px;
 

   background-image: url(../images/header_background.png);
   background-repeat:repeat-x;
   background-position: center top;

   }
   




#navlogo{
   top:10px;
   background-image: url(../images/headerlogo.png);
   background-repeat:no-repeat;
   background-position: center top;
   float:left;
   width:151px;
   min-width:151px;
   max-width:151px;
   height:80px;
   min-height:80px;
   max-height:80px;
   padding:0px;
   margin:0px;
   margin-top:10px;
   margin-left:20px;
   pointer-events: all;
   z-index:50000;
   /*position:fixed;*/
   }
   
   
   
   





#header {
   width:570px;
   min-width:570px;
   float:right;

   margin: 30px auto 0px auto;
   padding:0px;
   height:34px;
   
   background-color: #fff;

   filter: alpha(opacity=90);
   -khtml-opacity: 0.90;     
   -moz-opacity: 0.90;       
   opacity: 0.90;   
   }


#menu {
   padding:0px;
   float:left;
   margin-left:1px;
   }
   
#menu ul {
   list-style: none;
   margin: 0;
   padding: 0;

   }

#menu a {
   /*font-size: 1.0em;*/
   /*font-weight: bold;*/
   text-decoration: none;   
   }

#menu > ul > li > a {
   /*
   -moz-box-shadow:    2px 2px 2px rgba(0,0,0,0.3);
   -webkit-box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
   box-shadow:       2px 2px 2px rgba(0,0,0,0.3);
   */
   }
   
/* Top buttons */
#menu > ul > li {
   float: left;
   margin: 0px;
   position: relative;
   padding-bottom:10px;/* important  pulldown */
   }
   
#menu > ul > li > a {
   color: #cb1017;


   line-height: 32px;
   padding:10px;
   text-align:center;
   }
   

      
#menu > ul > li:hover > a {
   color: #ffffff;
   background-color: #cb1017;
   }

#menu > ul > li > a.current{
   color: #ffffff;
   background-color: #cb1017;   
   }

#menu .menu-drop > a.current {

   }

#menu .menu-drop:hover > a.current {
   }
   
#menu .menu-drop > a.current .menu-label {
   background-image: url("../images/revolverslider/drop_arrow.png");
   background-position:right -23px;
   background-repeat:no-repeat;   
   }
   
#menu .menu-drop > a {
   padding-right: 10px;
   }
      
#menu .menu-label {
   background-image: url("../images/revolverslider/drop_arrow.png");
   background-position:right 7px;
   background-repeat:no-repeat;
   -webkit-transition: background 0.1s;
   -moz-transition: background 0.1s;
   -ms-transition: background 0.1s;
   -o-transition: background 0.1s;
   transition: background 0.1s;
   padding-right: 15px;
   }

#menu .menu-drop:hover .menu-label {
   background-position:right -23px;
   -webkit-transition: background 0.1s;
   -moz-transition: background 0.1s;
   -ms-transition: background 0.1s;
   -o-transition: background 0.1s;
   transition: background 0.1s;
   }

#menu .menu-right {
   float: right;
   }
      
      
/* Dropdown */

#menu ul ul {
   min-width:220px;
   width:240px;
   padding: 0px;
   margin: 0px;
   position: absolute;
   top: 40px;
   /*left: -5000px;*/
   left:0px;
   min-width: 100%;
   z-index: 100;
   display:none;

   filter: alpha(opacity=90); /* internet explorer */
   -khtml-opacity: 0.90;      /* khtml, old safari */
   -moz-opacity: 0.90;       /* mozilla, netscape */
   opacity: 0.90;           /* fx, safari, opera */   

   -moz-box-shadow:    2px 2px 4px rgba(0,0,0,0.3);
   -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
   box-shadow:       2px 2px 4px rgba(0,0,0,0.3);   
   }


#menu li:hover ul {
   /*left: 0;*/
   right:0px;
   display:block;
   border: 2px solid white;
   }

      
/* Dropdown buttons */
#menu ul ul li {
   border-bottom: 1px dotted #c7ff70;
   }

#menu ul ul a {
   background-position:left 7px;
   color: #cb1017;
   background-color: #ffffff;
   padding: 10px 10px 10px 16px;
   display: block;   
   }

#menu ul ul a:hover {
   color: #ffffff;
   background-color: #cb1017;
   }


#menu ul ul .submenudiv {
   background-position:left 7px;
   background-repeat:no-repeat;

   color: #cb1017;
   background-color: #ffffff;
   padding: 10px 10px 10px 16px;
   display: block;   
   cursor: pointer;
   }

#menu ul ul .submenudiv:hover {
   color: #ffffff;
   
   background-color: #cb1017;
   }

#socialinfo {
   float:right;
   margin: 0px;
   padding: 0px;
   margin-top: -12px;
   margin-right: 20px;
   }   
  View user's profile Private Nachricht senden
remote

Dabei seit: 10.11.2006
Ort: /var/www/
Alter: 110
Geschlecht: Männlich
Verfasst Mo 13.05.2013 16:17
Titel

Antworten mit Zitat Zum Seitenanfang
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.sxrg-energy.com%2Fpre%2Fttt%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

mach das mal grün bitte, dann kann man sich der lösung des konkreten problems widmen *zwinker*
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Eistee
Administrator

Dabei seit: 31.10.2001
Ort: Grimma
Alter: 45
Geschlecht: Männlich
Verfasst Mo 13.05.2013 16:19
Titel

Antworten mit Zitat Zum Seitenanfang
Auf touch-Devices gibt es naturgemäss keine hover-Events. Du wirst als ein Javascript Fallback für touch-events brauchen...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
smisonline2
Threadersteller

Dabei seit: 13.08.2012
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 13.05.2013 16:35
Titel

Hover/Out

 Antworten mit Zitat Zum Seitenanfang
Eistee hat geschrieben:
Auf touch-Devices gibt es naturgemäss keine hover-Events. Du wirst als ein Javascript Fallback für touch-events brauchen...


Hallo,

Danke für die Antwort. Beim andorid und windows phone geht das Menu wenigstens weg, wenn ich außerhalb des Menus klicke:(

Kannst du mir dazu Infos geben, wie ich das mit dem "Fallback" am besten realisiere?
  View user's profile Private Nachricht senden
smisonline2
Threadersteller

Dabei seit: 13.08.2012
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 13.05.2013 17:11
Titel

Re: Hover/Out

 Antworten mit Zitat Zum Seitenanfang
Hallo,

habe es jetzt mal ziemlich rabiat mit diesem Code hinbekommen

Code:
$("#menu ul li ul a").click(function () {
   $(".submenu1").css("display","none");
   });
   
$(".subclick1").click(function () {
   $(".submenu1").css("display","block");
   });


Allerdings ist das Ganze nicht sher flexibel, wenn es weitere Menus gibt. Ne IDee, wie das mit jquery besser geht?

Zuletzt bearbeitet von Smooth-Graphics am Do 16.05.2013 12:08, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Eistee
Administrator

Dabei seit: 31.10.2001
Ort: Grimma
Alter: 45
Geschlecht: Männlich
Verfasst Di 14.05.2013 09:03
Titel

Antworten mit Zitat Zum Seitenanfang
Halte dich erstmal an den Rat von remote und mache deinen Code valide. Das sollte immer Schritt 1 sein zum Debuggen, weils einfach eine Fehlerquelle weniger ist...
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
smisonline2
Threadersteller

Dabei seit: 13.08.2012
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 16.05.2013 10:45
Titel

Code

 Antworten mit Zitat Zum Seitenanfang
Was wäre da nicht valide?
  View user's profile Private Nachricht senden
qualidat

Dabei seit: 14.09.2006
Ort: Eichwalde bei Berlin
Alter: 63
Geschlecht: Männlich
Verfasst Do 16.05.2013 11:05
Titel

Antworten mit Zitat Zum Seitenanfang
Das Problem besteht nicht nur auf Mobilgeräten. Wenn man mit Friefox (Macbook) einige Male hin- und herklickt, bleibt das Manü auch offen ... muss also tiefer in der Logik liegen.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Darstellungs-Problem Hintergundbild (iPad, iPhone)
Screen Conversion iPhone 5 zu iPhone 4 und iPad
website für iphone und ipad
Scrollen am iPhone löst Hover im Menu aus (?)
Bild-Signatur in iPhone und iPad einsetzen
IDE für iPhone/iPad, die den Namen auch verdient?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
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.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB