Adding cross-browser drop shadow to sub menus....

Poster: jrs
Dated: Monday April 3 2006 - 12:29:13 BST

I was trying to work out my own version of pop-up menus when I found Milonic. I had set up a script to create a dropshadow in IE by using two DIV elements (one for the menu and one for the shadow). The shadow DIV used a blur filter to create the blurred shadow and used the CSS z-index property to put it behind the menu DIV.

In FF, I used a CSS class that added a shadow to the DIV using an image. The CSS code is below:

/*
* TITLE: Transparent Rounded Drop Shadow
* URI: http://81100.eu.org/em/shadow/shadow.css
* CREATED: Wed, 27 Jul 2005 18:58:42 +0200
* MODIF: Wed, 27 Jul 2005 18:58:50 +0200
* Inspired by the technique presented by Alessandro
* (http://web-graphics.com/mtarchive/001589.php) and the one called
* ":befTer Drop Shadow"
* (http://www.hszk.bme.hu/~hj130/css/befor ... nopos.html).
* This stylesheet adds a transparent (if the shadow image has an alpha
* channel) drop shadow with rounded corners to the selected block elements
* surrounded by a container <div> with class "shadow":
*
* <div class="shadow">
* <img src="foo.jpg" />
* </div>
*
* KNOWN BUGS:
* - Mozilla 1.7 (probably other versions also) has a bug with non-floated
* elements: at the end of the file there is a simple workaround which
* you can enable as you need.
*/

/* The shadow */
div.shadow {
float:left;
display: block;
background: url(shadow.png) no-repeat bottom right;
margin: 9px 0 0 9px;
}

/* The top-right corner of the shadow */
div.shadow:before {
content:"";
background: url(shadow.png) no-repeat top right;
margin: -9px 0 0 0;
display:block;
height: 9px;
}

/* The bottom-left corner of the shadow */
div.shadow:after {
content: "";
background: url(shadow.png) no-repeat bottom left;
/*This line changes the bottom of the shadow (first number) */
margin: -30px 0 0 -9px;
display: block;
width: 9px;
height: 30px;
}

/* The item with the shadow */
div.shadow > * {
margin:0;
display: block;
position: relative;
top: -9px;
left: -9px;
}

/* Workaround for a bug in Mozilla 1.7 (1.7.10-1 Debian)
*
* For non-floated elements the div.shadow will extend to contain
* the whole :before rect, which has negative margins and should
* be put instead outside it's parent. Putting a border around the
* div seems to fix the problem.
*
* Enable the following rule if you want to use non floated content.
*/

/*
div.shadow { border: 0.1px solid transparent; }
*/

I tried to do this with Milonic menus (I'm using the "Unlimited Number of Levels" sample menu licensed to me), but it didn't come out right.

So, I have two questions. One, how do I had a blurred (feathered) drop shadow to the menu in IE, and how can I do this in FF (in other words, how can I get my CSS to effect only the menu DIV and not each individual table cell.

Re: Adding cross-browser drop shadow to sub menus....

Poster: John
Dated: Monday April 3 2006 - 15:24:56 BST


Therein lies the biggest problem. Since the menu system uses its own divs, it doesn't like being cooped up in divs from the 'outside'.

Your license does not cover just one sample, rather, it covers the entire menu system. The samples are just that - samples put together by Milonic to provide some ideas on how the menu can be utilized. You are free to use any, all, none, or make up your own menu.

The menu uses outfilter= and overfilter= items in the style to create a variety of effects. However, these are all IE-only items. See here. You're on your own in FF, but no divs!

Poster: jrs
Dated: Monday April 3 2006 - 20:07:14 BST

I guess I should have been more clear. I began trying to make my own pop-up menu system that used dynamically generated/created DIVs and TABLEs to create the menus from a data file. I had some problems getting the menus to show and hide correctly, etc.

While searching on the Internet for help with this problem, I found Milonic. Now I am only using Milonic for my menus. I have scrapped the old system. However, I want to have dropshadows like I did before. I liked the look of those dropshadows.

I don't know how to use the overfilter and outfilter options. Where can I get more information about those?

As far as FF goes, if I had more information about the way Milonic creates the menus, I could probably figure something out. The way I did it in my own system was to create a DIV element that would hold the other DIVs and TABLEs for the pop-up menu. Then you set that main DIV to have the class "shadow" (see my first posting) and that CSS class creates the shadow using a PNG image. However, when I set "offclass" and "onclass" in the menustyle options, I got some weird results.

So, my question (as I said before), is there a main DIV element that all the other menu elements (e.g. separators, tables, etc.) are loaded into? Is there a setting to change the class of that element? If so, I could get my shadows to work.

Poster: jrs
Dated: Tuesday April 4 2006 - 5:48:17 BST

OK. I did a little looking in FF's DOM Inspector. I see several DIV elements with id="menu0" or "menu1", etc. The class for these DIVs is "mmenu". Maybe I am wrong, but I am thinking that if I could change the declaration for "mmenu" to include the shadow elements mentioned in my first posting, it might work in FF. Unfortunately, I can't find any delcaration of class "mmenu" in the DOM or in the scripts. I can't find the declaration for the class "milonictable" either. Can you tell me where these classes are defined? If so, I would like to edit the definition to include the shadow elements. Please tell me what you think.

Poster: Ruth
Dated: Tuesday April 4 2006 - 17:36:19 BST

Hi jrs,

I know that others have created that effect using images and ignoring the over/out filter options for IE.

If you could post your page so we can see what's up we might be able to figure out something for you, either with css or with images.

One example of such a menu with images and dropshadows is http://www.vikenk.com/ all the drop shadows right and bottom are just part of the images in the menu.

Also, for more over/out filter options for IE, which do not appear in other browsers but also don't interfere with how the menu works in them try the Interactive Filters Demo

Ruth