Recreate "Styles" drop down area of Office Ribbon?

Question

I am trying to recreate the "Styles" section of the Office ribbon: http://www.winsupersite.com/images/reviews/office2007_b2_06.jpg

I like how it starts out as only one row, then you can scroll through the rows, then click the arrow to expand all into a table like above. Does anyone have any ideas on how to recreate this whole interactivity??

Answer 1

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

<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>

JS

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";
}

...should get you started. It's got a few bugs you'll have to figure out:

• When to call contract()
• Button isn't positioned directly under scrollbar
• Button scrolls with content (and disappears)