How to add drop shadow to the current element in a tab menu?

Question

I've got a tabbed menu that looks something like this:

The html for it is simple:

 <div id="menuContainer">
    <ul id="menu" class="undecorated ">
        <li id="menuHome"><%= Html.ActionLink<HomeController>(c=>c.Index(), "Home") %> </li>
        <li id="menuAbout"><%= Html.ActionLink<UsergroupController>(c=>c.About(), "About") %> </li>
        <li id="menuArchives"><%= Html.ActionLink<UsergroupController>(c=>c.Archives(), "Archives") %> </li>
        <li id="menuLinks"><%= Html.ActionLink<UsergroupController>(c=>c.Links(), "Links") %> </li>
    </ul>
    <div id="menuBar" class="container">&nbsp;</div>
 </div>

And the JQuery:

$(function() {
    $('.container').corner();
    $('ul#menu li').corner('30px top');
});

and on each page something like:

$(function() {
    $('#menuHome').addClass('current')
 })

I would like to indicate the "current" tab with a drop shadow behind it. I am thinking I would do this by

1. Create a shadow 'li' with $('.current').after('&nbsp
')
2. Use CSS to set the shadow color and round the top right corner with jquery
3. Shift it over with CSS position: relative; top: 5px; left: -5px;

The problem that I am having is that the shadow appears on top of the element to the left. Setting its z-index low makes it disappear altogether for some reason. How do I make it appear behind the previous list-item?

Alternatively, what's a better way to do this?

Answer 1

I think you might want to consider using the CSS box-shadow technique. Mozilla and Webkit have implemented it, and box-shadow is in the CSS3 specs so someday it should be widely adopted. There is also a box-shadow filter for IE, but I don't know if it displays a very good look shadow. However, if you used this technique, it would be much more efficient. Although it wouldn't work in EVERY browser, it would give a similar effect for most of your users.

Here's a link to some more details about it: http://www.css3.info/preview/box-shadow/

Here's some information on IE filters (very under-utilized):http://www.ssi-developer.net/css/visual-filters.shtml

If you are looking for a shadow around the entire image, consider using the IE glow filter instead of the dropshadow.

Here's some sample CSS to work with if you want to try this technique.

div#someID {
box-shadow: 10px 10px 5px #888;
-moz-box-shadow: #888 10px 10px 5px;
-webkit-box-shadow: #888 10px 10px 5px;
FILTER: DropShadow(Color=#888, OffX=5, OffY=-3, Positive=1);
}

Answer 2

Apply this style to the current tab (not shadow):

{
    position: relative;
    z-index:2;
}

And this to the shadow

{
    position: relative;
    z-index:1;
}

Answer 3

I suspect the way .corner(); works is by drawing hundreds of 1px divs that are the same color as what's behind them. At the very least, the shadow needs to be .corner()ed first. If this still doesn't work, then in fact .corner() just takes the background color (white).

Answer 4

I messed around with this and ended up adding the following (note: I set Archives to current to see it better)

CSS

.shadow {
 background-color: #333;
 border-color: #333;
 z-index: -1;
 position: absolute;
 opacity: 0.7;
 filter: alpha(opacity=70);
}

jQuery

$(function() {
    $('#menuArchives').addClass('current');
    $('#menu').after('<div class="shadow"></div>');
    var c = $('.current');
    var widthoffset = 50;
    var heightoffset = 20;
    var topoffset = -4;
    var leftoffset = -2;

    $('.shadow').css({
     width : c.width() + widthoffset + 'px',
     height : c.height() + heightoffset + 'px',
     top : c.offset().top + topoffset + 'px',
     left : c.offset().left + leftoffset + 'px'
    }).corner('30px top');
 })

You can mess around with the variables a bit to get the shadow where you want it :P

Edit: It doesn't appear to work in IE, but then a few other parts are off as well... I'll look at it some more Edit2: Ok, I got it to work in IE, but it's obvious now that the corners are made by a bunch of div's and the background doesn't match up - it looks fine in FF and Chrome