Stu Nicholls | CSSplay | CSS filing cabinet

Information

Based on an idea by 'Brian' this is a simple tab menu system (unordered list). When your mouse is hovered over the tabs the 'hover area increases to show the content of the list items.

The other tabs are still available for selection even though the full size tab covers the area occupied by these other tabs.

Cascading Style Sheet

#info ul {
  margin:4em auto; 
  padding:0; 
  position:relative; 
  width:300px; 
  height:169px; 
  background:#fff url(../img/cabinet.gif); 
  z-index:1; 
  }
#info li {
  list-style-type:none; 
  width:100px; 
  height:18px;
  }
#info a {
  display:block; 
  width:100px; 
  height:0; 
  color:#000; 
  text-decoration:none; 
  padding-top:18px; 
  background:transparent; 
  overflow:hidden; 
  z-index:20;
  }
* html #info a {
  height:18px; 
  he\ight:0;
  }
#info a span {
  padding:5px; 
  display:block;
  }
#info a span:first-line {
  font-size:1.5em; 
  font-weight:bold;
  }
#info a#menuone {
  position:absolute; 
  left:0; 
  top:0; 
  background:url(../img/tab1.gif) no-repeat 0 20px;
  }
#info a#menutwo {
  position:absolute; 
  left:100px; 
  top:0; 
  background:url(../img/tab2.gif) no-repeat 0 20px;
  }
#info a#menuthree {
  position:absolute; 
  left:200px; 
  top:0; 
  background:url(../img/tab3.gif) no-repeat 0 20px;
  }
#info a#menuone:hover,
#info a#menutwo:hover,
#info a#menuthree:hover {
  background-position:0 0;
  top:-131px; 
  left:0; 
  height:131px; 
  width:300px; 
  z-index:10;
  }
* html #info a#menuone:hover,
* html #info a#menutwo:hover,
* html #info a#menuthree:hover {
  height:149px; he\ight:131px;
  }
#info img {
  float:right; 
  border:0; 
  margin:10px;
  }

xhtml

<ul>
  <li>
    <a id="menuone" href="#nogo1">
      <img src="../img/beans.gif" title="beans on toast" 
	  alt="beans on toast" />
      <span>Beans on Toast<br />
      1. Cut a slice of bread.<br />
      2. Toast the bread.<br />
      3. Warm up the beans.<br />
      4. Put the beans on the bread and serve.
      </span>
    </a>
  </li>
  <li>
    <a id="menutwo" href="#nogo2">
      <img src="../img/eggs.gif" title="scrambled eggs" 
	  alt="scrambled eggs" />
      <span>Scrambled eggs.<br />
      1. Break the eggs into a bowl.<br />
      2. Beat them up.<br />
      3. Heat with butter and milk until solid.
      </span>
    </a>
  </li>
  <li>
    <a id="menuthree" href="#nogo3">
      <img src="../img/soup.gif" title="chicken soup" 
	  alt="chicken soup" />
      <span>Chicken Soup<br />
      1. Go to your local supermarket.<br />
      2. Buy a can of chicken soup.<br />
      3. Open, pour into saucepan.<br />
      4. Heat and serve.
      </span>
    </a>
  </li>
</ul>

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.

Recommended Sites

SEO
First Rate - Australian SEO Company
web hosting, dedicated servers
web reseller, managed servers
Web design in Dorset
Bournmouth based web design agency
VPS Hosting
Virtuozzo VPS Hosting - $19.95/mo
Create Free Flash website
Create amazing websites with Wix.com
CSS Menus
A CSSplay develoment

"The web site uses
CSS Play code for the site drop down menus.
This code works seamlessly in IE 6 & 7, and is an excellent solution to the Creative requirements of the site."