You have provided a bunch of requirements, but very little code.
For that reason, you get what I THINK you want. Modify to your heart's content.
I don't use youtube very often, so I'm not sure I understand the layout design.
The active state of each menu would be 'block' or 'none' in the following code.
Code:
<!DOCTYPE HTML>
<html>
<head>
<title> Untitled </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#menus { height:200px; width:200px; border:1px solid orange; }
#menu1 { display:block; }
#menu2 { display:none; }
</style>
</head>
<body>
<div id="menus">
<button onclick="toggleMenus('menu1')" style="float:left"> First </button>
<button onclick="toggleMenus('menu2')" style="float:right"> Second </button>
<br style="clear:both">
<div id="menu1">First menu display<br>
</div>
<div id="menu2">Second menu display<br>
</div>
</div>
<script type="text/javascript">
function toggleMenus(IDS) {
var sel = document.getElementById('menus').getElementsByTagName('div');
for (var i=0; i<sel.length; i++) { sel[i].style.display = 'none'; }
document.getElementById(IDS).style.display = 'block';
}
</script>
</body>
</html>
Good Luck!
