On 12/23/2010 1:15 PM, Al Sparber wrote:
On 12/23/2010 12:14 PM, Gabriele Romanato wrote:
Hi!
Sometimes CSS is better than jQuery:
http://onwebdev.blogspot.com/2010/12/css-expanding-tabs-effect.html
HTH :-)
Very nice and I'm sure a lot of folks will find it very useful. As for
jQuery - it's the most misused, misunderstood, and abused script in the
history of the internet :-)
Something like this might work better - at least it does in Firefox,
Opera 11, Chrome, and IE8
body {
margin: 0;
padding: 0;
font: 100% Arial, Helvetica, sans-serif;
background: #fff;
color: #333;
}
#nav-wrapper {
border-bottom: 1px solid orangered;
overflow: hidden;
}
#navigation {
font-size: inherit;
margin: 1em 0;
padding: 0 0 0 1em;
list-style: none;
}
#navigation li {
float: left;
height: 100%;
margin-right: 0.5em;
}
#navigation a {
height: 1.5em;
line-height: 1.5;
display: block;
padding: .5em 1em;
text-decoration: none;
background: #d40;
color: #fff;
font-weight: bold;
-moz-border-radius: 6px 6px 0 0;
border-radius: 6px 6px 0 0;
margin-top: 0.5em;
}
#navigation a:hover {
background: orange;
height: 2em;
line-height: 2;
margin-top: 0;
}
Markup:
<div id="nav-wrapper">
<ul id="navigation">
<li><a href="#">Tab 1
</a>
</li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
<li><a href="#">Tab 4</a></li>
<li><a href="#">Tab 5</a></li>
<li><a href="#">Tab 6</a></li>
</ul>
</div>
--
Al Sparber - PVII
http://www.projectseven.com
Dreamweaver Menus | Galleries | Widgets
http://www.projectseven.com/go/hgm
The Ultimate Web 2.0 Carousel
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
