Mobile Friendly Website

CSSPLAY

Doing it with style

CSS MENUSSliding Tab Menu

Date : Pre 2006

For all modern browsers


This demo is too wide for your mobile screen.
Please view on a tablet or PC.



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

HTML Code

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

You may use this method on your personal 'non-profit' web site without seeking my permission.
A link back to CSS PLAY 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 CSS PLAY.

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.


Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page