Top position of sub-menus, stop alignment with menu items

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
hlagoy
Advanced
Advanced
Posts: 10
Joined: Mon Sep 11, 2006 9:36 pm

Top position of sub-menus, stop alignment with menu items

Post by hlagoy »

Greetings :^)

I am trying to make my sub-menus align vertically with the TOP of the main menu that launches them, NOT with the individual menu item that launched them. I have seen this done with PHP, but I don't have the javascript know-how to do it (yet!).

I have put a copy of my project outside our firewall:
http://www.naz.edu/dept/library/staging ... index.html
(This is very much under construction, and does not seem to be working in Mozilla, for the moment; but I'm not concerned with this now.)

I have embedded the main menu in a table, and used "screenposition" on each and every sub-menu. So it looks like I want...but resizing the browser window messes things up; and I feel like there should be a more elegant solution.

Any help greatly appreciated.
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

Hi,

When you are settting offsets from the screen when the resolution changes the offsets will be the same but the items on the page, like the main menu will be in a different position because of the resolution.

You can get close by using offsets only for the menus. Get rid of the screenposition=top; and set the top="offset="; that will offset it from its parent item.

This will only be 'approximate' in some cases since anyone who increases their browser font size will change the items' sizes and with the height changed for the items the offsets will not be exact as they are when set at your design resolution. But, for the majority who do not change the font size in their browser, everything will be fine.

Hope this helps.

Ruth
hlagoy
Advanced
Advanced
Posts: 10
Joined: Mon Sep 11, 2006 9:36 pm

Post by hlagoy »

Thanks for the advice.

I did originally have my menus the way you suggested - no screenposition, and then offsetting each individual submenu: find_books at top="offset=0", find_journals at top="offset=-25", find_other at top="offset=-50", etc. but I was not satisfied with the results.

What I need to do is figure out how each menu item's vertical position gets passed to it's sub menu. Then I need to alter this so that the vertical position information for every submenu comes from the top of the main menu, or just from the first menu item's position.

I was hoping to find some trick around this, short of learning javascript!
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

Hi,

Well, I have some links for you, but be aware Milonic is not opensource; you cannot alter the coding in the program.

There is an old post that has to do with finding a coordinate in the menu, it has to do with finding position and setting position, but it's pretty involved since it ends up requiring a js function I think. But, you can try that post.

viewtopic.php?t=3632

Then on the main site, under the DHTML Menu link there is a link for Menu Quick Reference Guides. Under that is a link to Methods and Functions, but again, you'd need to know something about JS.

The other option would be to set up the main menu to be used as a popmenu. That means setting up the main menu items as text links or as images and then using the pop function to open the submenus. That type of menu allows you to position the submenus based on an image. So, you could set up an image at a fixed place and the submenus would open with the left top corner positioned at the left bottom corner of that image.

I'll try and put together your page like that so you can see it.

I've contacted Milonic to see if there is any other way to do something like this.

Ruth
hlagoy
Advanced
Advanced
Posts: 10
Joined: Mon Sep 11, 2006 9:36 pm

Post by hlagoy »

Wow, thanks for that link! I think we are really getting somewhere.

So...these Methods and Functions...describe what is already built into the menu code...if I wanted to change them, and set the position of a sub-menu I would use code along the lines of:

myMenu = gmobj("menu"+getMenuByName("mainmenu"))
spos(myMenu,10,10,200,200)

...where? in my sub-menus? in menu_data?

Thanks.
hlagoy
Advanced
Advanced
Posts: 10
Joined: Mon Sep 11, 2006 9:36 pm

Post by hlagoy »

Hello, just wondering if there was any new insight.

I think that I should be able to do something with "spos". I should be able to set a position for each of the submenus, that is NOT based on the submenu's particular parent item. If I could set position for each sub-menu based on the FIRST menu item in the parent menu that would work.

But I don't know enough javascript to even know where the "spos" bit would go. Is this part of a function that I'd put in menu_data?

This site has exactly the menu look that I want:
http://www.byu.edu/webapp/home/index.jsp

I was able to recreate this menu structure in PHP, but the powers-that-be have insisted that only javascript be used.

Anywho, thanks for listening.
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

hlagoy wrote:Hello, just wondering if there was any new insight. ...
If I understand correctly, you want to be able to set the top coordinate of all submenus to the same value as the top coordinate of your main menu.

You could do so automatically with the following function:

Code: Select all

function mm_setSubTops(menuName)
{
  var mainPos = gpos(gmobj("menu" + getMenuByName(menuName)));
  for (i=0; i<_m.length; i++) _m[i][2] = mainPos[0];
}
where menuName is the name of the menu whose top you want all other menus to match; the main menu in your case.

You could paste that function into the top of your menu_data.js file. Suppose your main menu is named "Main Menu" (original, I know). You'd call mm_setSubTops("Main Menu") either with the <body> tag's onload event, or at the bottom of the menu_data.js file, after the call to drawMenus().

Note that for this to work, you must also set _subOffsetTop = 0; (it's usually set toward the top of the menu_data.js file, along with other global properties).

I've placed a little example here. It doesn't use form-submenus like yours, but the same principal applies. Have a look at the example. There's a link at the bottom of the page so you can download it in a .zip file and examine the menu_data.js file.

Hope that helps,

Kevin
hlagoy
Advanced
Advanced
Posts: 10
Joined: Mon Sep 11, 2006 9:36 pm

Post by hlagoy »

Thank you, Kevin. That is what I want.

After some tinkering I got it to (mostly) work. My main menu is in a table and I needed to add "mm_setSubTops("Main Menu")" after "drawMenus()" in my index.html, not the menu_data.js

It looks good in FF and Mozilla, HOWEVER, the IE browser just sticks the submenus up at the top of the page. Any idea why? Could it have something to do with my main menu table?


http://wwwtest.naz.edu/dept/library/milonic/index.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,

Not sure off the bat... probably something to do with different origins across browsers when containers are involved. I'll find some time later today to have a look and see if we can solve it.

Cheers,

Kevin
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,

Sorry for taking so long to get back to this... I... um... sort of forgot :oops:

Just had a quick look at your test page, and it's giving a js error that may be the root of the problem. I think by putting the call to mm_setSubTops() in the table cell, it's running the function too quickly and actually trying to get the top position of the main menu before the main menu has actually been rendered. A quick fix (if this is indeed the issue) would be to remove the call to mm_setSubTops("mainmenu") from the <td> and call it with the body's onload event instead. That way, the function won't run until the page is completely loaded. Like this:

Code: Select all

<body class="bodymain" onload="mm_setSubTops('mainmenu')">
Let us know if that handles it.

Cheers,

Kevin
hlagoy
Advanced
Advanced
Posts: 10
Joined: Mon Sep 11, 2006 9:36 pm

Post by hlagoy »

Thanks a lot, Kevin, I think that did the trick.

My menu structure is really coming along nicely now. If I could just resolve this last thing:
viewtopic.php?t=8011
(making my third level menus close when the main menu is clicked on - not just when a sibling menu is selected)


Again, thanks a lot. I love the Milonic menus and the great support of this forum.
User avatar
kevin3442
Milonic God
Milonic God
Posts: 2460
Joined: Sat Sep 07, 2002 12:09 am
Location: Lincoln, NE
Contact:

Post by kevin3442 »

Glad it's shaping up to your liking.

I'll give the sub-sub menu issue some thought. I'll have to re-examine what happening so far, because I've forgotten most of it. Speaking of forgetting, if you don't get a reply later today, bump the topic to remind me.

Cheers,

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

Post by kevin3442 »

Update: I've worked at it some, but all I've been able to do so far is get the third-level menus to close when mousing over a main menu item (which, of course, must precede a click). No luck with actual clicking yet though. I have one other idea that I'll be able to try later.

Kevin
hlagoy
Advanced
Advanced
Posts: 10
Joined: Mon Sep 11, 2006 9:36 pm

Post by hlagoy »

Hi, just checking in to see if there has been any update.

Thanks again for all the work, I really appreciate it.
Post Reply