Targeting Sub menu's - can it be done??

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
User avatar
Cam
Advanced
Advanced
Posts: 11
Joined: Thu Oct 02, 2003 12:39 pm
Location: Scotland

Targeting Sub menu's - can it be done??

Post by Cam »

Hi there,

Can anyone help me with this prob,

Below is a sample of sample of code that i use to get my menu to open into a framed page: it works but i don't really know how as I am using V5 (it isn't supposed to work with frames :oops: thats why i'm posting here )

Question

How do I , or even can I target the submenu to appear in a frame???

I put the code here so that someone with more knowledge might be able to figure it out.

If you need the whole js file its at http://www.angelfire.com/alt2/noddy417/menu_data2.js


with(milonic=new menuname("main menu")){
style=menuStyle;
top=65;
left=450;
alwaysvisible=1;
orientation="horizontal";
aI("text=Start;url=http://www.angelfire.com/alt2/noddy417/ ... tatus=Back To Home Page;target=main;");
aI("text=Lesson Guides;showmenu=about;");
aI("text=My Lessons;showmenu=lessons;");
aI("text=Links;showmenu=links;");
}

------------------------------------------

with(milonic=new menuname("links")){
style=menuStyle;
aI("text=Milonic Menu;url=http://www.milonic.co.uk/menu;target=main;");
aI("text=Web Hosting;url=http://www.lycos.com;target=main;");
aI("text=XHTML Lessons;url=http://www.about.com;target=main;");
aI("text=Free Javascript;showmenu=java;status=Javascript;target=main;");
aI("text=Free Graphics;showmenu=graphics;status=Free Graphics;target=main;");
}

Thanks to anyone that can help

Cam
User avatar
Hergio
Milonic God
Milonic God
Posts: 1123
Joined: Wed Jun 12, 2002 7:46 pm
Location: Rochester, NY

Post by Hergio »

What milonic means by not support frames is that the menu does not easily give you the ability to have a main menu in one frame and when hovering over that, have another submenu appear in a different frame. It could be done in version 3, but Milonic chose to not implement this time around.
So to answer your question, you can't (right now or without some tweaking) have a submenu appear in a frame based on the actions of another menu in another frame.

What is supported is by clicking in a menu item having the corresponding URL show up in another frame or iframe. Which is what you have already gotten your menu to do.
Dave Hergert
Software Engineer
"Helping to make the menu better, one :?: at a time."
User avatar
Cam
Advanced
Advanced
Posts: 11
Joined: Thu Oct 02, 2003 12:39 pm
Location: Scotland

tweaking

Post by Cam »

ah well, thanks anyway it was worth the ask!

-how much tweaking is required and can a novice do it or is it more complex

thanks
User avatar
Hergio
Milonic God
Milonic God
Posts: 1123
Joined: Wed Jun 12, 2002 7:46 pm
Location: Rochester, NY

Post by Hergio »

Now I am doing this help some of those people out there that want to use the version 5 menu with frames. I would just like to first say that Milonic nor I, will not support this method. I am giving it out as is and if you are not savvy enough with Javascript to understand it and figure it out, then do not use it and don't ask Milonic about it. Also this is tested in IE only, if you want it in Netscape, you may have to edit it yourself.

I will refer to the "parent frame" from now on as the frame with the main menu which opens sub menus in the "child frame". This little tweak will allow you to have a main menu in the parent frame which opens menus in another child frame. However, when you mouseout of the main menu, any submenus open in the child frame will remain open until you hover into and out of one. Hovering over different menu items in the parent frame will open and close menus in the child frame as expected. Also, when you enter a sub menu, the parent menu item will not remain highlighted since they are in separate menus on separate pages and they technically have no knowledge of eachother, this tweak is only meant as a "bridge" between the two frames and is just that, a tweak, so you can't have everything work perfectly, eh?

What each page/frame should have:
You must include as usual the milonic_src, mmenudom, and mmenuns4 files into ALL frames the same way you do now. Each page uses them separately. Instead of the normal menu_data file in the parent frame with the main menu, you should include a menu_data_main.js file which looks just like your usual menu_data file except it only has one style and one menu definition with alwaysvisible set to 1. Keep drawmenus() at the bottom of the file. In the child frame, you should have a menu_data_subs.js file included that contains styles and menu definitions for any menus you want to show up in that frame based on mouseovers in the parent frame. Also leave the drawMenus() call just like in the other js file.

What each menu_data_xxxx.js file should contain:
**** menu_data_main.js ****
As stated, should look like the usual menu_data, just one style and one menu definition. Copy this function into the top of your menu_data_main.js file.

Code: Select all

//distantMenu - opens up milonic menuName inside of frameName
function distantMenu( menuName, frameName )
{
	parent.frames[frameName].popdown();
	parent.frames[frameName].popup(menuName);
}
Now your aI()'s for menus should look like this.

Code: Select all

aI("text=Home;url=#;status=;onfunction=distantMenu('home','mainFrame');");
aI("text=Products;url=#;status=;onfunction=distantMenu('products','mainFrame');");
Notice how there is NO showmenu call, this is on purpose, we are relying on the onfunction method to call on the menu, not showmenu. Remember, leave in drawMenus();.

**** menu_data_subs.js ****
This file should also look like the usual menu_data file. But each menu definition should have a TOP and LEFT defined and alwaysvisible set to 0. You must specify top and left to determine where the menu will appear when its caller is moused over in the parent frame. Align it how you want to get the effect you want. For each menu name you specified in the parent frame, you have to have a menu with that name in this file in this frame so it knows what to open. So for my example above, I would have something like...

Code: Select all

...style stuff....

with(milonic=new menuname("home")){
top="30";
left="0";
orientation="vertical";
itemwidth=170;
borderwidth=1;
margin=3;
style=SubStyle;
aI("text=GO back home;url=/default.htm;status=Go Home;");
aI("text=Other;url=other.htm;status=Go Other;");
}
with(milonic=new menuname("products")){
top="50";
left="0";
orientation="vertical";
itemwidth=170;
borderwidth=1;
margin=3;
style=SubStyle;
aI("text=Product 1;url=/prods/item1.htm;");
aI("text=Product 2;url=/prods/item2.htm;");
}

drawMenus();
These values would make the menus butt up against the left side of the frame since left is "0". My top position helped to make the menu line up within the area of where the main menu item is in my parent frame.

Like I said, this is not supported my Milonic nor myself, I just threw it up so anyone who REALLY wanted to see if they could get it done can do it and still have the benefits and features of the new version. If something is wrong with my code or directions, I will fix it, but if you can't get it to work, I can't use my time to support it when we have the real stuff to worry about.

Enjoy it and use it at your own risk. ;)
Dave Hergert
Software Engineer
"Helping to make the menu better, one :?: at a time."
brettzamora
Advanced
Advanced
Posts: 26
Joined: Thu Oct 10, 2002 5:32 pm

Post by brettzamora »

Hi...

The sample you provided works great... I thought I'd add a litte tweak that I applied based on the disclaimer you made. (line hilited in bold blue, below)...

I added a function just like your distantMenu() function, except all it does is hide menus in the target frame. That way when I hover over parent menu items that don't have submenus in another frame, the submenus do in fact hide. I'll put my samples below...

[Text from original message]

...will refer to the "parent frame" from now on as the frame with the main menu which opens sub menus in the "child frame". This little tweak will allow you to have a main menu in the parent frame which opens menus in another child frame. However, when you mouseout of the main menu, any submenus open in the child frame will remain open until you hover into and out of one. Hovering over different menu items in the parent frame will open and close menus in the child frame as expected. Also, when you enter a sub menu, the parent menu item will not remain highlighted since they are in separate menus on separate pages and they technically have no knowledge of eachother, this tweak is only meant as a "bridge" between the two frames and is just that, a tweak, so you can't have everything work perfectly, eh?

[End text from original message]

The extra function (hideMenu) in the parent html page...

Code: Select all

function displayMenu( menuName, frameName ) 
{ 
   parent.frames[frameName].popdown(); 
   parent.frames[frameName].popup(menuName); 
} 

function hideMenu(frameName ) 
{ 
   parent.frames[frameName].popdown(); 
} 
My parent menu now has items that looks like this...

Code: Select all

aI("text=Request Support;onfunction=displayMenu('support','main');"); 
aI("text=Technician Login;onfunction=hideMenu('main');") ;
aI("text=Statistics Page;onfunction=hideMenu('main');") ;
Anyway... thanks for the great sample. It works very nicely.

Brett
twesson
Advanced
Advanced
Posts: 14
Joined: Sun Feb 15, 2004 7:10 pm
Location: Chicago, IL

Post by twesson »

Sorry about this post -- I just realized that whenever I move focus off of the horizontal menu (even to its corresponding vertical menu), the vertical menu goes away as I'm attempting to select an option from it.

If I can figure out a workaround I'll repost with the right code.

-------------------------------------

I just wanted to acknowledge what I believe you are talking about Brett.

What I think I see with regards to your code is that you have some menu items in your horizontal menu that do not open up a vertical menu and because of that you want the previous popup to go away -- makes perfect sense.

However, I was also having a problem with what happened to the popup when I simply diverted focus from its parent in the horizontal menu without hitting the previous/next horizontal menu option (e.g. moved the mouse above the horizontal menu or to the right of its last option).

function distantMenu( menuName, frameName )
{
// parent.frames[frameName].popdown();
parent.frames[frameName].popup(menuName);
}

function hideMenu(frameName )
{
parent.frames[frameName].popdown();
}

Notice how I remarked out the first line in distantMenu().

aI("text=Site Menu;onfunction=distantMenu('SiteMenu','mainmenu_body');offfunction=hideMenu('mainmenu_body');");

Also notice the use of the offfunction. It's a little more code to write, but it does the trick.
User avatar
fullejo
Beginner
Beginner
Posts: 8
Joined: Wed Jul 23, 2003 7:25 pm

Post by fullejo »

Thanks a lot for the very useful work around... I'm finding it to be a great help for our intranet applications (we have a header with the menu in it in a tiny frame at the top)

I have a few problems I'm runing into, and I know that this is unsupported but this is a public forum and I figured I'd see if anybody had any brioght ideas abotu how I might go about fixing this.

First problem:
When menus get too big for the screen and scroll, they are positioned about 10 pixels lower than they should be. This is only the menus that have scrollbars. It seems to be an issue related to the frames, because I did some testing without frames and the exact same menu works fine with no frames when it uses scrollbars.

Second problem:
This refers to the workaround twesson came up with to turn the menus off if you mouse off the menu header in the last post. The problem is that this doesn't work in Mozilla, when you move your mouse down to the menus, it closes the menu. What I was thinking is that if there was some way yuou cold set an if statement in the menu close function, something like this:

Code: Select all

function hideMenu(frameName,menuName) { 
   if(the mouse is not somewhere on menuName) {
      parent.frames[frameName].popdown();
   }
} 

The problem is, I don't know how to do this...

No matter if nobody has any suggestions, I can probably figure something out, but just wondering.
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

Hi,
I wouldnt' know how to do any of this stuff. But, as to the menu being 10 or so pixels down when the scroll shows up. When something like that happens I try and check margins and css margin and padding to see if somehow it's affecting things. Just a suggestion.

Ruth
joejoeE
Beginner
Beginner
Posts: 7
Joined: Fri Dec 17, 2004 4:22 pm

dynamically placing sub menus

Post by joejoeE »

This a great hack even though it is not supported. I was wondering if anyone knows how to get the sub menus to line up under the menu dynamically because if the page is resized or the user scroll down the page, the sub menus popup off the screen. Has anyone tried this or had this problem?
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

Hi,
Without seeing your frame layout, I can't really give you an answer about opening the 'submenus' below the main menu items, you could actually design it like that but it's the layout you design and the top/left position you set in the 'child' menus to get it like that, and you'd have to position the main menu as a fixed position.

As to the rest, I'm not a code person so my explanation will be kind of everyday. You don't have one menu which opens submenus, you have two totally different menus: one which you set to visible and contains no submenus, which you put into whichever frame you want, and the other which because you have no visible menus seems like it's all submenus. Like the html popup/popdn you can have for mouseover on links. In the visible one, you have that function which is just saying when you mouseover something open whatever pop menu is named. On each aI string you call that function to open one of the invisible menus in Menu 2. Except for that function there is no link between the two menus, no programming link of a main menu opening a submenu on mouseover.

I tried making a div that moves down when the page scrolls and putting the menu 2 popmenus in that, but though it worked in IE5.5, it wouldn't work in Netscape, nor Firefox, so would also probably not work on a Mac. So, I think to get it to do what you want, you need to have some kind of function written for the popmenus which 1st tell them where to open, since you need a position to have them open at all the first time, then you'd need another function to tell them to move somehow if the page is resized or if the page is scrolled.

Ruth
joejoeE
Beginner
Beginner
Posts: 7
Joined: Fri Dec 17, 2004 4:22 pm

Div

Post by joejoeE »

Well, using the function posted above, Firefox and Netscape kept the menu on the screen when scrolling down a page. On the other hand, the menu scrolls up with the page in IE. What is a DIV and how did you place the submenus in the DIV?
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

Here's a link to give you an idea of what you can do with a div. You can't really see anything until you get to number 9 because they didn't put anything in the div in the other examples and didn't put a border around it to show it. DIVS

Do you have a link to the site? You say that the pop ups move with Netscape and Firebird and I have both. If it's working in them, I would think it should work in IE, but I'd need the site to give to the programmers to check.

Ruth
joejoeE
Beginner
Beginner
Posts: 7
Joined: Fri Dec 17, 2004 4:22 pm

Files

Post by joejoeE »

I don't have it online so I can't give you a link. Can I email it to you? you can get me at Joejolowski@hotmail.com
joejoeE
Beginner
Beginner
Posts: 7
Joined: Fri Dec 17, 2004 4:22 pm

another thought

Post by joejoeE »

after posting that last reply i figured out a different way that the submenus can be placed dynamically. instead of defining the menus with an absolute position. It can be done using...

Code: Select all

left="offset=-230"; 
screenposition="right;top;"; 
instead of...

Code: Select all

top="50";
left="0";
But I still have the issue that when viewing in IE6, the menu will not move down the page when scrolling down. I tried using...

Code: Select all

followscroll=1;
in the menu declaration but it doesn't seem to work. Even in the sample menu (http://milonic.com/menusample10.php) for followscroll, the submenu doesn't follow the scroll but I think that is because it isn't defined for it. I have two frames (top/bottom) just like the example. And it is my understanding the the bottom frame menus are acting completely seperately from the top menu and they are in fact seperate menus individually. If they are in fact seperate menus, shouldn't the followscroll property work? Or does this only work for the navigation bar?
joejoeE
Beginner
Beginner
Posts: 7
Joined: Fri Dec 17, 2004 4:22 pm

another thought

Post by joejoeE »

sorry, this the last post tonight, i promise. There are also a bunch of global variables for scroll top/bottom, browser height/width, and mouse X/Y. I have been trying to get these to work but i haven't had any sucess. Is is possible that when defining a menu I can set these variables to the top and left positions to place the menus so that they will move if the person scrolls or resizes the browser? for example...

Code: Select all

with(milonic=new menuname("products")){
margin=3;
top= _bH;                                 //<--------- use the variables here
left= _bW;                                   //<-----------and here
orientation="vertical";
itemwidth=170;
borderwidth=1;
margin=3;
style=SubStyle;
aI("text=Product 1;url=/prods/item1.htm;");
aI("text=Product 2;url=/prods/item2.htm;");
}
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Post by Ruth »

If you could post the html code for the main frameset you have, and the main menu data code, and the pop menu data code and tell me which page gets the main and which the pop menus I can make the pages and test it in IE 5.5 which is what I have and see if I can figure out what's happening. Posting it here also means others would be able to look at it and maybe find a solution.

Ruth
joejoeE
Beginner
Beginner
Posts: 7
Joined: Fri Dec 17, 2004 4:22 pm

code

Post by joejoeE »

Frameset:

Code: Select all

<html>
<head>
<title>Frames Test</title>
</head>
<frameset rows="42,1*" border="1" frameborder="0">
  <frame name="header" scrolling="no" noresize target="main" src="menu.htm">
    <frame name="content"  scrolling="AUTO" src="frames_body.htm">
  <noframes>
  <body>
  <p>This page uses frames, but your browser doesn't support them.</p>
  </body>
  </noframes>
</frameset>
</html>
this is all the global variables. put in one file and include src from both frames:

Code: Select all

function distantMenu( menuName, frameName )
{
   parent.frames[frameName].popdown();
   
   parent.frames[frameName].popup(menuName);
   //parent.content.popup(menuName);
}
function hideMenu( frameName )
{
   parent.frames[frameName].popdown();
} 

//ANYTHING BELOW THIS IS EDITABLE - EDIT AT YOUR OWN RISK
//NAVIGATION SETTINGS
_menuCloseDelay=10           // The time delay for menus to remain visible on mouse out
_menuOpenDelay=10            // The time delay before menus open on mouse over
_subOffsetTop=0              // Sub menu top offset
_subOffsetLeft=0            // Sub menu left offset

with(topStyle=new mm_style()){
onbgcolor="#4F8EB6";
oncolor="#ffffff";
offbgcolor="#DCE9F0";
offcolor="#515151";
//bordercolor="#296488";
//borderstyle="solid";
//borderwidth=1;
separatorcolor="#2D729D";
separatorsize="1";
padding=3;		
fontsize="75%"; 	
fontstyle="normal";	
fontfamily="Verdana, Tahoma, Arial";
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="";
subimagepadding="2";
overfilter="";
outfilter="";
}

with(subStyle=new mm_style()){
onbgcolor="#4F8EB6";
oncolor="#ffffff";
offbgcolor="#DCE9F0";
offcolor="#515151";
bordercolor="#296488";
borderstyle="solid";
borderwidth=1;
separatorcolor="#2D729D";
separatorsize="1";
padding=3;		
fontsize="75%";	
fontstyle="normal";	
fontfamily="Verdana, Tahoma, Arial";
pagecolor="black";
pagebgcolor="#82B6D7";
headercolor="#000000";
headerbgcolor="#ffffff";
subimage="";
subimagepadding="2";
overfilter="";
outfilter="";
}
top frame that has the nav bar:

Code: Select all

with(milonic=new menuname("Main Menu")){
style=topStyle;	
top=0; 
left=0; 
alwaysvisible=1; 
keepalive=1;screenposition="right;bottom;"; 
orientation="horizontal";
followscroll=1;
aI("text=Home;url=www.yahoo.com;status=Back To Home Page;onfunction=hideMenu('content');");
aI("text=Org Header 1;clickfunction=distantMenu('Custom','content');");
aI("text=Help;clickfunction=distantMenu('Help','content');");
aI("text=Logoff;url=www.yahoo.com;status=Back To Home Page;onfunction=hideMenu('content');");}

drawMenus();
bottom frame that has the submenus..

Code: Select all

with(milonic=new menuname("Custom")){
style=subStyle; left="offset=-100"; screenposition="right;top;"; 
aI("text=Yahoo;url=http://www.yahoo.com;");
aI("text=Ebay;url=http://www.ebay.com;");}

with(milonic=new menuname("Help")){
style=subStyle; left="offset=-10"; screenposition="right;top;"; 
aI("text=Help;url=www.yahoo.com;");
aI("text=What's New;url=www.yahoo.com;");
aI("text=Contact Us;url=www.yahoo.com;");
aI("text=Privacy Policy;url=www.yahoo.com;");
aI("text=Security Policy;url=www.yahoo.com;");
aI("text=Terms of Use;url=www.yahoo.com;");
}

drawMenus();
Post Reply