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
- Complete travelguide to Phuket
- UK Game Server Hosting
- Free layouts and more - Myspace
- The Hotfix forum for windows
- Web design in Dorset
Bournmouth based web design agency - Host Color
Web Hosting for 30 Websites - web hosting, dedicated servers
web reseller, managed servers - pay as you go e-commerce
Build your own SEO friendly webshop
