XSitePro Website Design Software Message Board

So a few weeks ago someone asked about adding little icons to menu items. You responded with the clever little idea of adding some HTML in an unusual place:



I thought this was pretty darn nifty. But I couldn't get it to work for me. XSP chewed it to pieces on me; it turned the above HTML into:

Home<img&nbsp;src="images/yourimage.png"&nbsp;align="absbottom"hspace="5"&nbsp;border="0px">

which didn't work worth a darn, I can tell you.

So I went a little further around the barn and, in the Other->Global Scripts->In the HEAD section of the page tab I put:



The first line brings jQuery facilities into your web page from a CDN without having to download it ner nothin'. It's just right there, right now.

The "$(document).ready(function()" bit causes the script to execute when the DOM is done building but before the page is complete (before graphics and suchlike are all done).

The jQuery line attaches the image to ALL your menu items...even ones you add later.

The naughty bits you have to change to make this work on YOUR page are:

alongtheway.png - this has to be changed to YOUR image which you've loaded into the Resource Manager.
mainlinksINFO_BAR_MENU - this is the XSP assigned class for your menu. You will need to examine the output page code for the page your menu is on. Look right before any one of the menu items and you should find the equivalent entry for you to use.

Had it worked for me, the advantage/disadvantage (depending on your perspective) of your approach was it's simplicity and the fact that you could have a different graphic for each menu item. You CAN accomplish the same thing with MY method, but you'd have to use a slightly different jQuery selector and a similar statement for each one.

My technique does change all the menu items at once (in this example) to use the same graphic, all with one statement. AND it does open the door to changing ANY of the HTML ANYWHERE to more suit personal whim. AND you can fiddle with the CSS as well. With a little effort, you can get your paws on anything with this approach.

Any idea why your technique didn't work for me?

It didn't work because the Design editor "code-mangler" decided that it was "bad" code and "tidied" it up a bit.

When this kind of thing happens in XSitePro, you need to wrap the "bad" code in <nodesigner> </nodesigner> tags.

This will prevent the XSitePro Design editor from trashing your code. Without these tags, I would have abandoned XSitePro.

BTW, I like your JavaScript solution.

_________________
XSitePro runs great on HostGator (WordPress does, too)

In Jason's method, the icon would be visible in all menus. Sometimes that's not what you want. You might only want them in your Info Bar, for instance, but not in the Left Menu or the Footer Panel menu. If the JavaScript method could overcome that, we'd be laughing! I have started using AllWebMenus Pro for these types of solutions, but I'd be much happier if the solution was part of XSitePro.

_________________
Andrea Wilson

1. Custom XSitePro Templates. XSitePro Consulting and Training. FREE TIPS!

2. Off-the-Shelf XSitePro Templates! Versatile designs. Easy to manage and maintain!

3. AllWebMenus Pro and XSitePro Work Perfectly Together! NEW!

This really points to the need for Intellimon to update the menu options in XSitePro. The Milonic menu system was great in 2007, but now there are much better options, such as AllWebMenusPro.

Maybe they will update the menu system when they replace Pinedit

_________________
XSitePro runs great on HostGator (WordPress does, too)