Recréez la zone déroulante "Styles" du ruban Office?

Question

J'essaie de recréer la section « Styles » du ruban Office: http://www.winsupersite.com/images/reviews/office2007_b2_06.jpg

J'aime comment ça commence comme une seule ligne, vous pouvez faire défiler les lignes, puis cliquez sur la flèche pour développer tout en une table comme ci-dessus. Est-ce que quelqu'un a des idées sur la façon de recréer toute cette interactivité?

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

... devrait vous aider à démarrer. Il a un peu de bugs que vous aurez à comprendre:

• Quand appeler contract()
• bouton est placé directement sous la barre de défilement
• fait défiler des boutons avec le contenu (et disparaît)