FXsinus.com HOME
The DHTML Menu - reloaded

Background - Image DHTML Menu Sample

This "Lord Of The Rings" DHTML menu sample shows how to improve the look of your menus with background - images and item images, instead of text.

The main menu backround-image is declared with: menubgimage="lotrbg.jpg".

Main menu items "The Films" and "The Legend" are set with image and imageon. For items, which contain images, paddingleft and paddingtop properties were declared as 0. Items' widths and heights were declared using the real width of each image to make them fit exactly. Though the "JoinTheRing" item works the same way, this image was placed with bgimage and bgimageon to show another property built into FX Menu.

With delcaring direction for submenus as up all submenus open above the items.

Some of the images used here were "borrowed" from lordoftherings.net without permission. Please contact the webmaster, if Peter Jackson wants this sample to be removed.
previous Image Map Based Sample nextAbsolute Positioning Sample
Discussion Forum
Download FX Menu
   »    License & Purchase
DHTML Menu Samples ::
 »  DHTML Menu Samples Overview
 »  Horizontal DHTML Menu Sample
 »  Vertical DHTML Menu Sample
 »  Windows 98 Style
 »  Windows XP Style
 »  Microsoft.com
 »  Multiple Styles
 »  Multiple Colored Menus
 »  Image Based Menu
 »  Image Map Based Menus
 »  Background Images (LOTR)
 »  Absolute Positioning
 »  Relative Positioning (to a table cell)
 »  Pop Up with Relative Positioning
 »  Pop Up with Absolute Positioning
 »  Pop Up with Tooltip Positioning
 »  Absolute Positioned Submenus
 »  Tooltip Positioned Submenus
 »  JavaScript Functions
 »  Opening Windows & Targeting (i)frames
 »  Flickthrough Menu
 »  Show/Hide Submenus OnClick
 »  Item Sizing
 »  Item Positioning
 »  Scrolling (overflow)
 »  Tables (columns)
 »  API - Methods & Functions
 »  Displaying Multiple Submenus

Menu Settings for this Sample Menu in input.js


ordernumber="";//Once you have licensed FX Menu, the order number will be sent to you by share-it!.

emptyimage="image/transparent.gif";// Transparent image in gif format.
showdelay=200;//Time delay before submenus are displayed. Unit is milliseconds.
hidedelay=800;//Time delay before submenus are hidden. Unit is milliseconds.

/*Start Style Declarations*/

with(itemStyle=new fxstyle()){
width=140;
height=17;
fontsize="8pt";
color="#CCCC66";
coloron="#000000";
bgcoloron="#CCCC99";
bgcolor=NN4?"none":"transparent";
fontfamily="Verdana,Arial";
paddingleft=3;
paddingtop=2;
arrowright=20;
arrowtop=1;
}

with(mainStyle=new fxmenustyle()){
filterover="GradientWipe(WipeStyle=2,motion='forward',duration=0.5);";
filterout="GradientWipe(WipeStyle=2,motion='reverse',duration=0.5);";
menuborderwidth=1;
menubordercolor="#FBDF95";
highlightpath=true;
wiseposition=true;
}

imageStyle=new cloneStyle(itemStyle);
imageStyle.paddingleft=0;
imageStyle.paddingtop=0;

with(new fxmenu("Lord Of The Rings")){
style=imageStyle;
menustyle=mainStyle
visible=true;
position="relative";
top=170;
left=59;
height=17;
orientation="horizontal";
menubgimage="image/lotr/lotrbg.jpg";
menumargin=10;
fx("image=image/lotr/thefilms.gif;imageon=image/lotr/thefilmson.gif;show=theFilms;width=116;top=120;");
fx("image=image/lotr/thelegend.gif;imageon=image/lotr/thelegendon.gif;show=theLegend;width=128;top=120;");
fx("bgimage=image/lotr/jointhering.gif;bgimageon=image/lotr/jointheringon.gif;show=joinTheRing;top=120;");
}

darkStyle=new cloneStyle(itemStyle);
darkStyle.bgcolor="#000000";


darkMenuStyle=new cloneStyle(mainStyle);
darkMenuStyle.separatorsize=1;
darkMenuStyle.separatorcolor="#FFFFFF";

with(new fxmenu("theFilms")){
style=darkStyle;
menustyle=darkMenuStyle
width=110;
menubgimage="image/lotr/subbg.jpg";
menumargin=4;
direction="up";
fx("text=The Story;");
fx("text=Behind the Film;");
fx("text=News & Events;");
fx("text=Exclusives;");
}

with(new fxmenu("theLegend")){
style=darkStyle;
menustyle=darkMenuStyle
width=120;
menubgimage="image/lotr/subbg.jpg";
menumargin=4;
direction="up";
fx("text=Galleries;");
fx("text=Downloads;");
fx("text=Explore the Epic;");
fx("text=Inside the Effects;");
}

with(new fxmenu("joinTheRing")){
style=darkStyle;
menustyle=darkMenuStyle
width=110;
menubgimage="image/lotr/subbg.jpg";
menumargin=4;
direction="up";
fx("text=Soundtrack;");
fx("text=Shop & Auction;");
fx("text=Community;");
fx("text=Partners;");
}

buildMenus();

Home | Forum | Link to us
FXsinus.com - Austria.
Vor der Bruck 15,
A-2770 Goodstone
 © Copyright 2001-2004 FXsinus.com, All Rights Reserved. webmaster@fxsinus.com