Javascript “重建”；“风格”；办公区的下拉区域？

我正在尝试重新创建Office ribbon的“样式”部分：

我喜欢它一开始只是一行，然后你可以滚动浏览这些行，然后单击箭头将所有内容展开到上面的表格中。有人对如何重新创建整个交互有什么想法吗？？？

CSS

#container { width:200px;height:50px;overflow-x:hidden;overflow-y:auto;
             border:1px solid black; position:relative }
#expander { position:absolute;right:0;bottom:0px;font-size:10px;margin:0;padding:1;
             border:1px solid black; border-width:1px 0 0 1px }
.item { float:left; font-size:30px;height:40px;width:50px;
         margin:5px; background:gainsboro;text-align:center }

HTML

…应该让你开始。它有一些bug，你必须弄清楚：

• 何时调用

  contract（）

• 按钮未直接位于滚动条下方
• 按钮随内容滚动（并消失）
CSS
HTML
…应该让你开始。它有一些bug，你必须弄清楚：
• 何时调用

  contract（）

• 按钮未直接位于滚动条下方
• 按钮随内容滚动（并消失）

<div id='container'>
  <div class='item'>A</div>
  <div class='item'>B</div>
  <div class='item'>C</div>
  <div class='item'>D</div>
  <div class='item'>E</div>
  <div class='item'>F</div>
  <div class='item'>G</div>
  <div class='item'>H</div>
  <div class='item'>I</div>
  <div class='item'>J</div>
  <div class='item'>K</div>

  <button id='expander' onclick='expand()'>&#9650;</button>
</div>

function $(id) { return document.getElementById(id); }

function expand() {
  $('container').style.overflow = "auto";
  $('container').style.height = "300px";
  $('container').style.width = "300px";
}

function contract() {
  $('container').style.overflow = "hidden";
  $('container').style.height = "50px";
  $('container').style.width = "200px";
}