Omni slide menu - add small icons?

[sark76]

Omni Slide Menu script - © John Davenport Scheuer
http://www.dynamicdrive.com/dynamici...lide/index.htm

Is it possible to add a gif icon next to each line of the submenu? For example a facebook icon next to the link for facebook. Nothing crazy, just a 25x25 icon. could someone offer a helping hand, im new to this site. These would be the the vertical menu, or menu#2 in the default ocde.

[sark76]

This code is a bit over my head but it would seem to have something to do with adding the img ref to this line in the mmenu.js file:


tb+='<td '+(i_tem==o.menuItems.length-1&&!o.wrapbar&&o.menupos!='top'? 'id="'+o.id+'lastrow" ' : '')+'colspan="'+(o.menuItems[i_tem][3]&&o.menuItems[i_tem][3]!==''? o.menuItems[i_tem][3] : o.d_colspan)+'"><a href="'+o.menuItems[i_tem][1]+'" target="'+(o.menuItems[i_tem][2]? o.menuItems[i_tem][2] : o.linktarget)+'">'+o.menuItems[i_tem][0]+'</a></td>'

maybe its not that simple...can anyone lend a helping hand?

[sark76]

gonna try to bump this one more time as it's been a week. sorry.

[jscheuer1]

That file isn't meant to be edited and hopefully doesn't have to be for your purposes.

In the menuItems.js file you can put the text you want to appear for each link and heading. I'd try putting an image tag in there. Or using css to add a background image.

For example, for menu[1] in the demo file it has:

menuItems:[ // REQUIRED!!
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
["Menu"], //create header
["Dynamic Drive", "http://www.dynamicdrive.com", ""],
["What's New", "http://www.dynamicdrive.com/new.htm",""],
["What's Hot", "http://www.dynamicdrive.com/hot.htm", ""],
["Message Forum", "http://www.dynamicdrive.com/forums", ""],
["Submit Script", "http://www.dynamicdrive.com/submitscript.htm", ""],
["Link to Us", "http://www.dynamicdrive.com/link.htm", ""],

Try adding:

menuItems:[ // REQUIRED!!
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
["Menu"], //create header
["<img src='some.gif' alt=''>Dynamic Drive", "http://www.dynamicdrive.com", ""],
["What's New", "http://www.dynamicdrive.com/new.htm",""],
["What's Hot", "http://www.dynamicdrive.com/hot.htm", ""],
["Message Forum", "http://www.dynamicdrive.com/forums", ""],
["Submit Script", "http://www.dynamicdrive.com/submitscript.htm", ""],
["Link to Us", "http://www.dynamicdrive.com/link.htm", ""],

Notice the use of single quotes for the image tag's attributes. I'm not sure if it will work, but it's worth a try.

Or using css, it's noted on the demo page that the links all have style hooks for any given menu. For menu[1], it's (from the source code for demo.htm):

#menu1 a {color:black;background-color:white;text-decoration:none;text-indent:1ex;}
#menu1 a:active {color:black;text-decoration:none;}
#menu1 a:hover {color:black;background-color:#FFFF99}
#menu1 a:visited {color:black;text-decoration:none;}

You could do like:

#menu1 a {color:black;background:white url(some.gif) center left no-repeat;text-decoration:none;text-indent:1ex;}
#menu1 a:active {color:black;text-decoration:none;}
#menu1 a:hover {color:black;background-color:#FFFF99}
#menu1 a:visited {color:black;text-decoration:none;}

There's also a method for using your own markup and/or styles. If all else fails, that may be employed. See:

http://www.dynamicdrive.com/dynamici...properties.htm

and use the design_mode: set to true to get the markup and css generated by the menu. You can then copy it and edit it as you please and then put it on your page. Set design_mode to false and set user_defined_markup: and/or user_defined_stylesheet: to true to use your markup and/or styles instead of the script's self generated ones.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[sark76]

That file isn't meant to be edited and hopefully doesn't have to be for your purposes.

In the menuItems.js file you can put the text you want to appear for each link and heading. I'd try putting an image tag in there. Or using css to add a background image.

For example, for menu[1] in the demo file it has:

menuItems:[ // REQUIRED!!
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
["Menu"], //create header
["Dynamic Drive", "http://www.dynamicdrive.com", ""],
["What's New", "http://www.dynamicdrive.com/new.htm",""],
["What's Hot", "http://www.dynamicdrive.com/hot.htm", ""],
["Message Forum", "http://www.dynamicdrive.com/forums", ""],
["Submit Script", "http://www.dynamicdrive.com/submitscript.htm", ""],
["Link to Us", "http://www.dynamicdrive.com/link.htm", ""],

Try adding:

menuItems:[ // REQUIRED!!
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
["Menu"], //create header
["<img src='some.gif' alt=''>Dynamic Drive", "http://www.dynamicdrive.com", ""],
["What's New", "http://www.dynamicdrive.com/new.htm",""],
["What's Hot", "http://www.dynamicdrive.com/hot.htm", ""],
["Message Forum", "http://www.dynamicdrive.com/forums", ""],
["Submit Script", "http://www.dynamicdrive.com/submitscript.htm", ""],
["Link to Us", "http://www.dynamicdrive.com/link.htm", ""],

Notice the use of single quotes for the image tag's attributes. I'm not sure if it will work, but it's worth a try.

Or using css, it's noted on the demo page that the links all have style hooks for any given menu. For menu[1], it's (from the source code for demo.htm):

#menu1 a {color:black;background-color:white;text-decoration:none;text-indent:1ex;}
#menu1 a:active {color:black;text-decoration:none;}
#menu1 a:hover {color:black;background-color:#FFFF99}
#menu1 a:visited {color:black;text-decoration:none;}

You could do like:

#menu1 a {color:black;background:white url(some.gif) center left no-repeat;text-decoration:none;text-indent:1ex;}
#menu1 a:active {color:black;text-decoration:none;}
#menu1 a:hover {color:black;background-color:#FFFF99}
#menu1 a:visited {color:black;text-decoration:none;}

There's also a method for using your own markup and/or styles. If all else fails, that may be employed. See:

http://www.dynamicdrive.com/dynamici...properties.htm

and use the design_mode: set to true to get the markup and css generated by the menu. You can then copy it and edit it as you please and then put it on your page. Set design_mode to false and set user_defined_markup: and/or user_defined_stylesheet: to true to use your markup and/or styles instead of the script's self generated ones.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

Awesome! Putting the image tag in worked perfectly! I never thought to try that. Didn't have to go the CSS route...thanks so much for the help jscheuer.