Adding a 2nd row to a horizontal floating menu

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
TimBert
Advanced
Advanced
Posts: 22
Joined: Tue Feb 10, 2004 5:18 am
Location: Calgary AB, Canada (ex-Leicester)
Contact:

Adding a 2nd row to a horizontal floating menu

Post by TimBert »

I have a horizontal floating menu that is working just fine (see URL below), but I would like to add a second row to it. Do I have to go to a second menu (with all that entails) and position it just below the other one or is there a way to add the second row to the existing menu?

http://www.leicesterandleicestershire.com
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

Off hand, I think you can do it.

mainmenu1 & mainmenu 2, horizontal, keepalive, change top position.

attach submenus to each.

prove me wrong :oops:

maz
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

Maz is right. There is no method to add a second row, but you could, as she suggests, add a second menu. This would not involve mucg overhead, assuming that both main menus use the same style.

In addition to the properties Maz pointed out, you'll also want to set followscroll in the second menu, but not to the same value as the first (if you set both to 1, they'd start to merge as you scroll a little, and end up on top of each other as you continue scrolling past the bottom of the second menu). For example, in your current "Main Menu", you have

Code: Select all

followscroll="1";
(doesn't have to be a string by the way). In your "Main Menu2" you'd set

Code: Select all

followscroll=26;
or something close to that. You may have to adjust the value to suit.

You could also set followscroll so that the first menu scrolls at 0 instead of at 1, and set the rate and speed of scrolling also. Something like this... In "Main Menu":

Code: Select all

followscroll="0,40,10";
(which does have to be a string). And in "Main Menu2":

Code: Select all

followscroll="25,40,10";
Play with the values until you get the scrolling effect you like.

One final note. You may also wish to set the menuwidth property, so that each menu winds up being the same width, to appear to the user as if it was one menu with two rows.

Hope that helps,

Kevin
TimBert
Advanced
Advanced
Posts: 22
Joined: Tue Feb 10, 2004 5:18 am
Location: Calgary AB, Canada (ex-Leicester)
Contact:

Adding a 2nd row

Post by TimBert »

Thank you both, but you assume I know more about this than I really do.

Kevin you said "You may also wish to set the menuwidth property, so that each menu winds up being the same width, to appear to the user as if it was one menu with two rows."

I don't really know how to do this. Also, are you referring to the overall menu width or making the width of each segment of the menu the same. It seems to me that I need to do both or else the seperator bars on the two menus won't line up.

I think I understand the part about tweaking the followscroll, though

Maz, same thing applies, I don't understand the line:

"mainmenu1 & mainmenu 2, horizontal, keepalive, change top position."

Sorry, but I'm just a begginer at this.

Tim
User avatar
John
 Team
 Team
Posts: 5967
Joined: Sun May 19, 2002 8:23 pm
Location: Phoenix, AZ
Contact:

Post by John »

Here's a good place to start...
http://milonic.com/forum/viewtopic.php?t=2981.

Also, the current version is 5.02, so I would suggest upgrading, and please don't forget to add your license number to the appropriate spot in the comments section of the code.
John
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

That's not what I meant, I just tested my theory and it works.

I took the milonic menu_data.js and just duplicated Main Menu renaming it mainmenu2, changed top from 10 to 30, checked it in the browser.

one on top of the other. Of course this works with menu items all the same size because i duplicated it.

Both menus have the same links, but those can be changed by duplicating those too and giving each a new menu name.

All you are doing is repeating the menus, so you have 2
keepalive=1;

I wouldn't want to use followscroll with 2 menus though, its going to cover the text when scrolling down a page.

maz
TimBert
Advanced
Advanced
Posts: 22
Joined: Tue Feb 10, 2004 5:18 am
Location: Calgary AB, Canada (ex-Leicester)
Contact:

Update

Post by TimBert »

Just to let you know, I have updated to 5.02, sent in a request for a licence and placed a Milonic button on my home page (I will eventually put one on every page using the menu).

As for your latest suggestions, I will now start trying them out and see how it goes - many thanks.

Already have a ?:

I have found out how to fix the width of each main menu item (itemwidth="?"; ) but I don't want each sub menu width fixed. Is this possible?

Ha hah! figured that out as well. Place itemwidth="?"; at the start of each submenu. This is fun.

Crap! That sets the submenu width OK, but the text is still wrapped as if the submenu box was narrower. So still need help here.

Got it! Add the itemwidth line to EACH line of the submenu not to the start of the submenu. I'm enjoying talking to myself.
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

Hi Maz,
maz wrote:That's not what I meant
Not sure if you're referring to my comment???

Kevin
TimBert
Advanced
Advanced
Posts: 22
Joined: Tue Feb 10, 2004 5:18 am
Location: Calgary AB, Canada (ex-Leicester)
Contact:

Post by TimBert »

Double menu bar set up OK (menus not finalized yet) but when I scroll they overlap. Have tried the various "followscroll" tweaks as per Kevin's suggestion but to no avail. I have set the new double menu up on a temporary home page:

http://www.leicesterandleicestershire.com/indextmp.html
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

Hi,

First, you're making the two menus a little differently than what we're talking about. You have two menu data files, menu_datatmp1.js and menu_datatmp2.js. Most of the content of each file is the same, so you are duplicating style and submenu definitions. To add your second-row main menu, all you have to do is add the definition for the second main menu to the menu_datatmp1.js file, so that all of your menu code is in one _data.js file. So, in menu_datatmp1.js you'd have

Code: Select all

with(milonic=new menuname("Main Menu")){
...
}
and

Code: Select all

with(milonic=new menuname("Main Menu2")){
...
}
and you would not need a menu_datatmp2.js file at all. If you continue, and do what's suggested below, you'll end up in the right place.

Regarding the followscroll problem... it looks to me like screenposition="center"; is somehow interfering with the followscroll setting. If you don't use screenposition, and use left to position the menus instead, then they scroll together as they should. But if you use screenposition="center" then they end up on top of each other, as yours do. I tried a top offset instead, and that seemed to work. To do this, make "Main Menu" and "Main Menu2" as follows in your menu_datatmp1.js file (you could copy the following and paste it into menu_datatmp1.js, replacing the current code for "Main Menu"):

Code: Select all

with(milonic=new menuname("Main Menu")){
style=menuStyle;
screenposition="center;top";
alwaysvisible=1;
followscroll=1;
orientation="horizontal";
aI("text=Home Page;showmenu=Home;status=Home Page, Links Page, Personal Pages;");
aI("text=Links Page;showmenu=Links;status=The Links Page;");
aI("text=Bulletin Board;showmenu=Bulletins;status=The Expats' Bulletin Board;");
aI("text=The Artist;showmenu=Artist;status=About the Artist - The David Weston Gallery;");
aI("text=Who's Who;showmenu=Who's Who;status=Who's Who in Leicester and Leicestershire;");
aI("text=Nostalgia Jnctn;showmenu=Nostalgia;");
aI("text=Market Place;showmenu=Market Place;");
aI("text=Miscellaneous;showmenu=Miscellaneous;");
}

with(milonic=new menuname("Main Menu2")){
style=menuStyle;
top="offset=25";
screenposition="center;top";
alwaysvisible=1;
followscroll=25;
orientation="horizontal";
aI("text=Home Page;showmenu=Home;status=Home Page, Links Page, Personal Pages;");
aI("text=Links Page;showmenu=Links;status=The Links Page;");
aI("text=Bulletin Board;showmenu=Bulletins;status=The Expats' Bulletin Board;");
aI("text=The Artist;showmenu=Artist;status=About the Artist - The David Weston Gallery;");
aI("text=Who's Who;showmenu=Who's Who;status=Who's Who in Leicester and Leicestershire;");
aI("text=Nostalgia Jnctn;showmenu=Nostalgia;");
aI("text=Market Place;showmenu=Market Place;");
aI("text=Miscellaneous;showmenu=Miscellaneous;");
}
Note that I changed screenposition to "center;top" in both menus; I removed the top= setting in "Main Menu" and changed top= to an offset in "Main Menu2". Essentially, setting screenposition="center;top" in "Main Menu2" makes it want to go to the top, but that tendency is overridden with top="offset=25", which makes it offset 25 px from the top. Now the followscroll should work in both menus.

You'll no longer need menu_datatmp2.js, so in your html file you should remove the <script> line that loads menu_datatmp2.js.

Let us know how you fare.

Kevin
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

Kevin is correct, what I meant was on your menu-data just copy main menu and rename it underneath as mainmenu2, then do the same with the submenus, those copies are where you are going to use your second row items. You can create as many as you want but each one needs a new name and showmenu name-link.

Its fun when you treat it like a big puzzle, and don't get lost ;)

I said that's not what I meant, because I also read Kevins post as creating 2 complete menus.

I didn't think out followscroll, I was thinking if you have 2 rows attached that followscroll would work for both. Of course they become unglued and Kevin figured that out.

I still think 2 menus with followcroll is too much. If I did this I would have one menu not move at the top, and put followscroll on the second menu for more transient pages.

Its good to see new ways of using the menu :)

Regards,
maz
TimBert
Advanced
Advanced
Posts: 22
Joined: Tue Feb 10, 2004 5:18 am
Location: Calgary AB, Canada (ex-Leicester)
Contact:

Ahhhhhh

Post by TimBert »

You're both too kind (no, really). That worked and it took me about 2 minutes flat. If I carry on like this, I'll soon know what I'm doin'. :roll:
User avatar
Maz
Milonic God
Milonic God
Posts: 1717
Joined: Fri Jun 06, 2003 11:39 pm
Location: San Francisco
Contact:

Post by Maz »

Yes, before long you'll know as much as me :D

maz
(ex-Surrey) ;)
Post Reply