Slideout Box

Slideout Box

Diese Box lässt sich nach dem Einbau inhaltlich und vom Stil über die Mobirise Werkzeuge bearbeiten.

Hier meine CSS

... kopiert die CSS in den Bereich "CSS Editor" vom "Code Editor" in irgendeinem Block:

#slideout {
position: fixed;
top: 200px;
left: 0;
width: 42px;
padding: 10px 10px 10px 0px;
text-align: center;
background: #e2e2e2;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
border-radius: 0 10px 10px 0;
border-top: 2px solid #8d97ad;
border-bottom: 2px solid #8d97ad;
border-right: 2px solid #8d97ad;
z-index: 3;
}

#slideout_inner {
position: fixed;
top: 200px;
left: -250px;
background: #e2e2e2;
width: 250px;
padding: 20px;
height: 184px;
-webkit-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
transition-duration: 0.3s;
text-align: left;
border-top: 2px solid #8d97ad;
border-bottom: 2px solid #8d97ad;
}
#slideout_inner textarea {
width: 190px;
height: 100px;
margin-bottom: 6px;
}
#slideout:hover {
left: 250px;
}
#slideout:hover #slideout_inner {
left: 0;
}

Bemerkung:

Um die Box größer zu machen, könnt Ihr die CSS natürlich entsprechend anpassen und z.B. anstelle einer Höhe von:
height: 183px;
auch eine "view height" angeben, von meinetwegen 70% der Display-Höhe eines Gerätes:
height: 70vh;

Hier mein Inhalt

Meine Grafik "Info.jpg" könnt Ihr Euch hier downloaden oder Eure eigene Grafik erstellen.

... kopiert den Inhalt in den gleichen Block von Mobirise, in den Bereich "HTML Editor" vom "Code Editor", in den Ihr bereits die CSS (oben) kopiert habt:

<div id="slideout">
<img style="border-radius: 0 10px 10px 0;" src="http://www.mobirise-tutorials.com/BusinessM4/images/Info.jpg">
<div id="slideout_inner">
<p mbr-theme-style="display-7"><strong>Slideout Box</strong><br><br>hier kann ein beliebiger Inhalt stehen.</p>
<p mbr-theme-style="display-7"><a href="http://www.mobirise-tutorials.com/" target="_blank" class="text-primary">Mobirise Tutorials</a></p>
</div>
</div>

Slideout Box

hier kann ein beliebiger Inhalt stehen.

Mobirise Tutorials

Abdunkeln vom Hintergrund ohne Animation - mit Animation tiefer:

Wenn Ihr auch noch den Body abdunkeln und diesem somit ein Overlay geben wollt, dann müsst Ihr noch folgende Anpassungen zusätzlich vornehmen:

Kopiert dieses JavaScript zum Ein- und Ausschalten des Overlays in die Seiteneinstellungen in den Bereich

"Inside <head> code:"

<script>
function on() {
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
</script>

Gebt der id="slideout", für die Anzeige der Flyout Box, noch die Befehle für Mausüber und Mausaus zusätzlich ein:

<div id="slideout" onmouseover="on()" onmouseout="off()">
<img style="border-radius: 0 10px 10px 0;" src="http://www.mobirise-tutorials.com/BusinessM4/images/Info.jpg">
<div id="slideout_inner">
<p><strong>Slideout Box</strong><br><br>hier kann ein beliebiger Inhalt stehen.</p>
<p><a href="http://www.mobirise-tutorials.com/" target="_blank" class="text-primary">Mobirise Tutorials</a></p>
</div>
</div>

Fügt dieses DIV zusätzlich in den Block ein, in dem Ihr auch bereits das DIV der Anzeige eingebaut habt, also am besten gleich unter der Anzeige vom obigen Slideout-Container:

Fügt diese zusätzliche CSS für das Overlay noch in den Bereich "CSS Editor", unter die bereits für die Slideout Box eingefügten CSS, hinzu:

#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
}

Abdunkeln vom Hintergrund mit Animation - vielen Dank an Werner-Zenk.de für die Hilfe zur Animation:

Wenn den Body mit einer Animation abdunkeln wollt, so wie ich es hier getan habe, dann müsst Ihr noch folgende Anpassungen zusätzlich vornehmen:

Kopiert dieses JavaScript zum Ein- und Ausschalten des Overlays in die Seiteneinstellungen in den Bereich

"Inside <head> code:"

<script>
function on() {
document.getElementById("overlay").style.display = "block";
document.getElementById("overlay").style.animation = "animationName 1.0s both running";
}
function off() {
document.getElementById("overlay").style.animation = "animation2Name 1.0s both running";
}
</script>

Gebt der id="slideout", für die Anzeige der Flyout Box, noch die Befehle für Mausüber und Mausaus, wie auch schon oben:

<div id="slideout" onmouseover="on()" onmouseout="off()">
<img style="border-radius: 0 10px 10px 0;" src="http://www.mobirise-tutorials.com/BusinessM4/images/Info.jpg">
<div id="slideout_inner">
<p><strong>Slideout Box</strong><br><br>hier kann ein beliebiger Inhalt stehen.</p>
<p><a href="http://www.mobirise-tutorials.com/" target="_blank" class="text-primary">Mobirise Tutorials</a></p>
</div>
</div>

Fügt dieses DIV zusätzlich in den Block ein, in dem Ihr auch bereits das DIV der Anzeige eingebaut habt, also am besten gleich unter der Anzeige vom obigen Slideout-Container, wie auch schon oben:

Fügt diese zusätzliche CSS für das Overlay mit Animation noch in den Bereich "CSS Editor", unter die bereits für die Slideout Box eingefügten CSS, hinzu. Hier wird die Animation mit "CSS-Keyframes" zusätzlich dargestellt:

#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
cursor: pointer;
}

@keyframes animationName {
from {
background-color: transparent;
display: block;
}
to {
background-color: rgba(0, 0, 0, 0.5);
display: block;
}
}

@keyframes animation2Name {
from {
background-color: rgba(0, 0, 0, 0.5);
display: none;
}
to {
background-color: transparent;
display: none;
z-index: -1;
}
}

Hier noch ein ähnliches Beispiel mit einer fixierten Social-Media Sidebar.

Viel Spaß

Slideout Box

Gehe mit der Maus auf die Slideout / Flyout Box im linken Bereich, um diese zu öffnen

Adresse

Links