Menu G5 Examples: Using images in menu
.itemOff1 { width:116px; padding:0px 8px; background:url("images/bar_item.gif") repeat-y; text-align:center; background-color:#333333; }
.itemOn1 { cursor:default; width:116px; padding:0px 8px; background:url("images/bar_item.gif") repeat-y; text-align:center; background-color:#ffffff; }
.fontOff1 { font-family:verdana; font-size:10pt; line-height:24px; color:#ffffff; }
.fontOn1 { font-family:verdana; font-size:10pt; line-height:24px; color:#333333; }
.tagOff1 { width:8px; height:24px; float:right; background:url("images/tagRH.gif") no-repeat center; }
.tagOn1 { width:8px; height:24px; float:right; background:url("images/tagRN.gif") no-repeat center; }
.separator1 { background:url("images/bar_top.gif"); height:19px; }
.separator2 { background:url("images/bar_bottom.gif"); height:5px; }
.separator3 { background:url("images/bar_top2.gif"); height:5px; }
.pad2 { background:url("images/pad.gif") repeat-y; padding:0px 10px; }
.itemOff2 { width:120px; text-align:center; padding:0px 4px; border:1px solid; border-color:#c8e386 #a0b48a #a0b48a #c8e386; background-color:#b4c86e; }
.itemOn2 { cursor:default; width:120px; text-align:center; padding:0px 4px; border:1px solid; border-color:#336666; background-color:#99cccc; }
.fontOff2 { font-family:verdana; font-size:10pt; line-height:22px; color:#336666; }
.fontOn2 { font-family:verdana; font-size:10pt; line-height:22px; color:#ffffff; }
.tagOff2 { width:9px; height:22px; float:right; width:9px; height:22px; float:right; background:url("images/tagRN5.gif") no-repeat center; }
.tagOn2 { width:9px; height:22px; float:right; width:9px; height:22px; float:right; background:url("images/tagRH5.gif") no-repeat center; }
.separator { height:6px; }
.subpad3 { padding:0px 2px; background:url("images/subpad.gif") no-repeat top left; }
.itemOff3 { width:120px; height:22px; text-align:center; background:url("images/item.gif") no-repeat; }
.itemOn3 { cursor:default; width:120px; height:22px; text-align:center; background:url("images/itemOn.gif") no-repeat; }
.fontOff3 { font-family:verdana; font-size:8pt; line-height:21px; color:#ffffff; }
.fontOn3 { font-family:verdana; font-size:8pt; line-height:21px; color:#000000; }
.separatorT { background:url("images/item_top.gif") no-repeat; height:5px; }
.separatorB { background:url("images/item_bottom.gif") no-repeat; height:5px; }
.pad4 { border:1px solid #000000; padding:0px 2px; background-color:#ffffff; }
.itemOff4 { width:130px; border:1px solid #000000; text-align:left; background-color:#ffffff; }
.itemOn4 { width:130px; border:1px solid #000000; text-align:left; background-color:#6699cc; }
.fontOff4 { font-family:verdana; font-size:10pt; line-height:20px; padding:0px 2px; color:#000000; }
.fontOn4 { cursor:default; font-family:verdana; font-size:10pt; line-height:20px; padding:0px 2px; color:#ffffff; }
.iconOff4 { background:url("images/dot.gif"); width:6px; height:20px; float:left; background-color:#6699cc; }
.iconOn4 { background:url("images/dot.gif"); width:6px; height:20px; float:left; background-color:#ffffff; }
.separator4 { background-color:#ffffff; }
Menu G5 Examples: Using images in menu
yxScripts.com
To use images in menu is just about setting up the background images in the CSS classes for the menu pads, the menu items, the separators, the menu icons and the sub-menu tags.
Following are four examples, click to switch them on or off:
[switch]
[switch]
[switch]
[switch]
These menus are using the same menu content, which defines separators as the first item and the last item of each menu level.
For the first menu on the left side, we have the following images:
... background image for the first separator of the top-menu
... background image for the menu items
... background image for the first separator of the sub-menus
... background image for the last separator of the top-menu and sub-menus
For the second menu, we have the following image:
... repeating background image for the pad
For the third menu, we have the following images:
... background image for the first separator of a menu
... background image for the menu items at normal stage
... background image for the menu items at highlighted stage
... background image for the last separator of a menu
... background image for the sub-menu pad
And for the last menu on the right side, we just use a transparent GIF as the background image for the menu icons, then use different background colors for normal stage and highlighted stage.
[Back to index page]
# # #
