CSS

play

Experiments with Cascading Style Sheets

Sliding Tab Menu

Pre 2006

copyright © stu nicholls - CSS play

Information

This one is the result of helping Brian with a tabbed menu problem. It also stays in shape when the text is resized.

The should work in IE5.01 (static image), IE5.5, IE6, Opera 7.54, Mozilla 1.75, FF and NN 7.1. Also Mac Safari and IE5.

Cascading Style Sheet

#menu {
  margin:0; 
  padding:0; 
  height:32.5em; 
  overflow:hidden; 
  background:#f0f0f0;
  }
#menu li {
  list-style-type:none; 
  float:left; 
  display:block; 
  width:100%;
  }
#menu li a {
  display:block; 
  text-decoration:none; 
  color:#00b; 
  margin:0; 
  width:100%;
  }
#menu li a span {
  display:none; 
  color:#000;
  }
#menu li a.one span {
  display:block; 
  height:15em; 
  margin:0 10px;
  }
#menu li a:hover {
  background:#f1f1f1;
  }
#menu li a:hover span {
  display:block; 
  height:15em; 
  margin:0 10px; 
  cursor:pointer;
  }
#menu .h2 {
  margin:0 5px; 
  padding:0; 
  color:#808; 
  font-variant:small-caps; 
  font-size:1.5em; 
  border:0;
  }
#menu .h3 {
  margin:0 5px; 
  padding:0; 
  font-size:1.1em; 
  color:#00b;
  }
#menu img {
  margin:5px 5px 5px 0; 
  border:1px solid #000; 
  float:left;
  }
.curved {
  width:21em;
  }
.curved .b1, .curved .b2, .curved .b3, .curved .b4  {
  font-size:1px; 
  display:block; 
  background:#88c;
/* hide overflow:hidden from IE5/Mac */ 
/* \*/ 
overflow: hidden; 
/* */ 
}
.curved .b1, .curved .b2, .curved .b3 {
  height:1px;
  }
.curved .b2, .curved .b3, .curved .b4 {
  background:#f0f0f0; 
  border-left:1px solid #88c; 
  border-right:1px solid #88c;
  }
.curved .b1 {
  margin:0 4px; 
  background:#88c;
  }
.curved .b2 {
  margin:0 2px; 
  border-width:0 2px;
  }
.curved .b3 {
  margin:0 1px;
  }
.curved .b4 {
  height:2px; 
  margin:0;
  }
.curved .c1 {
  margin:0 5px; 
  background:#88c;
  }
.curved .c2 {
  margin:0 3px; 
  border-width:0 2px;
  }
.curved .c3 {
  margin:0 2px;
  }
.curved .c4 {
  height:2px; 
  margin: 0 1px;
  }
.curved .boxcontent {
  display:block; 
  background:transparent; 
  border-left:1px solid #88c; 
  border-right:1px solid #88c; 
  font-size:0.9em; 
  text-align:justify;
  }

xhtml

<div class="curved">
 <b class="b1 c1"></b>
 <b class="b2 c2"></b>
 <b class="b3 c3"></b>
 <b class="b4 c4"></b>
  <div class="boxcontent">
   <ul id="menu">
    <li>
     <a class="m5 five" href="#nogo">
      <b class="h2">Paul Cézanne</b><br />
      <b class="h3">(1839-1906)</b>
      <span>
       <img src="../img/cezanne.jpg" alt="painting" 
       title="painting" />
       The French painter who exhibited little in his 
       lifetime and pursued his interests increasingly 
       in artistic isolation, is regarded today as one 
       of the great forerunners of modern painting.
      </span>
     </a>
    </li>
    <li>
     <a href="#nogo">
      <b class="b1"></b>
      <b class="b2"></b>
      <b class="b3"></b>
      <b class="b4"></b>
      <b class="h2">Henri Matisse</b><br />
      <b class="h3">(1869-1954)</b>
      <span>
       <img src="../img/matisse.jpg" alt="painting" 
       title="painting" />
       Initially planned a career as a lawyer. However, 
       he began to paint after an acute attack of 
       appendicitis and then proceeded to become 
       a leader in many art circles.
      </span>
     </a>
    </li>
    <li>
     <a href="#nogo">
      <b class="b1"></b>
      <b class="b2"></b>
      <b class="b3"></b>
      <b class="b4"></b>
      <b class="h2">William Turner</b><br />
      <b class="h3">(1775-1851)</b>
      <span>
       <img src="../img/turner.jpg" alt="painting" 
       title="painting" />
       This English painter was one of the greatest 
       romantic interpreters of nature in the history 
       of Western art and is still unrivaled in 
       the virtuosity of his painting of light.
      </span>
     </a>
    </li>
    <li>
     <a href="#nogo">
      <b class="b1"></b>
      <b class="b2"></b>
      <b class="b3"></b>
      <b class="b4"></b>
      <b class="h2">John Constable</b><br />
      <b class="h3">(1776-1837)</b>
      <span>
       <img src="../img/constable.jpg" alt="painting" 
       title="painting" />
       Tried to capture informally the effects of changing 
       light and the patterns of clouds moving across the 
       country sky. He loved the countryside, and his best 
       work was of outdoor scenes in his native Suffolk.
      </span>
     </a>
    </li>
    <li>
     <a class="one" href="#nogo">
      <b class="b1"></b>
      <b class="b2"></b>
      <b class="b3"></b>
      <b class="b4"></b>
      <b class="h2">Claude Monet</b><br />
      <b class="h3">(1840-1926)</b>
      <span>
       <img src="../img/monet.jpg" alt="painting" 
       title="painting" />
       Monet's concern was to reflect the influence of 
       light on a subject. He never abandoned his Impressionist 
       painting style until his death in 1926 when Fauvism and 
       Cubism were en vogue and when abstract painting came 
       into existence.
      </span>
     </a>
    </li>
   </ul>
  </div>
 <b class="b4 c4"></b>
 <b class="b3 c3"></b>
 <b class="b2 c2"></b>
 <b class="b1 c1"></b>
</div>

Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.