Slide-Menü am Browserende

Führt den Mauszeiger auf das Bild am unteren, rechten Bildschirmrand.

CSS-Code

<style>
#menu {
	padding-top:5px;
	right:0;
	bottom:0;	
	position:fixed;
	width:200px;
	height:40px;
	z-index:1;
	transition: all 0.4s ease-in-out;
	}
#menu:hover {
	padding-top:15px;
	height:400px;
	width:100%;
	background:rgba(0, 0, 0, 0.8);
	}
</style>

Quellcode

<div align="center"> 
<div id="menu">

<!-- hier fügt ihr zB. ein Bild ein welches bereits vor dem Hover angezeigt werden soll -->
<img src="http://www.zella.de/code/bilder/social.png" alt="">

<!-- hier fügt ihr den Inhalt ein der während dem Hover angezeigt werden soll -->
<p><h1><span style="color: #ffffff">Überschrift H1</span></h1></p>
<p><h2><span style="color: #ffffff">Überschrift H2</span></h2></p>
<p><h3><span style="color: #ffffff">Überschrift H3</span></h3></p>
<p><span style="color: #ffffff">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</span></p>

</div>
</div>