Nur mit CSS ausklappbare Info-Box.

Nach rechts sich öffnende Box, welche fest am linken Rand fixiert wurde. Scrollt nicht mit. Diese Navi- oder Infobox, kann mit allen HTML-Elementen problemlos bestückt werden! Da diese nicht mit ID sondern CLASS definiert wurde, ist es problemlos möglich diese Box zu vervielfältigen zBsp. hier Sozialbuttons. Nur im Body muss die Vervielfältigung getätigt und leicht ( Wert "top" ) angepasst werden! Unterschied -> Grafiken. So ist deren Anwendungsmöglichkeit nahezu unbegrenzt und Browserübergreifend, da kein Javascript verwendet wurde.

Denkbar als: Infobox, Navigationsbox, für sozial Button, für Kontaktformular usw. ... muss dann nur dementsprechend in der Größe angepasst werden.
Erklärung: "Trotz erfolgreicher Prüfung in den gängigsten Browsern, besteht kein Recht auf Vollständigkeit und Funktionalität".

Quelltext Infobox im Head:

/* ausklappbox */

.ca-akm {position:fixed; z-index:100; left:-200px; top:80px; width:222px; display:block;
}
.ca-akm-1 {display:block; width:190px; height:192px; background-color:white; float:left; font-size:11px; padding:5px; text-align:left; overflow:auto
}
.ca-akm-1 h1 {font-size:11px;
}
.ca-akm-2 {padding-top:100px; width:20px; height:100px; background:#948a54 url(img/bg-akm.jpg) no-repeat; float:left; border:1px solid #4a442c;
-webkit-border-top-right-radius: 20px; 
-webkit-border-bottom-right-radius: 20px; 
-moz-border-radius-topright: 20px; 
-moz-border-radius-bottomright: 20px; 
border-top-right-radius: 20px; 
border-bottom-right-radius: 20px;
}
.ca-akm:hover {left:0px; 
-webkit-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.8); 
-moz-box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.8); 
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.8); 
-webkit-border-top-right-radius: 20px; 
-webkit-border-bottom-right-radius: 20px; 
-moz-border-radius-topright: 20px; 
-moz-border-radius-bottomright: 20px; 
border-top-right-radius: 20px; 
border-bottom-right-radius: 20px;
}
</style>

Quelltext Infobox im Body:

Nur mit CSS ausklappbare Sozialbutton-Box.

Quelltext Sozialbutton-Box im Head:

Quelltext Sozialbutton-Box im Body:

Hier nun überlappend ...

Quelltext von üperlappend im Head:

Quelltext von üperlappend Sozialbutton-Box im Body:

<div class="xca-akm-sozi" style="top:436px; z-index:100;">
<div class="xca-akm-sozi-leer1"> </div>
<div class="xca-akm-sozi-1">Raum für die diversen Script von TWITTER<br />Auch scrollbar. <br />Hier ein wenig Fülltext zum Ansehen.<br />(-;</div>
<div class="xca-akm-sozi-leer2"> </div>
<div class="xca-akm-sozi-2"><img src="img/icons/Twitter.png" width="64" height="64" alt="" /></div><div style="clear:both"></div>
</div>

<div class="xca-akm-sozi" style="top:476px; z-index:110;">
<div class="xca-akm-sozi-leer1"> </div>
<div class="xca-akm-sozi-1">Raum für die diversen Script von FACEBOOK</div>
<div class="xca-akm-sozi-leer2"> </div>
<div class="xca-akm-sozi-2"><img src="img/icons/Facebook.png" width="64" height="64" alt="" /></div><div style="clear:both"></div>
</div>

<div class="xca-akm-sozi" style="top:520px; z-index:120;">
<div class="xca-akm-sozi-leer1"> </div>
<div class="xca-akm-sozi-1">Raum für die diversen Script von YouTube</div>
<div class="xca-akm-sozi-leer2"> </div>
<div class="xca-akm-sozi-2"><img src="img/icons/Youtube.png" width="64" height="64" alt="" /></div><div style="clear:both"></div>
</div>

Vertikale Klappbox, feststehend.

Diese Seite ist nur ein Design-Versuch (Entwurf)!
Alle Funktionen dienen nur ihrer versuchsweisen Darstellung. Es bestehen keine Rechte auf Aus- führung.
Script und Umsetzung durch Jürgen Schönbier

www.schoenbier.de

Hier nur etwas Fülltext, um die erzwungene Scroll-Leiste auch anzuzeigen. Nur bei viel Text, welcher dann nicht mehr passt.

Raum für die diversen Script von BLOGGER

Raum für die diversen Script von FACEBOOK

Raum für die diversen Script von Twitter
Auch scrollbar.
Hier ein wenig Fülltext zum Ansehen.
(-;

Raum für die diversen Script von FACEBOOK

Raum für die diversen Script von ...