Share your tricks or tips for DHTML MENU BUILDER with others!

This thread is for tricks and tips only - please no problem questions.

Have a problem or question then post in the Our Miscellaneous Software Discussion thread, not here, so your question does not get overlooked.

Subscribe to this thread if you like to get emails on tips and Tricks people post

Also see the help pages here http://www.coffeecup.com/free-dhtml/help/ Have fun
~ Fe Pixie ~

Positioning your Menu

If you are having problems positioning your menu on your page (maybe it keeps jumping to the top) you can easily put it where you want it by adding a <span> to your code.

On your page find the menu code and put a span around it and give the span an id - like this:
<span id="themenu">
.....all the menu code.....
</span>

then look through the menu code till you find the place where it says:
var TargetLoc=''; // span id for relative positioning
(9 lines up from where it says "DO NOT EDIT ANYTHING BELOW THIS LINE")

and add in the id you've given to the span like this:
var TargetLoc='themenu'; // span id for relative positioning

Your menu will now be positioned relative to the start of the span rather than relative to the start of your page Have fun
~ Fe Pixie ~

In Opera the menu doesn't show at all

Have fun
~ Fe Pixie ~

Menu will not work in Firefox

Have fun
~ Fe Pixie ~

Adding Flashier Bounce to your menu

I wanted a 'flashier' look to the menu so I had a 'fiddle'.

I copied the down arrow, made the gif twice as tall, keeping the arrow the same size. I then copied the arrow, giving it a new filename, but shifted it 1 pixel upwards. I repeated this until the arrow was at the top, then I used a gif animator to 'stitch' them all together in an animation. My final move was to make the background transparent.

Now I had a down arrow that 'bounced'.

I did the same with the right pointing arrow, making it wider instead of taller, and ended up with a left to right bouncing arrow. (I'm not using a left pointing arrow so I left that alone)

I saved them in the right places and used the right names but they didn't display properly until I edited a bit of the menu code (the arrows were now bigger than the menu expected!)

The edited code is: var Arrws=['tri.gif',10,10,'tridown.gif',10,10,'trileft.gif',5,10]; (last line before DO NOT EDIT.....). You can see trileft.gif is still 5,10, the others are now 10,10.

So what is the end result? take a look at http://highfields-arc.co.uk to see how it looks.

The arrows are to the left of here but the down one is white so it doesn't show up on the white background!

MSIE in standards mode
If you use a strict <!DOCTYPE > declaration, MSIE will use the W3C box model, which will make the border between elements disappear in MSIE. To fix this problem make these changes in the menu code (about 22 lines below the DO NOT EDIT warning):

var LftXtra=DomNav||DomExp&&!Exp4&&!Opr6orless?LeftPaddng:0; //Changed for Opera
var TpXtra=DomNav||DomExp?TopPaddng:0;

Have a question about where to place the arrow graphics for your DHTML menu?

The graphics are assigned by a line immediately above the

/***********************************************************************
DO NOT EDIT ANYTHING BELOW THIS LINE - IT WILL BREAK THE SCRIPT !
***********************************************************************/

As the code is created by the program, the graphics must be in the same directory as the page with the menu.

var Arrws=['tri.gif',5,10,'tridown.gif',10,5,'trileft.gif',5,10];

Therefore, if you have your pages in different folders, you may also have the graphics in each folder. You can edit this line to have the graphics in a single location.

If you want the graphics in the root of your web site (location of your INDEX.HTM page), just add a '/' in the name so the edited line reads:

var Arrws=['/tri.gif',5,10,'/tridown.gif',10,5,'/trileft.gif',5,10];

If you want those arrow graphics to be located in your images folder, change the line to read:

var Arrws=['/images/tri.gif',5,10,'/images/tridown.gif',10,5,'/images/trileft.gif',5,10];

Just remember that each time you edit the menu using the DHTML menu builder, you will need to make these changes.

Bill Bill R.
First Baptist Church
Brighter Day Charities
Roberson Family

hand cursor

I noticed that the menu would not make use of the Hand cursor in Netscape and Mozilla (ony in IE). To remedy this, I replaced the word "hand" with "pointer" and now it works fine in all 3.

Before
this.style.cursor=ExpYes&&(this.LinkTxt||(RcrsLvl==1&&UnfoldsOnClick))?'hand':'default';

After:
this.style.cursor=ExpYes&&(this.LinkTxt||(RcrsLvl==1&&UnfoldsOnClick))?'pointer':'default';

Kayro

How to make the DHTML menu load pages in a frame or iFrame.

find the function 'GoTo' which looks a lil something like...

function GoTo(){
if(this.LinkTxt){
status='';
var HP=Nav4?this.LowLyr:this;
LowItem(HP);
this.LinkTxt.indexOf('javascript:')!=-1?eval(this.LinkTxt):DcLoc.location.href=this.LinkTxt}}


...and replace it with...

function GoTo(){
if(this.LinkTxt){
status='';

var HP=Nav4?this.LowLyr:this;
LowItem(HP);
//********************************************************
//IN THE BELOW LINE OF CODE, CHANGE 'iFrame' TO THE FRAME
//THAT IS TO HAVE THE PAGE LOADED IN IT.
//Note: the iframe must have the name defined in it eg:
//<iframe name="iframenamehere"......
//********************************************************
parent.iframenamehere.location.href = this.LinkTxt
}}

dont forget to change 'iframenamehere' to the name of your iframe/frame

email me if you need any more info

--
Adam D
Website Designer
adamd@jammesz.com
http://adamd.jammesz.com

You can add images to the background of your menu options to imitate the Flash Menu Builder, but still allow multiple drop-down levels.

Each menu option is written as a single line of javascript:
Menu1=new Array("Your Text","URL_or_filename.html","",1,20,100);

The first parameter, "Your Text", is what the actual button will say. Next is the URL to the page, or the filename if they're in the same folder. The third set of quotes is what we're really interested in here. This is where you can insert the URL or filename of a background image. It's empty by default, but you can edit the script to include one.

The other three parameters specify the number of sub-items, the height, and the width of the menu option. In this case there would be one submenu, and this button is 20 px tall x 100 px wide.