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:06
Targeting Sub menu's - can it be done??
Poster: Cam
Dated: Monday October 6 2003 - 7:56:44 BST
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 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/start.html;status=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
Poster: Hergio
Dated: Monday October 6 2003 - 17:03:43 BST
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.
tweaking
Poster: Cam
Dated: Monday October 6 2003 - 17:20:54 BST
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
Poster: Hergio
Dated: Monday October 6 2003 - 17:48:08 BST
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:
//distantMenu - opens up milonic menuName inside of frameName
function distantMenu( menuName, frameName )
{
parent.frames[frameName].popdown();
parent.frames[frameName].popup(menuName);
}
function distantMenu( menuName, frameName )
{
parent.frames[frameName].popdown();
parent.frames[frameName].popup(menuName);
}
Now your aI()'s for menus should look like this.
Code:
aI("text=Home;url=#;status=;onfunction=distantMenu('home','mainFrame');");
aI("text=Products;url=#;status=;onfunction=distantMenu('products','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:
...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();
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.
Poster: brettzamora
Dated: Friday February 6 2004 - 2:51:36 GMT
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:
function displayMenu( menuName, frameName )
{
parent.frames[frameName].popdown();
parent.frames[frameName].popup(menuName);
}
function hideMenu(frameName )
{
parent.frames[frameName].popdown();
}
{
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:
aI("text=Request Support;onfunction=displayMenu('support','main');");
aI("text=Technician Login;onfunction=hideMenu('main');") ;
aI("text=Statistics Page;onfunction=hideMenu('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
Poster: twesson
Dated: Monday February 16 2004 - 16:23:55 GMT
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.
Poster: fullejo
Dated: Friday July 9 2004 - 18:21:55 BST
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:
function hideMenu(frameName,menuName) {
if(the mouse is not somewhere on menuName) {
parent.frames[frameName].popdown();
}
}
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.
Poster: Ruth
Dated: Friday July 9 2004 - 20:51:38 BST
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
dynamically placing sub menus
Poster: joejoeE
Dated: Friday December 17 2004 - 15:30:57 GMT
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?
Poster: Ruth
Dated: Friday December 17 2004 - 23:29:22 GMT
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
Div
Poster: joejoeE
Dated: Saturday December 18 2004 - 21:48:23 GMT
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?
Poster: Ruth
Dated: Sunday December 19 2004 - 2:50:22 GMT
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
Files
Poster: joejoeE
Dated: Sunday December 19 2004 - 23:21:31 GMT
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 __at__ hotmail.com
another thought
Poster: joejoeE
Dated: Monday December 20 2004 - 2:06:18 GMT
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:
left="offset=-230";
screenposition="right;top;";
instead of... screenposition="right;top;";
Code:
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...left="0";
Code:
followscroll=1;
in the menu declaration but it doesn't seem to work. Even in the sample menu (http://www.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?
another thought
Poster: joejoeE
Dated: Monday December 20 2004 - 2:33:28 GMT
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:
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;");
}
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;");
}
Poster: Ruth
Dated: Monday December 20 2004 - 7:34:20 GMT
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
code
Poster: joejoeE
Dated: Monday December 20 2004 - 16:11:18 GMT
Frameset:
Code:
<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>
<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:
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="";
}
{
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:
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();
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:
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();
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();