• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

CSS Klappmenü und Mobilgeräte

F

Freeloader

Neues Mitglied
Hallo und guten Abend zusammen,

ich habe vor einigen Jahren für einen Bekannten eine Homepage gebaut wobei ich ein Klappmenü mit CSS File verwendet habe. Das Klappmenü habe ich an die bestehenden Anforderungen angepasst (Inhalt von 2 iFrames soll sich bei Klick ändern) und nach viel hin und her auch hinbekommen. Leider hat das Klappmenü jedoch noch nie mit Mobilgeräten von Apple (evtl. auch andere) funktioniert (Div. iPhones, iPad etc. getestet).

Menüpunkte ohne weitere Untermenüs funktionieren überall, sobald jedoch der "Klappeffekt" gefragt ist passiert bei den genannten Geräten leider garnichts.

Nun zu meiner Frage: Liesse sich die Datei evtl. so anpassen, dass das Menü auch bei iPhones etc. aufklappt?

Hier ein paar Eckdaten:

Quelle des Menüs: Link

htm-Datei:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Homepage</title>

<link rel="stylesheet" type="text/css" href="2d-nav-h.css">

<!--[if IE]>
<style type="text/css" media="screen">
#menu ul li {float: left; width: 100%;}
</style>
<![endif]-->

<!--[if lt IE 7]>
<style type="text/css" media="screen">
body {behavior: url(csshover.htc); font-size: 100%;}
#menu ul li a {height: 1%;}
}
</style>
<![endif]-->

<style type="text/css">A:link {text-decoration:none;outline: none;} A:active {text-decoration:none;outline: none;} A:visited {text-decoration:none;outline: none;}</style> 

<script type="text/javascript" language="JavaScript">
<!--
function twoframes(URL1,URL2)
{
self.iFrameBanner.location.href=URL1;
top.iFrameContent.location.href=URL2;
}
//-->
</script>

</head>

<body oncontextmenu="return false" bgcolor="#424242" text="#C0C0C0" link="#C0C0C0" vlink="#C0C0C0" alink="#C0C0C0">

<br>

<div id="menu">

<ul>

  <li><a href="javascript:twoframes('verweis.htm','verweis.htm')" style="padding:0; border-width:0"><h2>Menü 1</h2></a></li>

</ul>

<ul>

  <li><a href="javascript:twoframes('verweis.htm','verweis.htm')" style="padding:0; border-width:0"><h2>Menü 2</h2></a></li>

</ul>

<ul>
  <li><h2>Menü 3n</h2>
    <ul>
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 3n1</a></li>
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 3n2</a></li>
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 3n3</a></li>
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 3n4</a></li>
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 3n5</a></li>
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 3n6</a></li>
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 3n7</a></li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>Menü 4n</h2>
    <ul>          
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 4n1</a></li>
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 4n2</a></li>
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 4n3</a></li>
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 4n4</a></li>
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 4n5</a></li>      
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 4n6</a></li>      
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 4n7</a></li>     
    </ul>
  </li>
</ul>

<ul>
  <li><a href="javascript:twoframes('verweis.htm','verweis.htm')" style="padding:0; border-width:0"><h2>Menü 5</h2></a></li>
</ul>

<ul>
  <li><h2>Menü 6n</h2>
    <ul>
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 6n1</a></li>
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 6n2</a></li>
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 6n3</a></li>
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 6n4</a></li>
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 6n5</a></li>
    </ul>
  </li>
</ul>

<ul>
  <li><h2>Menü 7n</h2>
    <ul>
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 7n1</a></li>
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 7n2</a></li>
    </ul>
  </li>
</ul>

</div>

</body>

</html>

CSS-Datei:

Code: 
/* Tabelleneigenschaften */
#menu {
/* width: 952px; */
width: 1024px;
background: #424242;
float: left;
position:relative;
left:50%;
/* margin-left:-476px; */
margin-left:-529px;
/* text-align: left; */
text-align: center;
}

/* Zelleneigenschaften Groesse Ebene 0-n */
#menu ul {
list-style: none;
margin: 0;
padding: 0;
/* width: 119px; */
width: 145px;
float: left;
}

/* Zelleneigenschaften Ebene 0-n */
#menu a, #menu h2 {
font: 14px/14px arial, helvetica, sans-serif;
display: block;
border-width: 1px;
border-style: dotted;
border-color: #424242 #424242 #424242 #424242; /* TOP-RIGHT-BOTTOM-LEFT */
margin: 0;
padding: 2px 3px;
}

/* Zelleneigenschaften Ebene 0 */
#menu h2 {
color: #FFFFFF;
background: #424242;
text-transform: uppercase;
}

/* Zelleneigenschaften Ebene 1-n OFF */
#menu ul ul a,
#menu ul ul ul a{
color: #FFFFFF;
background: #727272;
text-decoration: none;
}

/* Zelleneigenschaften Ebene 1-n ON */
#menu ul ul a:hover,
#menu ul ul ul a:hover{
color: #000;
background: #838291;
}

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}


Es wäre wirklich super wenn mir hier jemand helfen würde das "Problem" zu beheben.
Für Rückfragen bin ich gerne da, vielen vielen Dank im Voraus.
 
Hallo,

ich bin mitlerweile soweit dass das Aufklappen nun auch auf dem iPhone funktioniert, indem ich jedem Menü zusätzlich zur Hoverfunction in der CSS Datei ein Mouseover Event im HTML verpasst habe:

Code: 
<ul>
  <li onmouseover=""><h2>Menü 7n</h2>
    <ul>
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 7n1</a></li>
        <li><a href="javascript:twoframes('verweis.htm','verweis.htm')">Menü 7n2</a></li>
    </ul>
  </li>
</ul>

Nach Auswahl eines der Untermenüs wird das Klappmenü nur leider im Moment noch noch nicht wieder geschlossen.
Vielleicht kann mir ja an dieser Stelle noch jemand helfen, ich wäre sehr dankbar. Gruss
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben