QuickMenuThe image based item add-on is pure CSS based and does not require JavaScript. Any menu item can be turned into an image based item by adding an ID to the items anchor tag and
Applying a simple CSS statement to the menu styles. Image based items may
optionally contain an associated rollover image which displays appropriate to the menus functionality (visible while the items child sub menus are visible).
To see a working sample of the image based item add-on view the "image_based.html" document source.
To see a working sample of the image based item add-on view the "image_based.html" document source.
First find the anchor tag in the structure for the menu item you wish to make image based. Add a unique ID of your choosing to the tag...
<a id="mitem0" href="#"></a>
Next, add the following cooresponding statment to the CSS styles for your menu.
#qm0 #mitem0 {background-image:url(images/imagebased_balance.gif);width:80px;height:80px;}
#qm0 #mitem0.qmactive {background-image:url(images/imagebased_balance_hl.gif);}
#qm0 #mitem0.qmactive {background-image:url(images/imagebased_balance_hl.gif);}
The 'mitem0' unique ID used in the sample above must match the ID placed on the anchor tag. The first line of the
statement defines the static image and dimensions for the item, which should match your image dimensions. The second line defines the rollover image to be displayed.
Depending on your specific needs you may want to remove padding, image positions, and repeat values on the main or sub menu items depending on where your item image is being used. These values may be globally applied in the styles or specifically applied directly in the first line of the sample statement for the static image above. If you wanted item images for the mains which don't repeat and fill their containers, you would add the following code to the main item styles...
Depending on your specific needs you may want to remove padding, image positions, and repeat values on the main or sub menu items depending on where your item image is being used. These values may be globally applied in the styles or specifically applied directly in the first line of the sample statement for the static image above. If you wanted item images for the mains which don't repeat and fill their containers, you would add the following code to the main item styles...
/*"""""""" (MAIN) Items """"""""*/
#qm0 a
{
color:#000000;
background-color:#ffffff;
font-family:Arial;
font-size:.8em;
text-decoration:none;
padding:0px;
border-style:none;
border-color:#dddddd;
border-width:1px;
background-repeat:no-repeat;
background-position:center center;
}
#qm0 a
{
color:#000000;
background-color:#ffffff;
font-family:Arial;
font-size:.8em;
text-decoration:none;
padding:0px;
border-style:none;
border-color:#dddddd;
border-width:1px;
background-repeat:no-repeat;
background-position:center center;
}
If you are experiencing unwanted space around the images, double check that there is no padding value or a zero value defined for the items...
/*"""""""" (MAIN) Items """"""""*/
#qm0 a
{
color:#000000;
background-color:#ffffff;
font-family:Arial;
font-size:.8em;
text-decoration:none;
padding:0px;
border-style:none;
border-color:#dddddd;
border-width:1px;
background-repeat:no-repeat;
background-position:center center;
}
#qm0 a
{
color:#000000;
background-color:#ffffff;
font-family:Arial;
font-size:.8em;
text-decoration:none;
padding:0px;
border-style:none;
border-color:#dddddd;
border-width:1px;
background-repeat:no-repeat;
background-position:center center;
}
The image based items are CSS background images, the image may
override or be overridden by background images defined for the parent items which are used as arrows to indicate child subs. If your images are not appearing, check the parent style settings, and remove any background image styles.
Item images are compatible with all browsers supported by QuickMenu!
Item images are compatible with all browsers supported by QuickMenu!