Listamatic / Eric Meyer's Panelise


Listamatic

オリジナル: Listamatic: Eric Meyer's Panelise

listamatic_panelise_1_1.gif

HTML

<div id="navcontainer">
  <ul id="navlist">
    <li id="active"><a href="#" id="current">Item one</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
    <li><a href="#">Item four</a></li>
    <li><a href="#">Item five</a></li>
  </ul>
</div>

CSS

#navlist
{
  padding: 1px;
  margin-left: 0;
  font: bold 12px Verdana, sans-serif;
  border: 2px solid;
  border-color: #AAA #666 #666 #AAA;
  background: #CCC;
  width: 13em;
}

#navlist li
{
  list-style: none;
  margin: 0;
  padding: 0.25em 1em;
  border: 1px solid;
  border-color: #FFF #AAA #AAA #FFF;
  text-align: center;
}

#navlist li a { text-decoration: none; }
#navlist li a:link { color: black; }
#navlist li a:visited { color: gray; }

ABOUT THE CODE

Some lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.