rtl-menu submenu position

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:19

rtl-menu submenu position

Poster: pieter53
Dated: Saturday May 3 2008 - 10:05:18 BST

(Sorry, altough it has been quite awhile a go since I first came here, my knowledge of English and computers is still limited :cry:

)
I've been playing around with the RTL-menu, it's great, but I noticed some things that were not 100% perfect.
I'm using XP-sp2, Firefox 2, IE7.
TESTPAGE.
The menu is placed in a tablecel. Alignment: right!

1.
The submenu of the most right menuitem will not be placed right below the menuitem, when you have added the line "openstyle="rtl";" to the submenu. It's placed some distance to the left. (It looks like it's in the position where it would be with the whole menu aligned left)

2.
When you open the page (or refresh it) and open a submenu with "overflow="scroll";" (like <films>><reviews>), the submenu is placed in the position as if there's no scrollbar. This happens only whe you open the submenu for the first time. If you reopen the menu (without refreshing the page) it's placed correct.

(btw. overflow=scroll still isn't working in Netscape 7.2. The scrollbar shows, but the mouse isn't detected when it's placed on the scrollbar, so the submenu closes)

That's all (I believe

)

Re: rtl-menu submenu position

Poster: Ruth
Dated: Monday May 5 2008 - 18:29:19 BST

Hi,

I cannot figure out what the problem is for number 1. Nothing I have tried has worked. I will report the issue and hopefully it will be fixed.

As to the submenu position for the last Forum item, make the following changes and that seems to fix it so it is aligned right normally, but NOT when you have the openstyle='rtl'. I noticed that that submenu, as you hve it now is shifted farther to the right than the edge of the menu so that's why I did the fix for that issue. As noted it doesn't solve the openstyle='rtl' in the submenu issue.

1. In the css, add margin:10px to the body tag section, this evens the margins for all the browsers so they have the same margins. Right now without that in there, they are not the same. Then add this class and then call it in the table that has the menu. It has the margin-right:auto removed and that seems to be part of the problem on the placement of the submenu.

Code:

.maintablemenu{
   MARGIN-LEFT: 0px; WIDTH: 66.9em;
}

Now, in that menu table, you will call the class maintablemenu and in the td that has the call for the embedded main menu you'll have a style= with some code added.

Code:

<TABLE class=maintablemenu border=0>
  <TBODY>
  <TR class=menu>
    <TD class=menuleft></TD>
    <TD style='padding:0px;height:38px'>
      <SCRIPT src="embedded_main_menu.js" 
      type=text/javascript></SCRIPT>

In the mainmenuStyle that is in the menu_data.js file remove the padding=8; That is causing problems in IE making the height somewhere around 54 instead of 38. With the height of the td set to 38 and your valign in the menu itself set to middle, that takes care of the height issues. Then in the embedded_main_menu.js file make the following changes to the main menu

Code:

with(milonic=new menuname("Main Menu")){alwaysvisible=1;
openstyle="rtl";
orientation="horizontal";
position="relative";
style=mainmenuStyle;
menuwidth='100%';
menuheight=38;
itemheight=38;
menualign='right';

So, that fixes Forum item placement of the submenu in IE6, and FF2. I don't have IE7. And, I'll report the other issue.

As to the scrollbar issue, I dont' see it at all in IE6, or in my FF2 so I don't have anything to try and fix. Sorry.

Ruth

Re: rtl-menu submenu position

Poster: pieter53
Dated: Tuesday May 6 2008 - 13:42:06 BST

Thanks for all the work you've done!
You must have spend a lot of time on it.
When I have time I will try you solution.

Two screencaps for the scrollbar.
The first shows the position of the submenu as you first visit "review"
The second after you've visited it again.

Thanks again for all your help!

Re: rtl-menu submenu position

Poster: pieter53
Dated: Wednesday May 7 2008 - 14:31:11 BST

As you spend so much time on helping me I made the changes you suggested (not online!).
Tested with FF2, IE7, Opera 9, Safari 3.
The height of the menubar is now correct in all browsers.
First there was a unused space between the last menuitem en the rightend of the bar, that's fixed too.

But
FF: the submenu of "forum" is placed too much to the right (not changed).

IE: The whole menubar is placed too much to the left. Submenu "forum" about 5 pixels too much to the right (not changed).

Opera: the tables have become wider! The whole menubar is placed too much to the left. It looks like the submenu of "forum" is placed correct.

Safari: The whole menubar is placed too much to the left. Submenu placed correct.

As I was just playing with this menu (I wanted to know how it looked on a page like that), I suggest you don't spend more time on it, unless you like the challenge.
Thanks for the help, it's always usefull to see other ways in which things can be done.

Pieter

Industrial Strength JavaScript and DHTML Menus

rtl-menu submenu position

Re: rtl-menu submenu position

Re: rtl-menu submenu position

Re: rtl-menu submenu position