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

Answer 1

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 2

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 3

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 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