Hallo,
ich versuche gerade das Multi-Level-Toggle-Menü von Focus on Function auf meiner Seite zu integrieren.
Das hier: http://fofwebdesign.co.uk/free…ti-rwd-drop-down-menu.htm
Ich habe mein Menü entsprechend umgeschrieben und die Feldgrößen und einige Farben etwas angepasst.
In der Desktop-Ansicht funktioniert alles und die Menüpunkte lassen sich auch auf dem Touchscreen von meinem Tablet auswählen.
Im verkleinerten Fenster springt das Menü auf die gewünschte mobile Ansicht.
wenn ich nun aber einen Punkt aus dem Menü auswähle und sich das Untermenü öffnet legt es sich über das Menü, ohne dass dieses "verschwindet".
Die Schrift im Head des Toggle Menüs wird transparent und man kann die Beschriftung des Obermenüs dadurch sehen und der nicht abgedeckte Teil des Obermenüs bleibt sichtbar.
Sehen könnt ihr das hier: http://www.heimbiotop.de/Test_3.html
Was habe ich falsch gemacht?
Ich bin für jede Hilfe dankbar.
CSS
html, body { margin:0; padding:0; height:100%; position:relative; background:#ffffcc; color: #000000; font:16px/1.75 Verdana, Arial, Helvetica, sans-serif }
body { overflow-x:hidden; -webkit-animation:androidbugfix infinite 1s } /* http://timpietrusky.com/advanced-checkbox-hack */
@-webkit-keyframes androidbugfix { from {padding:0} to {padding:0} } /* http://timpietrusky.com/advanced-checkbox-hack */
#header { position:relative; top:0; left:0; right:0; height:4.0625em; background:#589327 } /*Hintergrund vom Header grün*/
#header label { padding:0 0.125em; font:2.875em/1.4375em Arial } /*Größe des Felds mit dem Pfeil im Menü*/
#menu label { padding:0 0,25em; font:3.125em/1.375em Arial } /*Position des Pfeils im Menü*/
#menu .sub-nav .toggle { padding:0 0.3125em; font:2em/2em Arial; top:0; -webkit-transform:scale(-1,1); -ms-transform:scale(-1,1); transform:scale(-1,1) }
#header label:hover, #menu label:hover { color:#777777 } /*Farbe vom Hamburger beim hovern*/
#main-nav-check, #menu .sub-nav-check { position:absolute; top:-9999px; left:-9999px }
.toggle { position:absolute; right:0.15em; cursor:pointer; color:#fff }
.container { background:#FFFFCC; min-height:100%; padding:0; margin:0 } /*Hintergrund des Containers identisch mit Hintergrund Body*/
#menu, #menu .sub-nav { position:absolute; top:0; bottom:0; width:15em; background:#222; z-index:9999; left:-15em; } /*Breite der Felder muss identisch sein mit Wert der nach links bzw. nach rechts verschobenen Position.*/
.container, #menu, #menu .sub-nav {
-webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0);
-webkit-transition:-webkit-transform .25s ease; transition:transform .25s ease;
}
#menu ul { background:#222; line-height:2.75em; text-decoration:none; padding:0; list-style:none; margin-top:4.0625em; border-top:1px solid #444 } /*Gesamtmenü, Breite automatisch*/
#menu li { border-bottom:1px solid #444; width:15em; }
#menu li a { background:#222; display:block; font-size:1em; padding-left:1.5em; color:#fff; text-decoration:none } /*Schriftgröße im Menü. Margin right vergößert das Feld um Platz für den Pfeil zu schaffen, verschiebt aber auch in der mobil Version die Felder.*/
#menu li a:hover, #menu .toggle-sub:hover { background:#333 }
#menu .sub-nav { margin-top:-1px }
#menu .sub-heading { margin-top:4.0625em; padding-left:1.3125em; color:#999 }
#menu .sub-heading:before { content:""; display:block; height:1px; width:15em; margin-left:-1.3125em; background:#444 }
#menu .toggle-sub { font:bold 1em/2.75em Arial; color:#fff; background:#222; float:right; margin-top:-2.75em; width:2.25em; border-left:1px solid #444; cursor:pointer; text-align:center }
.container, #menu, #menu .sub-nav { -webkit-transform:translate3d(0,0,0) } /* http://davidwalsh.name/translate3d */
/* #### - corrects 'unfixing' bug in Safari - uncomment if you have position:fixed elements inside .container - #### */
/* @media screen and (-webkit-min-device-pixel-ratio:0) { .container { -webkit-transform:none !important } } */
/* #### - define ids of animated container, menu and sub-menus here - #### */
#main-nav-check:checked ~ .container,
#main-nav-check:checked ~ #menu,
#menu .sub-nav-check:checked ~ [id$="-sub"] /* matches all elements with id ending "-sub" */ {
-webkit-transform:translate(15em,0); -ms-transform:translate(15em,0); transform:translate(15em,0)
}
@media ( min-width:60em ) { /* #### - switch to desktop menu at 960px (960/16=60 - 16px being default browser font-size) - #### */
.container, #menu, #menu .sub-nav { -webkit-transform:translate(0,0) !important; -ms-transform:translate(0,0) !important; transform:translate(0,0) !important }
#menu label, #menu .sub-nav, #menu .sub-heading, #header label { display:none }
#menu { left:auto; bottom:auto; height:0; width:100% }
#menu .toggle-sub { display:inline-block; margin-top:-3.05em; margin-right:0.25em; border-left:0; -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg) }
#menu .toggle-sub, #menu .toggle-sub:hover { background:transparent } /*Hintergrund von dem Pfeil*/
#menu ul ul .toggle-sub { margin-top:-2.75em; margin-right:0; border-left:1px solid #444; -webkit-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg) }
#menu ul li:hover > label { color:#ccc } /* Farbe des Pfeils beim Hovern*/
#menu > ul { float:right; position:relative; z-index:1; top:0.4285em; right:1em; margin-top:0; display:inline-table; border-left:1px solid #444; border-right:0; font-size:0.875em }
#menu ul:after { content:""; clear:both; display:block }
#menu ul li { float:left; position:relative; text-align:left; border-right:1px solid #444 }
#menu ul li a { padding:0.5em 3.75em 0.5em 1.5em }
#menu ul li a:only-child { padding-right:1.5em }
#menu ul li:hover > a { background:#333; -webkit-transition:background-color .25s ease; transition:background-color .25s ease }
#menu ul li:hover > ul { display:block }
#menu ul ul { position:absolute; left:0; margin-left:-1px }
#menu ul ul li { float:inherit; width:15em; border-left:1px solid #444 }
#menu ul ul li a { padding:0 1.5em }
#menu ul ul li a:after { right:0.375em; margin-top:-1.6875em; -webkit-transform:none; -ms-transform:none; transform:none }
#menu ul .sub-nav { top:auto; bottom:auto; left:auto; width:auto; margin-top:0; -webkit-transform:none !important; -ms-transform:none !important; transform:none !important }
#menu ul ul .sub-nav { float:left; top:0; left:15em; margin-left:0; margin-top:-1px }
#menu ul .fly-left ul { left:-15em; margin-left:-2px }
#menu ul .fly-left ul li { float:none }
#menu ul .fly-left .toggle-sub { right:auto; left:0.5em; left:0.375em; padding-bottom:1px; border-right:1px solid #444; -webkit-transform:rotate(-180deg); -ms-transform:rotate(-180deg); transform:rotate(-180deg) }
#menu ul .go-up > ul { top:auto; bottom:0; margin-bottom:-1px }
}
.page-content { padding:0 1em 1em; max-width:64em; margin:auto }
.page-content:after { display:block; content:""; height:1px } /* fixes bottom padding issue in IE10 */
.breadcrumbs { font-size:.75em; border-bottom:7px solid #eee; margin:0 -1.25em 1.5em; padding:1em 1.25em }
.breadcrumbs span { display:none }
@media(min-width:30em) { .breadcrumbs { line-height:3.75; padding:0 1.25em } }
@media(min-width:60em) { .breadcrumbs span { display:inline-block } }
a, a:active, a:visited { color:#c30 }
a:visited { color:#c90 }
a:hover, a:focus { color:#666; text-decoration:none }
code { display:block; background:#ebebeb; font-size:0.875em; padding:1em 2em; overflow-x:scroll; white-space:nowrap }
<!--[if lt IE 9]>
/* #### - css for IE8 and under - also copy the css for the desktop menu here for IE7/8 compatibility #### */
/* copy and paste desktop menu css here */
#menu .toggle-sub { display:none } /* hide arrows (no rotate in IE7/8) */
#menu ul ul .toggle-sub { display:inline-block } /* reinstate right arrows on subs */
#menu ul li a { padding-right:1.5em } /* remove extra space previously reserved for down arrows */
<![endif]-->Lieb Grüße Maike
Ich habe den Fehler gefunden.
Ich hatte das Menü in den Header gesetzt und der wird in der Ansicht nicht angezeigt.
Liebe Grüße Maike