⚠ī¸ Warning ⚠ī¸ Deprecated Code! This video tutorial contains outdated code.
💡 If you wish to update it, any AI assistant will update the code for you in seconds.

Control Panel Flyout Menu Windows Animations

Published : November 17, 2014   •   Last Edited : November 24, 2025   •   Author : Adam Khoury
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>
▲