Horizontal sliding menu
Tweet
Horizontal sliding menu
Information
Similar to the previous sliding tabs menu, but this one is horizontal (also uses opacity for browsers that understand).
The should work in IE5.01, 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;
width:45em;
height:8.5em;
overflow:hidden;
background:#000;
}
#menu li {
display:inline;
list-style-type:none;
}
#menu li a {
display:block;
float:left;
text-decoration:none;
margin:0;
}
#menu li a img {
opacity:0.7;
margin:0.5em;
border:0;
float:left;
}
#menu li a span {
display:none;
}
#menu li a:hover {
background:#000;
}
#menu li a:hover img {
opacity:1;
}
#menu li a:hover span {
width:11em;
color:#aaa;
display:block;
cursor:pointer;
float:left;
}
#menu .h2 {
margin:0 5px;
padding:0;
color:#fc0;
font-variant:small-caps;
font-size:1.25em;
border:0;
}
#menu .h3 {
margin:0 5px;
padding:0;
font-size:1.1em;
color:#0aa;
}
.outer {
background:transparent;
font-size:0.9em;
}
xhtml
<div>
<ul id="menu">
<li>
<a href="#nogo">
<img src="../img/cezanne.jpg" alt="painting" title="painting" />
<span>
<b>Paul Cézanne</b><br />
<b>(1839-1906)</b><br />
One of the great forerunners of modern painting.
</span>
</a>
</li>
<li>
<a href="#nogo">
<img src="../img/matisse.jpg" alt="painting" title="painting" />
<span>
<b>Henri Matisse</b><br />
<b>(1869-1954)</b><br />
Became a leader in many art circles.
</span>
</a>
</li>
<li>
<a href="#nogo">
<img src="../img/turner.jpg" alt="painting" title="painting" />
<span>
<b>William Turner</b><br />
<b>(1775-1851)</b><br />
Unrivaled in the virtuosity of his painting of light.
</span>
</a>
</li>
<li>
<a href="#nogo">
<img src="../img/monet.jpg" alt="painting" title="painting" />
<span>
<b>Claude Monet</b><br />
<b>(1840-1926)</b><br />
Never abandoned his Impressionist painting style.
</span>
</a>
</li>
</ul>
</div>
No comments yet.