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:14
right justify some menu items
Poster: indra
Dated: Wednesday February 15 2006 - 1:48:22 GMT
Here is my main menu:
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
top=132;
left=150;
aI("showmenu=M1;text=Menu 1;");
aI("showmenu=M2;text=Menu 2;");
aI("showmenu=M3;text=Menu 3;");
aI("showmenu=M4;text=Menu 4;");
aI("showmenu=M5;text=Menu 5;");
aI("showmenu=M6;text=Menu 6;");
}
how do I right justify menu 5 and menu 6? I want menu 1 to 4 displayed as a group on the left and menu 5 and 6 as a group justified to right, is this possible?
Poster: vikenk
Dated: Wednesday February 15 2006 - 3:46:43 GMT
Hi,
I believe that all you will need to do is add align=right to each individual line. Your code would then look like this:
Code:
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
top=132;
left=150;
aI("showmenu=M1;text=Menu 1;");
aI("showmenu=M2;text=Menu 2;");
aI("showmenu=M3;text=Menu 3;");
aI("showmenu=M4;text=Menu 4;");
aI("align=right;showmenu=M5;text=Menu 5;");
aI("align=right;showmenu=M6;text=Menu 6;");
}
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
top=132;
left=150;
aI("showmenu=M1;text=Menu 1;");
aI("showmenu=M2;text=Menu 2;");
aI("showmenu=M3;text=Menu 3;");
aI("showmenu=M4;text=Menu 4;");
aI("align=right;showmenu=M5;text=Menu 5;");
aI("align=right;showmenu=M6;text=Menu 6;");
}
Try that. it should work. Hope this helps.
Poster: Migru
Dated: Wednesday February 15 2006 - 7:42:48 GMT
Hi
in addition to this you could make use of individual itemwidth settings within the aI() string, for instance, itemwidth=100; or itemwidth=120;
(Settings are in pixels) to control layout and appearance.
Michael
Poster: John
Dated: Wednesday February 15 2006 - 14:21:09 GMT
On http://www.milonic.com/, go to DHTML Menu/Menu Quick Reference Guides. This will show you the commands available for the different menu 'pieces' and how they work.
Poster: indra
Dated: Tuesday February 21 2006 - 21:04:03 GMT
Thanks. I try that and it does not work. The align pro[property is for text alignmen.
I see menualign property and that will right justify your menu
Anyone else has any solution to right justify some items of the menu?
Using the menu above, Here is what I try to accomplish:
Menu1 to Menu4 stay on the left and
Menu5 and Menu6 staty on the right
Code:
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
menualign="right"
top=132;
left=150;
aI("showmenu=M1;text=Menu1;");
aI("showmenu=M2;text=Menu2;");
aI("showmenu=M3;text=Menu3;");
aI("showmenu=M4;text=Menu4;");
aI("showmenu=M5;text=Menu5;");
aI("showmenu=M6;text=Menu6;");
}
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
menualign="right"
top=132;
left=150;
aI("showmenu=M1;text=Menu1;");
aI("showmenu=M2;text=Menu2;");
aI("showmenu=M3;text=Menu3;");
aI("showmenu=M4;text=Menu4;");
aI("showmenu=M5;text=Menu5;");
aI("showmenu=M6;text=Menu6;");
}
vikenk wrote:
Hi,
I believe that all you will need to do is add align=right to each individual line. Your code would then look like this:
Try that. it should work. Hope this helps.
I believe that all you will need to do is add align=right to each individual line. Your code would then look like this:
Code:
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
top=132;
left=150;
aI("showmenu=M1;text=Menu 1;");
aI("showmenu=M2;text=Menu 2;");
aI("showmenu=M3;text=Menu 3;");
aI("showmenu=M4;text=Menu 4;");
aI("align=right;showmenu=M5;text=Menu 5;");
aI("align=right;showmenu=M6;text=Menu 6;");
}
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
top=132;
left=150;
aI("showmenu=M1;text=Menu 1;");
aI("showmenu=M2;text=Menu 2;");
aI("showmenu=M3;text=Menu 3;");
aI("showmenu=M4;text=Menu 4;");
aI("align=right;showmenu=M5;text=Menu 5;");
aI("align=right;showmenu=M6;text=Menu 6;");
}
Try that. it should work. Hope this helps.
Poster: Migru
Dated: Wednesday February 22 2006 - 9:33:53 GMT
Just for demonstration I have selected 120 for each item
Code:
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
//menualign="right"; (this is commented out)
top=132;
left=150;
aI("showmenu=M1;text=Menu1;align=left;itemwidth=120;");
aI("showmenu=M2;text=Menu2;align=left;itemwidth=120;");
aI("showmenu=M3;text=Menu3;align=left;itemwidth=120;");
aI("showmenu=M4;text=Menu4;align=left;itemwidth=120;");
aI("showmenu=M5;text=Menu5;align=right;itemwidth=120;");
aI("showmenu=M6;text=Menu6;align=right;itemwidth=120;");
}
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
//menualign="right"; (this is commented out)
top=132;
left=150;
aI("showmenu=M1;text=Menu1;align=left;itemwidth=120;");
aI("showmenu=M2;text=Menu2;align=left;itemwidth=120;");
aI("showmenu=M3;text=Menu3;align=left;itemwidth=120;");
aI("showmenu=M4;text=Menu4;align=left;itemwidth=120;");
aI("showmenu=M5;text=Menu5;align=right;itemwidth=120;");
aI("showmenu=M6;text=Menu6;align=right;itemwidth=120;");
}
This works!!!!!
If there is no width set, the item width is automatically limited, and there is practically no difference between left and right.
Michael
Poster: Migru
Dated: Wednesday February 22 2006 - 11:34:47 GMT
HI
of course
"align=left;" could be omitted, as by default it is "left";
M.
Poster: indra
Dated: Wednesday February 22 2006 - 16:26:21 GMT
Thanks for your reply. That's not waht I am looking for. I am not trying to justify the text for each menu item. The site is in dev and inside the firewall so I cannot show it . Here is what it looks like:
The web page width = 100% browser width
Logo at top across the screen
left bar with 120px width
right side is a div for content with fluid width
I don't want to set the width of each menu item (M1 to M6)
I want to display M1 to M4 to the left of the div area and M5 and M6 to the right. The gap between M4 and M5 is fluid depends on how the user sizes the browser.
|------------------------------------------------------------|
| LOGO.................................................................|
|------------------------------------------------------------|
|.......|--M1--M2--M3--M4--------------------M5--M6--|
|.......|------------------------------------------------------|
|.......|...................................................................|
|.......|...................................................................|
|.......|...................................................................|
|.......|...................................................................|
|.......|...................................................................|
|.......|...................................................................|
|.......|...................................................................|
|.......|...................................................................|
|------|-----------------------------------------------------|
I use . for space as the board will trim spaces.
Hope this will clarify what I am trying to accomplish.
Is this doable?
Migru wrote:
Just for demonstration I have selected 120 for each item
This works!!!!!
If there is no width set, the item width is automatically limited, and there is practically no difference between left and right.
Michael
Code:
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
//menualign="right"; (this is commented out)
top=132;
left=150;
aI("showmenu=M1;text=Menu1;align=left;itemwidth=120;");
aI("showmenu=M2;text=Menu2;align=left;itemwidth=120;");
aI("showmenu=M3;text=Menu3;align=left;itemwidth=120;");
aI("showmenu=M4;text=Menu4;align=left;itemwidth=120;");
aI("showmenu=M5;text=Menu5;align=right;itemwidth=120;");
aI("showmenu=M6;text=Menu6;align=right;itemwidth=120;");
}
alwaysvisible=1;
orientation="horizontal";
style=menuStyle;
//menualign="right"; (this is commented out)
top=132;
left=150;
aI("showmenu=M1;text=Menu1;align=left;itemwidth=120;");
aI("showmenu=M2;text=Menu2;align=left;itemwidth=120;");
aI("showmenu=M3;text=Menu3;align=left;itemwidth=120;");
aI("showmenu=M4;text=Menu4;align=left;itemwidth=120;");
aI("showmenu=M5;text=Menu5;align=right;itemwidth=120;");
aI("showmenu=M6;text=Menu6;align=right;itemwidth=120;");
}
This works!!!!!
If there is no width set, the item width is automatically limited, and there is practically no difference between left and right.
Michael
Poster: Migru
Dated: Wednesday February 22 2006 - 18:21:46 GMT
Hi
why not place two or three "dummy" items between M4 and M5 , setting the menu width to 100% ??
Michael
Another idea (did not test or realize it):
two main menus, one left oriented and one right oriented (using menualign), both top properties set to equal values.... (don´t know if this works).
Poster: vikenk
Dated: Wednesday February 22 2006 - 18:59:48 GMT
Migru wrote:
Another idea (did not test or realize it):
two main menus, one left oriented and one right oriented (using menualign), both top properties set to equal values.... (don´t know if this works).
two main menus, one left oriented and one right oriented (using menualign), both top properties set to equal values.... (don´t know if this works).
This is what I was going to suggest. Using two main menus configured identically except for align=right/left. Two menus will work together on one page without fault.
The biggest problem with using two main menus is that you have to be careful to make any changes to both menu's at once. Adding an extra link means adding it to both menus, unless those menu items are in a table relative positioned, in which they can both use the same menu_data.js file, I believe.
Poster: Migru
Dated: Wednesday February 22 2006 - 19:11:35 GMT
Hi
reflecting on that, I - for my part - am in favour of one menu only with some "dummy" items in between, which - of course - could be styled individually in order to make them visible or not, and without any mouseover activity (for instance header type). I do not know what is wanted.
M.
Poster: indra
Dated: Wednesday February 22 2006 - 19:23:04 GMT
Thank you for the suggestion
With the dummy items in between will not ensure that M5 and M6 will be at the right edge. Since M5 and M6 will be at a fixed location, when the users resize the browser window(make it smaller), M5 and M6 will not be visible (need to scroll right to get to the items)
I may have to play with the two main menu solution after I've completed my site unless someone has a better solution.
Thank you,
Indra
Migru wrote:
Hi
reflecting on that, I - for my part - am in favour of one menu only with some "dummy" items in between, which - of course - could be styled individually in order to make them visible or not, and without any mouseover activity (for instance header type). I do not know what is wanted.
M.
reflecting on that, I - for my part - am in favour of one menu only with some "dummy" items in between, which - of course - could be styled individually in order to make them visible or not, and without any mouseover activity (for instance header type). I do not know what is wanted.
M.
Poster: Migru
Dated: Wednesday February 22 2006 - 19:57:37 GMT
Hi
its always nice to read "what the user will do". The user will like to see the entire menu, so he/she will not resize it to a dimension, which will disable comfortable reading. And the user will like to make use of his/her entire monitor surface, when reading. That is - please permit - my opinion on that.
The only matter of real importance may be the actual monitor sizes available / resolutions normally in operation, so how will it look like on a 1024x768 vs 1280x1024 or vertical monitor (which are more and more in) or some 800x600 which may still be in operation. But as more and more TFTs are very common, 17",18",19" so will it be most likely be one of the resolutions I mentioned before which should be tested, when a new page is drawn up. But please - I´ve just advanced my opinion, I do not expect everyone to agree with that.
Michael
Poster: Ruth
Dated: Thursday February 23 2006 - 4:25:50 GMT
Hi,
We really need to see a page. Your description is clear, however if you think about it, you have said the page is 100%, and that there is a right div, fluid width, and you want the right two submenus to show to the right of the div and the left submenus to show to the left of the div. Now, you don't have a menuwidth set, nor do you have width set, so how exactly are you going to figure out just where the submenus are supposed to be on the right and the left of the div?
There are a number of properties you can try, but again, not knowing how wide or narrow that fluid div is going to be, it's pretty difficult to tell the menu where to open the submenu and make sure it's outside the div as you want. Number 4 is probably the only way you can do it as you've described, if I understand correctly what you want.
1. left="offset=x"; top="offset=y"; where x and y are the number of pixels
2. screenposition="left";left="offset=x";top="offset=y";
3. screenposition="right";left="offset=+or- x";top="offset=y";
4. You can use popups for the submenus and positoin them based on an image in a div you've set to be where you want the menu to open in relation to your 'fluid' div. You'd need to put one on the left and one on the right and have a different image for each div and use that to position the submenu, but it takes a popup for the main menu to do that.
You will need to experiment, you can use negative numbers for the offsets.
http://www.milonic.com/menusample23.php menu positioning with offsets, this is used on a main menu but it should work on a submenu.
http://www.milonic.com/menusample24.php pop function menus positioned by images. This is probably your best choice if I understand correctly what you want.
To get more indepth help you will need to either upload a page for us to test, or post the full html here, plus the full menu_data file, plus any css file if you are using css so we can create the page and try to see if we can figure out how to do what you want.
Ruth
Poster: Migru
Dated: Thursday February 23 2006 - 7:21:43 GMT
Hi Ruth
as I understand, its the main menu (and not the subs ), which - in parts has to show 4 items - left oriented and 2 items right oriented, with a gap between.
Michael
Poster: indra
Dated: Thursday February 23 2006 - 16:17:38 GMT
As Migru pointed out, M1 to M6 is menu items of a main menu. The main menu is on a div with fluid width 100%. I want to display menu items M1 to M4 on the left and M5 and M6 to the right. The gap between M4 and M5 is flexible depending the monitor size, display resolution, and how the browser window.
It is kind of like having a dummy menu item between M4 and M5 and set the width of the menu item to 100% which will push M5 and M6 to the right edge of the div and create the gap between M4 and M5. The problem is you can only set the item width wirh fixed x pixels and a %
Thanks,
Indra
Ruth wrote:
Hi,
We really need to see a page. Your description is clear, however if you think about it, you have said the page is 100%, and that there is a right div, fluid width, and you want the right two submenus to show to the right of the div and the left submenus to show to the left of the div. Now, you don't have a menuwidth set, nor do you have width set, so how exactly are you going to figure out just where the submenus are supposed to be on the right and the left of the div?
There are a number of properties you can try, but again, not knowing how wide or narrow that fluid div is going to be, it's pretty difficult to tell the menu where to open the submenu and make sure it's outside the div as you want. Number 4 is probably the only way you can do it as you've described, if I understand correctly what you want.
1. left="offset=x"; top="offset=y"; where x and y are the number of pixels
2. screenposition="left";left="offset=x";top="offset=y";
3. screenposition="right";left="offset=+or- x";top="offset=y";
4. You can use popups for the submenus and positoin them based on an image in a div you've set to be where you want the menu to open in relation to your 'fluid' div. You'd need to put one on the left and one on the right and have a different image for each div and use that to position the submenu, but it takes a popup for the main menu to do that.
You will need to experiment, you can use negative numbers for the offsets.
http://www.milonic.com/menusample23.php menu positioning with offsets, this is used on a main menu but it should work on a submenu.
http://www.milonic.com/menusample24.php pop function menus positioned by images. This is probably your best choice if I understand correctly what you want.
To get more indepth help you will need to either upload a page for us to test, or post the full html here, plus the full menu_data file, plus any css file if you are using css so we can create the page and try to see if we can figure out how to do what you want.
Ruth
We really need to see a page. Your description is clear, however if you think about it, you have said the page is 100%, and that there is a right div, fluid width, and you want the right two submenus to show to the right of the div and the left submenus to show to the left of the div. Now, you don't have a menuwidth set, nor do you have width set, so how exactly are you going to figure out just where the submenus are supposed to be on the right and the left of the div?
There are a number of properties you can try, but again, not knowing how wide or narrow that fluid div is going to be, it's pretty difficult to tell the menu where to open the submenu and make sure it's outside the div as you want. Number 4 is probably the only way you can do it as you've described, if I understand correctly what you want.
1. left="offset=x"; top="offset=y"; where x and y are the number of pixels
2. screenposition="left";left="offset=x";top="offset=y";
3. screenposition="right";left="offset=+or- x";top="offset=y";
4. You can use popups for the submenus and positoin them based on an image in a div you've set to be where you want the menu to open in relation to your 'fluid' div. You'd need to put one on the left and one on the right and have a different image for each div and use that to position the submenu, but it takes a popup for the main menu to do that.
You will need to experiment, you can use negative numbers for the offsets.
http://www.milonic.com/menusample23.php menu positioning with offsets, this is used on a main menu but it should work on a submenu.
http://www.milonic.com/menusample24.php pop function menus positioned by images. This is probably your best choice if I understand correctly what you want.
To get more indepth help you will need to either upload a page for us to test, or post the full html here, plus the full menu_data file, plus any css file if you are using css so we can create the page and try to see if we can figure out how to do what you want.
Ruth
Poster: Migru
Dated: Thursday February 23 2006 - 16:32:17 GMT
Hi
Quote:
The problem is you can only set the item width wirh fixed x pixels and a %
so where is the problem, if you set the menu width to 100% and the item width of each individual item to a minimum value in % of available space?
keeping two or three dummy items. (I´ve not made any tests with this, that is on you) The only thing is for cross browser capability these % settings are not really recommendable.
Michael