Industrial Strength JavaScript and DHTML Menus
About Us
Testimonials
Contact Us
Our Distinguished Clients
Investing in Non-Profits
Where Are We
Privacy Policy
Software Licensing Agreement
DHTML JavaScript Menu
Product Information
Page Integration
Quick Reference Guides
Embedding Into a Table or DIV
Purchase
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:42
Adding a 2nd row to a horizontal floating menu
Poster: TimBert
Dated: Thursday February 19 2004 - 23:46:41 GMT
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
Poster: Maz
Dated: Friday February 20 2004 - 0:05:05 GMT
Off hand, I think you can do it.
mainmenu1 & mainmenu 2, horizontal, keepalive, change top position.
attach submenus to each.
prove me wrong
maz
Poster: kevin3442
Dated: Friday February 20 2004 - 0:26:46 GMT
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:
followscroll="1";
(doesn't have to be a string by the way). In your "Main Menu2" you'd set
Code:
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:
followscroll="0,40,10";
(which does have to be a string). And in "Main Menu2":
Code:
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
Adding a 2nd row
Poster: TimBert
Dated: Friday February 20 2004 - 5:19:55 GMT
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
Poster: John
Dated: Friday February 20 2004 - 5:30:45 GMT
Here's a good place to start...
http://www.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.
Poster: Maz
Dated: Friday February 20 2004 - 8:10:26 GMT
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
Update
Poster: TimBert
Dated: Friday February 20 2004 - 16:23:28 GMT
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.
Poster: kevin3442
Dated: Friday February 20 2004 - 18:55:06 GMT
Hi Maz,
maz wrote:
That's not what I meant
Not sure if you're referring to my comment???
Kevin
Poster: TimBert
Dated: Friday February 20 2004 - 19:07:42 GMT
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
Poster: kevin3442
Dated: Friday February 20 2004 - 20:05:37 GMT
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:
with(milonic=new menuname("Main Menu")){
...
}
...
}
and
Code:
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:
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;");
}
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
Poster: Maz
Dated: Friday February 20 2004 - 21:54:19 GMT
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
Ahhhhhh
Poster: TimBert
Dated: Friday February 20 2004 - 22:45:34 GMT
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'.
