ManuelLemke
Neues Mitglied
Wie kann ich 1 Seitenmenu einblenden/ ausblenden?
Mein bisheriges Html klappt noch nicht perfekt.
Herausforderungen sind folgende_
1) Die Seite lädt mit geöffnetem Seitenmenu. Es sollen aber nur die Symbole gezeigt werden (welche sich über der Seite befinden) und erst nach anklicken der MenuSchaltfläche soll zusätzlich zu Symbolen Text auf blauen Schaltflächen eingeblendet werden.
[ATTACH=full]deleted[/ATTACH]
Es soll genau umgekehrt! Zuerst soll Menu (blauer Hintergrund) eingeklappt erscheinen und beim Klicken eingeblendet werden.
[ATTACH=full]deleted[/ATTACH]
2) Wenn man Symbole anklickt, wird Ziel im Fenster geöffnet und ersetzt Menu und Hintergrund. ZielSeiten sollen geöffnet werden in target="Screen" (grün dargestellte Fläche).
[ATTACH=full]deleted[/ATTACH]
Noch 1 Hinweis, Wer keine Antwort kennt möge sich RAUSHALTEN (anstatt angesprochen fühlen und sich selbst mit übersteigertem Ego für unabkömmlich zu halten) statt völlig sinnlos herum zu mäkeln. Ich bin froh, wenn überhaupt etwas klappt. ---> Dann bleibt die Frage solange offen, bis tatsächlich eine Lösung gefunden werden kann. Durchdachte RückFragen beantworte ich gern. Das Cascading Style Sheet direkt an Ort und Stelle im Dokument ist von mir beabsichtigt (hat nichts mit meiner Frage zu tun).
Will kein Javascript verwenden weil der InternetExplorer rummeckert bezüglich Active-X Steuerelementen.
[ATTACH=full]deleted[/ATTACH]
Mein bisheriges Html klappt noch nicht perfekt.
Herausforderungen sind folgende_
1) Die Seite lädt mit geöffnetem Seitenmenu. Es sollen aber nur die Symbole gezeigt werden (welche sich über der Seite befinden) und erst nach anklicken der MenuSchaltfläche soll zusätzlich zu Symbolen Text auf blauen Schaltflächen eingeblendet werden.
[ATTACH=full]deleted[/ATTACH]
Es soll genau umgekehrt! Zuerst soll Menu (blauer Hintergrund) eingeklappt erscheinen und beim Klicken eingeblendet werden.
[ATTACH=full]deleted[/ATTACH]
2) Wenn man Symbole anklickt, wird Ziel im Fenster geöffnet und ersetzt Menu und Hintergrund. ZielSeiten sollen geöffnet werden in target="Screen" (grün dargestellte Fläche).
[ATTACH=full]deleted[/ATTACH]
Code:
<html><head><title></title></head>
<body>
<div class="Start">
<style>
.Panel { background-color: rgba(0, 0, 64, 1); width: 333px; position: absolute; top: 0; left: 0; bottom: 0;}
.Panel h1 { color: white;}
.Screen { background-color: rgba(200, 200, 200, 1); position: absolute; top: 0; left: 333px; right: 0; bottom: 0; -moz-transition: left 0.4s ease; transition: left 0.4s ease;}
input[type=checkbox] { display: none;}
input:checked ~ .Screen { left: 0;}
input:checked ~ label { left: 0;}
label { z-index: 2; position: absolute; top: 0; left: 8px; -moz-transition: left 0.4s ease; transition: left 0.4s ease;}
</style>
<input id="slide-Panel" type="checkbox" role="button">
<div class="Panel"><label for="slide-Panel"><span>
<br>
<a class="Menu" style="display: block;z-index: 4; position:absolute; top:0; left:0; width:43px; height:36px;">
<style>
.Menu {background:url(Icon011.png);background-size: cover;}
.Menu:hover {background:url(HoverIcon011.png);background-size: cover;}
</style>
</a>
</span></label></div>
<div id="Screen" name="Screen" class="Screen">
<iframe src="Seite1.html" style="z-index: 5; position:relative; margin-top: 0px; margin-left: 0px; width:100%; height:100%; border-width:0px; "></iframe>
</div>
</div>
<div style="z-index:5; float: left; margin-left:0px; margin-top:0px; padding: 0px; border: 0px;border-color: transparent;">
<br>
<br>
<br>
<br>
<a class="SeiteEinz" href="Seite1.html" target="Screen" style="display: block;z-index: 4; position:relative; width:31px; height:42px;">
<style>
.SeiteEinz {background:url(Icon021.png);background-size: cover;}
.SeiteEinz:hover {background:url(HoverIcon021.png);background-size: cover;}
</style>
</a><br>
<a class="SeiteZwei" href="Seite2.html" target="Screen" style="display: block;z-index: 4; position:relative; width:44px; height:37px;">
<style>
.SeiteZwei {background:url(Icon022.png);background-size: cover;}
.SeiteZwei:hover {background:url(HoverIcon022.png);background-size: cover;}
</style>
</a><br>
<a class="SeiteDrei" href="Seite3.html" target="Screen" style="display: block;z-index: 4; width:48px; height:43px;">
<style>
.SeiteDrei {background:url(Icon031.png);background-size: cover;}
.SeiteDrei:hover {background:url(HoverIcon031.png);background-size: cover;}
</style>
</a><br>
[...weitere Schaltflächen]
<div>
</div></div></body></html>Noch 1 Hinweis, Wer keine Antwort kennt möge sich RAUSHALTEN (anstatt angesprochen fühlen und sich selbst mit übersteigertem Ego für unabkömmlich zu halten) statt völlig sinnlos herum zu mäkeln. Ich bin froh, wenn überhaupt etwas klappt. ---> Dann bleibt die Frage solange offen, bis tatsächlich eine Lösung gefunden werden kann. Durchdachte RückFragen beantworte ich gern. Das Cascading Style Sheet direkt an Ort und Stelle im Dokument ist von mir beabsichtigt (hat nichts mit meiner Frage zu tun).
Will kein Javascript verwenden weil der InternetExplorer rummeckert bezüglich Active-X Steuerelementen.
[ATTACH=full]deleted[/ATTACH]
Zuletzt bearbeitet von einem Moderator:
