Control Panel Flyout Menu Windows Animations
Using the code examples below you can see how control panel menu flyout windows are animated into view using your custom control panel button. We use a combination of simple CSS and JavaScript to make the magic happen very easily.
Example 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Control Panel Flyout Windows Tutorial</title>
<style>
#cpBtn{
position: fixed;
right: 20px;
width: 20px;
height: 24px;
background: linear-gradient(#FFF,#DDD);
border: #AAA 1px solid;
border-radius: 2px;
padding: 2px 5px;
cursor: pointer;
transition: border 0.3s linear 0s;
}
#cpBtn:hover{
border: #06F 1px solid;
}
#cpBtn:hover div{
background: #06F;
}
#cpBtn > div{
width: 20px;
height: 4px;
background: #333;
margin: 3px 0px;
border-radius: 4px;
transition: background 0.3s linear 0s;
}
#cp{
position: fixed;
right: -260px;
top: 50px;
width: 260px;
height: 400px;
background: #DDD;
opacity: 0;
transition: opacity 0.3s linear 0s, right 0s linear 0s;
cursor: pointer;
}
</style>
<script>
function toggleCP(){
var cp = document.getElementById("cp");
if(cp.style.opacity == 1){
cp.style.opacity = 0;
cp.style.right = "-260px"; // remove it from active screen space
} else {
cp.style.right = "0px"; // return it to active screen space
cp.style.opacity = 1;
}
}
</script>
</head>
<body>
<div id="cpBtn" onclick="toggleCP()">
<div></div>
<div></div>
<div></div>
</div>
<div id="cp"></div>
<div id="page_content">
<script>
for(var i = 0; i < 40; i++){ document.write("<h2>"+(i+1)+". Dummy page content ... </h2>"); }
</script>
</div>
</body>
</html>
Example 2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Control Panel Flyout Windows Tutorial</title>
<style>
#cpBtn{
position: fixed;
right: 20px;
width: 20px;
height: 24px;
background: linear-gradient(#FFF,#DDD);
border: #AAA 1px solid;
border-radius: 2px;
padding: 2px 5px;
cursor: pointer;
transition: border 0.3s linear 0s;
}
#cpBtn:hover{
border: #06F 1px solid;
}
#cpBtn:hover div{
background: #06F;
}
#cpBtn > div{
width: 20px;
height: 4px;
background: #333;
margin: 3px 0px;
border-radius: 4px;
transition: background 0.3s linear 0s;
}
#cp{
position: fixed;
right: -260px;
top: 60px;
width: 260px;
height: 0px;
background: #333;
transition: right 0.3s linear 0s;
}
</style>
<script>
function toggleCP(){
var cp = document.getElementById("cp");
cp.style.height = window.innerHeight - 60+"px";
if(cp.style.right == "0px"){
cp.style.right = "-260px";
} else {
cp.style.right = "0px";
}
}
</script>
</head>
<body>
<div id="cpBtn" onclick="toggleCP()">
<div></div>
<div></div>
<div></div>
</div>
<div id="cp"></div>
<div id="page_content">
<script>
for(var i = 0; i < 40; i++){ document.write("<h2>"+(i+1)+". Dummy page content ... </h2>"); }
</script>
</div>
</body>
</html>