FXsinus.com HOME
The DHTML Menu - reloaded

Pop Up DHTML Menu Sample with Relative Positioning

Home FX Menu Support Links Archive
This sample shows how to add submenus to the text flow to provide additional information or related  links to your visitors. Tooltip Positioning is also available for absolute positioned menus and doesn't necessarily require an <a> tag.
The difference between this sample and the pop-up sample with tooltip positioning is that here the submenu is fixed to an image (black box). Instead of the black box you can use an empty image with: width=1 and height=1. The position of the submenus can be adjusted by using "left" and "top".
View the source code at the bottom of this page.
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=20;
color="#000000";
coloron="#FFFFFF";
bgcolor="#E8E8FF";
bgcoloron="#6699CC";
fontsize="8pt";
fontfamily="Verdana,Arial";
paddingtop=1;
paddingleft=3;
arrow="image/nav/arrowblack11.gif";
arrowon="image/nav/arrowwhite11.gif";
arrowright=20;
arrowtop=1;
}

with(menuStyle=new fxmenustyle()){
filterover="Alpha(opacity=90)";
menubgcolor="#E8E8FF";
menuborderwidth=1;
menubordercolor="#3366CC";
separatorsize=1;
separatorcolor="#3366CC";
highlightpath=true;
wiseposition=true;
left=5;
top=5;
}


/*Start Menu Declarations*/


with(new fxmenu("TooltipPositioningInfo")){
style=itemStyle;
menustyle=menuStyle;
width=125;
position="relative"
height=90;
fx("text=Add tooltips to your text or to important menu items to provide more information to your website visitors.;paddingleft=5;fontfamily=Arial,Verdana;bgcolor=#FFFFFF;url=index.html;type=header");
}


with(new fxmenu("OtherPositioningSamples")){
style=itemStyle;
menustyle=menuStyle;
width=225;
position="relative"
height=19;
orientation="vertical"
fx("text=All Positioning Samples;url=html/purchase.html;fontweight=bold;type=header");
fx("text=Absolute Positioning;url=menu/samples/absolute.html;");
fx("text=Relative Positioning (to a table cell);color=#FF0000;url=menu/samples/relative.html;");
fx("text=Pop Up with Absolute Positioning;url=menu/samples/popupabsolute.html;");
fx("text=Pop Up with Relative Positioning;url=menu/samples/popuprelative.html;");
fx("text=Pop Up with Tooltip Positioning;url=menu/samples/popuptooltip.html;");
fx("text=Absolute Positioned Submenus;url=menu/samples/submenuabsolute.html;");
fx("text=Tooltip Positioned Submenus;url=menu/samples/submenutooltip.html;");
}



with(new fxmenu("FX Menu")){
style=itemStyle;
menustyle=menuStyle;
width=190;
fx("text=Menu Version Information;url=html/fxversion.html;");
fx("text=Menu Reference Guide;show=Reference;");
fx("text=FAQ;url=html/faq.html;");
fx("text=Browser Compatibility;url=menu/compatibility/browsers.html;");
fx("text=Accessibility;url=menu/accessibility/accessiblemenus.html;");
fx("text=Menu Samples;show=MenuSamples;");
fx("text=Professional Webdesigners;url=menu/professional/index.html;");
fx("text=License & Purchase;url=html/purchase.html;");
fx("text=Download;url=menu/download/index.html;");
}

with(new fxmenu("Archive")){
style=itemStyle;
menustyle=menuStyle;
width=190;
fx("text=Complete Archive Sitemap;url=html/sitemapar.html;");
fx("text=Minesweeper Tomse;url=dhtml/minesweeper/index.html;");
fx("text=MX DHTML Wizard;url=dhtml/webmenus/index.html;");
}

with(new fxmenu("Reference")){
style=itemStyle;
menustyle=menuStyle;
width=140;
left=-2;
fx("text=Global Variables;url=menu/guide/index.html;");
fx("text=Style Properties;url=menu/guide/style.html;");
fx("text=Menu Properties;url=menu/guide/menu.html;");
fx("text=Item Properties;url=menu/guide/item.html;");
}

with(new fxmenu("Links")){
style=itemStyle;
menustyle=menuStyle;
width=150;
fx("text=Quirksmode;url=http://www.quirksmode.org;target=blank;");
fx("text=Hotscripts;url=http://www.hotscripts.com/?RID=159568;target=blank;");
fx("text=Scriptsearch;url=http://www.scriptsearch.com;target=blank;");
fx("text=Codepedia;url=http://www.codepedia.com;target=blank;");
fx("text=W3C;url=http://www.w3c.org;target=blank;");
fx("text=Webfx;url=http://webfx.eae.net;target=blank;");
fx("text=Topshareware;url=http://www.topshareware.com;target=blank;");
}

with(new fxmenu("Support")){
style=itemStyle;
menustyle=menuStyle;
width=150;
fx("text=E-mail;url=html/support.html;");
fx("text=Discussion Forum;url=forums/index.php;target=blank;");
}

with(new fxmenu("MenuSamples")){
style=itemStyle;
menustyle=menuStyle;
width=270;
left=-2;
overflow="scroll";
fx("text=Text Based Menu Samples;type=header;bgcolor=#FFFFFF;fontweight=bold;");
fx("text=Horizontal Menu;url=menu/samples/horizontal.html;");
fx("text=Vertical Menu;url=menu/samples/vertical.html;");
fx("text=Windows 98;url=menu/samples/windows98.html;");
fx("text=Windows XP;url=menu/samples/windowsxp.html;");
fx("text=Multiple Style;url=menu/samples/multiplestyle.html;");
fx("text=Multiple Colored Menus;url=menu/samples/multiplecolors.html;");
fx("text=Image Based Menu Samples;type=header;bgcolor=#FFFFFF;fontweight=bold;");
fx("text=Image Based Menu;url=menu/samples/imagebased.html;");
fx("text=Image Map Based Menu;url=menu/samples/imagemap.html;");
fx("text=Background - Images (LOTR);url=menu/samples/background.html;");
fx("text=Positioning Samples;type=header;bgcolor=#FFFFFF;fontweight=bold;");
fx("text=Absolute Positioning;url=menu/samples/absolute.html;");
fx("text=Relative Positioning (to a table cell);color=#FF0000;url=menu/samples/relative.html;");
fx("text=Pop Up with Absolute Positioning;url=menu/samples/popupabsolute.html;");
fx("text=Pop Up with Relative Positioning;url=menu/samples/popuprelative.html;");
fx("text=Pop Up with Tooltip Positioning;url=menu/samples/popuptooltip.html;");
fx("text=Absolute Positioned Submenus;url=menu/samples/submenuabsolute.html;");
fx("text=Tooltip Positioned Submenus;url=menu/samples/submenutooltip.html;");
fx("text=Functionality Samples;type=header;bgcolor=#FFFFFF;fontweight=bold;");
fx("text=JavaScript Functions;url=menu/samples/javascript.html;");
fx("text=Opening windows & targeting (i)frames;url=menu/samples/targetframe.html;target=blank;");
fx("text=Flickthrough Menu;url=menu/samples/flickthrough.html;");
fx("text=Show/Hide Submenus Onclick;url=menu/samples/showhideclick.html;");
fx("text=Item Sizing;url=menu/samples/itemsizing.html;");
fx("text=Item Positioning;url=menu/samples/itemposition.html;");
fx("text=Scrolling (overflow);url=menu/samples/overflow.html;");
fx("text=Tables (columns);url=menu/samples/tablemenu.html;");
fx("text=API Functions & Methods;url=menu/samples/api.html;");
fx("text=Displaying Multiple Submenus;url=menu/samples/multiplesubs.html;");
}

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