<html>
<head>
<style>
.sideelement{
position:fixed;
width:260px;
height:80px;
background: rgba(0, 0, 0, 0.6);
text-align: center;
vertical-align: middle;
line-height: 20px;
vertical-align:text-bottom;
text-decoration: none;
font-family: Tahoma, Arial, sans-serif;
font-weight: normal;
color: #f3f3f3;
text-shadow: 4px 4px 4px rgba(0,0,0,.6);
transition: width .5s, opacity .5s , background-color .5s;
-moz-transition: width .5s, opacity .5s , background-color .5s;
-webkit-transition: width .5s, opacity .5s , background-color .5s;
-o-transition: width .5s, opacity .5s , background-color .5s;
}
.sideelement:hover
{
width:400px;
cursor:pointer;
background: rgba(240, 50, 80, 0.6);
}
</style>
<script language="javascript">
function dothat()
{
var div = document.getElementById('me');
if(div.style.width == '400px')
{
div.style.background="rgba(0, 0, 0, 0.6)";
div.style.width = '260px';
}
else
{
div.style.background="rgba(240, 50, 80, 0.6)";
div.style.width = '400px';
background: rgba(240, 50, 80, 0.6);
}
}
</script>
</head>
<body>
<div class="sideelement" id="me">
<div onclick="dothat();">
click me
</div>
</div>
</body>
</html>
