Using Divides, CSS and Images to Create a Drop Shadow Menu
with Milonic Solutions' DHTML Menu V5
Drop shadows can be achieved to show in other than IE browsers by using divides, bgimages and css. If this is done, then shadow coding in the overfilter, if it is set, must be removed or IE will have a shadow below the shadow, since the 1st shadow is really images.

The information here is based on the above menu and submenus. All menus use divides=2. If you just want the menu files so you can see for yourself how it was done there is a download at the bottom.

About Divides
  1. Divides is set in the menu section, the same area as style=styleName
  2. Divides will divide a horizontal menu into rows and a vertical menu into columns.
  3. The division is based on the number set for the divide, divides=2 will give two rows or columns
  4. Horizontal divides=2; will split the original menu, i.e. 6 items, and put 3 in the top and bottom
  5. Vertical divides=2 creates columns with odd items in the 1st column, even in the second

Setting up the layout
  Space on the right and the bottom has to be created to provide for the shadow images. This is done by adding 'empty' items which become the 'containers' for these images. To do this
  • Count the number of items. In the above menu there are 6
  • Double the number of items and add 2 extra.
  • A 5 item menu needs 7 empty items added, a 6 item menu = 8 added.
  • Create the 8 'empty' aI strings - aI("image=blank.gif;type=header;");
  • Add divides=2 in the menu


    • original menu data new menu data

    with(milonic=new menuname("Main Menu")){
    alwaysvisible=1;
    orientation="horizontal";
    style=menuStyleH;
    top=10;
    left=10;
    aI("text=Home;url=http://www.milonic.com/;");
    aI("showmenu=Samples;text=Menu Samples;");
    aI("showmenu=Milonic;text=Milonic;");
    aI("showmenu=Partners;text=Partners;");
    aI("showmenu=Links;text=Links;");
    aI("showmenu=MyMilonic;text=My Milonic;");
    }
    with(milonic=new menuname("Main Menu")){
    alwaysvisible=1;
    orientation="horizontal";
    style=menuStyleH;
    top=10;
    left=10;
    divides=2
    aI("text=Home;url=http://www.milonic.com/;");
    aI("showmenu=Samples;text=Menu Samples;");
    aI("showmenu=Milonic;text=Milonic;");
    aI("showmenu=Partners;text=Partners;");
    aI("showmenu=Links;text=Links;");
    aI("showmenu=MyMilonic;text=My Milonic;");
    aI("image=blank.gif;type=header;");
    aI("image=blank.gif;type=header;");
    aI("image=blank.gif;type=header;");
    aI("image=blank.gif;type=header;");
    aI("image=blank.gif;type=header;");
    aI("image=blank.gif;type=header;");
    aI("image=blank.gif;type=header;");
    aI("image=blank.gif;type=header;");
    }
    You will need a 1px by 1px transparent image for these items. This is a 'safety' measure to make sure the item does not 'disappear' if nothing is in it and to allow setting item height and width. An image of the result would look something like this [without the borders] Space is now available to add the bgimages for the shadow

Creating and Sizing the Shadow Images

  1. 5 'shadow' images are needed, plus a 1x1 pixel transparent image


    1. The top right corner
    2. The bottom left corner
    3. the bottom right corner
    4. The middle bottom items
    5. A vertical middle items image for vertical menus
    6. A 1x1 pixel transparent image for the items which contain the shadow bgimages


  2. Size the width of the right side images is whatever width you want your shadow


  3. Size the height of the bottom images to the same as the width of the right images


  4. Special sizing


    1. The right top image should be 500+ pixels long
    2. The left bottom image should be very wide 1000+ or more


      • The reason for this is that a user may have a large font size for accessibility and sizing the respective images long and wide will prevent any blank area in the 'shadow'. In a horizontal menu larger fonts would increase the height of the top items so the top right corner needs to be very long. In a vertical menu the bottom left corner image needs to be wide to accomodate not only font size but the width of the longest item in that menu.


    The CSS Coding

    Seven classes need to be created.

    1. Two classes control the items which have content. These two classes is to emulate the menu's mouse off and on states. One class is enough if you don't want to change colors onMouseOver


    2. The other 5 classes are to control the shadow images


      1. Right corner top class
      2. Left corner bottom class
      3. Right corner bottom class
      4. A class for middle items of a horizontal menu
      5. A class for middle items of a vertical menu


    Each class would be called in the item(s) which it controls using the menu's offclass=className; onclass=className. In the off and on class calls for the shadow bgimages the class name would be the same i.e. offclass=leftTop;onclass=leftTop;

    The Menu Data File

    The style section of the data file would contain anything that might be wanted which isn't controlled by css. As an example, subimages. 
    with(menuStyleH=new mm_style()){
subimage="arrowdn.gif";
onsubimage="arrowdn_on.gif";
subimagepadding=2;
}
    In the menu section each item of each menu would also include the calls for the css classes pertaining to the item. For example

    aI("text=Home;url=http://www.milonic.com/;offclass=shadOff;onclass=shadOn;");
aI("text=Milonic;offclass=shadOff;onclass=shadOn;");
aI("text=Partners;offclass=shadOff;onclass=shadOn;");
aI("text=Links;offclass=shadOff;onclass=shadOn;");
aI("text=My Milonic;offclass=shadOff;onclass=shadOn;");
aI("image=blank.gif;type=header;offclass=rightCornerTop;onclass=rightCornerTop;");
aI("image=blank.gif;type=header;offclass=leftCornerBot;onclass=leftCornerBot;");
aI("image=blank.gif;type=header;type=header;offclass=midH;onclass=midH;");
aI("image=blank.gif;type=header;type=header;offclass=midH;onclass=midH;");
aI("image=blank.gif;type=header;type=header;offclass=midH;onclass=midH;");
aI("image=blank.gif;offclass=midH;onclass=midH;");
aI("image=blank.gif;type=header;offclass=rightCornerBot;onclass=rightCornerBot;");
}
    Things to Note

    1. You cannot use the menu's border property. This property puts a border around the full outside of the menu. That would put a border outside the shadow.
      2. To put what looks like a border around the menu 'inside' the shadow use css. Css puts a border around each item, equivalent to the menu's property offborder. But, with css you can code the border top right left bottom. This means you would need to create more than 2 classes for the content items since these are the only items around which you'd put the borders.

    2. If you have a very long submenu and set it to overflow=scoll the shadow is inside the scroll bar. There are two things you could do either create a separate menuStyle for that menu and don't apply divides or any css leaving the shadow off of it or the menu could be coded only for the bottom shadow. Don't use divides for this and add an item at the bottom only calling the class for the left bottom corner in it.


    3. You cannot use separators at all since these show up outside the items and break the shadow. Even if you tried to just put them into the content items, the corresponding bottom column, or right column for vertical menus, would have empty space. If you must have separators you could create an image and call it in the item, image=mysep.gif; imageposition=right; imagewidth=; imageheight=; and so on

    Download this sample. The zip file includes this page, the images, css file, menu file. Use your own Milonic program files. There are 3 sets of images. The bg2 set is used on this menu. The other sets, bg, and bg1 are different sizes which you may test. If you use them you will have to change your widths and height wherever they appear. For the bg_ images use 5, for the bg1 images use 4

©1998-2008 Milonic Solutions Ltd. UK Registered Company #4406835

DHTML Menu By Milonic JavaScript