Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:24

Header Item with a link


Poster: FactorX
Dated: Thursday June 10 2004 - 16:13:24 BST

I've got a menu that uses headers at the top of each submenu, which are also links. Problem is that all of my header links dont open a new window like the regular menu items. Is there a way to do this without having to change the bgcolor / color for each of the item and also removing the header type.

Here is what im using now
Code:
aI("text=<b>Overview<b>;type=header;url=http://www.somesite.com/link.html;target=_blank;");


Should i be doing something like this instead?
Code:
aI("text=<b>Overview<b>;offbgcolor=#FFFFFF;offcolor=#000000;url=http://www.somesite.com/link.html;target=_blank;");


Poster: Maz
Dated: Thursday June 10 2004 - 17:41:04 BST

Have you tried global styles

headercolor=
headerbgcolor=

with type=header;

maz


Poster: FactorX
Dated: Thursday June 10 2004 - 19:10:58 BST

yes i have the headercolor and bgcolor set in my style that give the black text on a white background. But my issues it that even with the target=_blank; parameter in my aI line of the header item it still does not go to the link specified in a New Window. Just uses the current browser window. I have tested this in both IE6 and OP7.51


Poster: kevin3442
Dated: Friday June 11 2004 - 5:47:01 BST

Hi X,

Another approach would be to call a javascript function that opens a new window with the url you pass to it. A function like this (which you could put at the top of your menu_data.js file):
Code:
function openWindow(url, winName, attributes)
{
  newWin = window.open(url, winName, attributes);
}

In your header menu item, you would call that function. I've found that it can't be called using the item's url property (url=javascript:functionName()), but it does work using the items clickfunction property, like so:
Code:
aI("text=Web Search;pointer=arrow;type=header;clickfunction=openWindow('http://www.google.com/','Google','top=0,left=0,width=500,height=600,resizable=no');");
(all on one line of course)

Notice that the function has three parameters: url is, of course, the url you want to open in the new window. winName is the name of the new window (which could then be used as a target in, say, a subsequent <a> link). attributes is a comma-separated string used to define various window attributes (size, location, toolbars, etc.). So, in the example above, the new window would open to http://www.google.com/, with a name of 'Google'. The attributes passed in the example would make the window open at top=0, left=0 (the upper left corner of your screen), with a width of 500px and a height of 600px, and the new window would not be resizable. The entire comma-separated list of attributes should be in quotes, as shown in the example above. You can see a list of various window attibutes, their settings, and browser compatibilities here.

You could write a more complicated openWindow() function, where you actually pass height, width, etc. as separate parameters, define standard settings, like scrollbars, toolbars and resizing, that will be the same for all of your windows, and even have the function automatically center the new window in the screen. I just did this down and dirty one as a quick example.

I also tried using the pointer= menu item property, but it didn't seem to work. (Maybe I used it wrong). You may find that you're stuck with the text cursor used by default by header items.

Using a function like this is nice in that it gives you more control over the placement, appearance, and functionality of the new window (and you could use it in a header item or a standard menu item as well). But if that doesn't matter to you, then you might as well go with the second option you put in your initial post. It seems to me that you're really using header items as fully functional menu items, except that you want their colors to be different. It might just be easier to code them as normal menu items, but specify their colors in the aI() string. If you don't want to have to keep typing in the color info, you could define them in variables in one place, like so:
Code:
myheadercolor = "black";
myheaderbgcolor = "white";
var myHeaderColors = "offcolor="+myheadercolor+";oncolor="+myheadercolor+";offbgcolor="+myheaderbgcolor+";onbgcolor="+myheaderbgcolor+";";
(note that the third line, defining myHeaderColors should not wrap.)

In this example, I've set the preferred fore and bg header colors for both mouse on and mouse off (headers don't have mouseover effects in this case). Then, I've put these colors into the standard menu item properties (like offbgcolor and oncolor, etc), all in one string variable called myHeaderColors. So, whenver I want to apply that set of colors to a menu item (e.g., a "pseudo header"), I'd define the item like so:
Code:
aI("text=Open Google;url=http://www.google.com/;target=_blank;"+myHeaderColors);

It's a normal aI() item, up until the end, where you just add myHeaderColors exactly as shown. If you decide you want a different set of colors, all you have to do is change the values for myheadercolor and myheaderbgcolor in one place, rather than in all of the affected aI() items.

You could even go a step further and add your "my" colors as additional settings in a menuStyle object. Anyway, I don't know if that made sense, but it's getting late and I fear I've rambled on enough. Hope you find some help in there.

Kevin


Poster: FactorX
Dated: Monday June 14 2004 - 19:00:20 BST

Thanks alot for the excellent post.

I've applied the MyHeaderColors variable and it works great just what i was looking for.

Cheers

Great Menu too!


Poster: kevin3442
Dated: Monday June 14 2004 - 20:13:43 BST

You're welcome. Glad it worked out.

Kevin