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:00
previously selected menu stays highlighted
Poster: opstalj
Dated: Thursday July 13 2006 - 11:47:40 BST
Hi,
I got the following problem: I am using the Milonic DHTML menu and structured my website as follows:
index.htm
menu_data.js
...
page1.htm
page1_1.htm <-- submenu 1 for page1 menu
page1_2.htm <-- submenu 2 for page1 menu
page2.htm
Now, when starting the site, the index.htm loads the menu and from there, you can navigate further.
Suppose I navigate to page1_1 (via menu -> page1 -> page1_1), then page1_1 is opened OK.
However, the menus page1 and page1_1 stay highlighted ??
(after clicking on another link, eg. page2, the highlighting disappears).
If I now click on Home (linking back to index.htm), then the Home menu stays highlighted ... etc. ...
Any idea what can cause this ?
The page1.htm, page1_1.htm, ... all display the same menu (derived from
menu_data.js).
Here is an extrace from menu_data.js:
Code:
with(milonic=new menuname("My website")){
alwaysvisible=1;
left=10;
orientation="horizontal";
style=menuStyle;
top=10;
aI("text=Home;url=http://mywebsite/index.htm;status=Back to the homepage;");
aI("showmenu=Page1;text=Page1;");
aI("showmenu=Page2;text=Page2;");
aI("showmenu=Links;text=Links;");
}
with(milonic=new menuname("Page1")){
margin=3;
style=submenuStyle;
aI("text=Page1_1;url=http://mywebsite/page1_1.htm;");
aI("text=Page1_2;url=http://mywebsite/page1_2.htm;");
}
alwaysvisible=1;
left=10;
orientation="horizontal";
style=menuStyle;
top=10;
aI("text=Home;url=http://mywebsite/index.htm;status=Back to the homepage;");
aI("showmenu=Page1;text=Page1;");
aI("showmenu=Page2;text=Page2;");
aI("showmenu=Links;text=Links;");
}
with(milonic=new menuname("Page1")){
margin=3;
style=submenuStyle;
aI("text=Page1_1;url=http://mywebsite/page1_1.htm;");
aI("text=Page1_2;url=http://mywebsite/page1_2.htm;");
}
and in each pagex.htm, I have added:
Code:
<!-- ***** This is the section of code you need to paste into your web pages ***** -->
<script type="text/javascript" src="milonic_src.js"></script>
<noscript><a href="http://www.milonic.com/">DHTML Menu JavaScript Menu Powered by Milonic</a></noscript>
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
</script>
<script type="text/javascript" src="menu_data.js"></script>
<!-- **** JavaScript Menu HTML Code -->
<script type="text/javascript" src="milonic_src.js"></script>
<noscript><a href="http://www.milonic.com/">DHTML Menu JavaScript Menu Powered by Milonic</a></noscript>
<script type="text/javascript">
if(ns4)_d.write("<scr"+"ipt type=text/javascript src=mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt type=text/javascript src=mmenudom.js><\/scr"+"ipt>");
</script>
<script type="text/javascript" src="menu_data.js"></script>
<!-- **** JavaScript Menu HTML Code -->
Note: maybe there is another way to keep the same menu for all my pages and navigate via the links in the menu ? If so, please tell me.
Thanks in advance.
Oh yes, some more properties of menu_data.js:
Code:
with(menuStyle=new mm_style()){
styleid=1;
bordercolor="#8A867A";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="70%";
fontstyle="normal";
fontweight="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
image="bluedots.gif";
imagepadding=6;
offbgcolor="#ECE9D8";
offcolor="#000000";
onbgcolor="#C1D2EE";
oncolor="#000000";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
overimage="whitedots.gif";
padding=6;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#ffffff";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
}
with(submenuStyle=new mm_style()){
bordercolor="#8A867A";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="70%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#ECE9D8";
offcolor="#000000";
onbgcolor="#C1D2EE";
oncolor="#000000";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#758CC9";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
}
styleid=1;
bordercolor="#8A867A";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="70%";
fontstyle="normal";
fontweight="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
image="bluedots.gif";
imagepadding=6;
offbgcolor="#ECE9D8";
offcolor="#000000";
onbgcolor="#C1D2EE";
oncolor="#000000";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
overimage="whitedots.gif";
padding=6;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#ffffff";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
}
with(submenuStyle=new mm_style()){
bordercolor="#8A867A";
borderstyle="solid";
borderwidth=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="70%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#ECE9D8";
offcolor="#000000";
onbgcolor="#C1D2EE";
oncolor="#000000";
outfilter="randomdissolve(duration=0.3)";
overfilter="Fade(duration=0.2);Alpha(opacity=90);Shadow(color=#777777', Direction=135, Strength=5)";
padding=4;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#758CC9";
separatorsize=1;
subimage="arrow.gif";
subimagepadding=2;
}
Almost forgot the mention the version I am working with:
menu_sample40_ver5_752.zip
Poster: Ruth
Dated: Thursday July 13 2006 - 18:04:13 BST
Hi,
That's from the path highlighting property you have set in the menu to let people know where they are with relation to the menu.
Code:
pagebgcolor="#82B6D7";
pagecolor="black";
pagecolor="black";
You can either put // in front of each which will disable it, or remove it altogether.
There are other properties for 'highlighting' the menu. You can use pageimage, which would put whatever image you have created...say a double red arrow like shows on the Milonic site, or maybe a bright colored dot, or you can eliminate the pagebgcolor and make just the pagecolor different, that would just changed the font color to show people their location on the menu.
opstalj wrote:
Note: maybe there is another way to keep the same menu for all my pages and navigate via the links in the menu ? If so, please tell me.
I'm not sure what you mean by this. The only way I know to keep the same menu on every page is to put the calls for the same menu_data.js file on every page where you want the menu.
Ruth
Great ! It now works as I want it to work !
Poster: opstalj
Dated: Friday July 14 2006 - 7:28:08 BST
Hi Ruth,
Thanks for your fast reply. Great work.
One more clarification: I was thinking to use frames, eg:
- top frame = the menu (from Milonic)
- bottom frame = the content of the different pages you navigate to via the menu
But this gives me another problem: when going through the menu, it could be that it stretches downwards (eg: 5 topics in 1 menu). But when displaying the different menu items, only those fitting in the top frame are shown, the other items are lost, that is: the menu does not show on top of the bottom frame ... .
Example:
.Home........Page 1........Page 2
...................page1_1
...................page1_2
...................page1_3
-------------------------------------
Here the bottom frame starts.
-> problem: page1_4 and page1_5 of the menu are not shown anymore
(they do not show on top of the bottom frame ...).
Do you know whether there is a workaround for that ?
Poster: Ruth
Dated: Friday July 14 2006 - 17:10:01 BST
Hi,
Yes, there's a 'workaround'. You have to use the frames menu, you can set your menu frame to be big enough and set the submenus to open horizontally so that all of them fit in that frame, or you can use an iframe instead of frames. The submenus are not disappearing, they are down the page they are on. A frames page is like opening a browser window and putting in different pages in the same window setting up specified space for each page, but they are different pages, not like divs, or tables that you are dividing, so the submenus are opening on the page where the menu is which only has the defined space part of it visible.
Be aware that the frames menu has been created because many existing sites are frames and can't be altered, but there are issue that arise with that menu. The submenus sometimes don't close...for whatever reason they want someone to actually put the mouse on them to close. That issue is being worked on now.
If you can do it, I'd use the iframes. The only browser I know that has a problem with that is Opera and it is there problem and they don't seem to want to or be able to fix it. It treats an iframe like a regular frame instead of an inline frame. The newer versions of Opera might work now, I have an old one.
Or you could use divs, put the menu at the top of the page and then set the whole bottom of the page as a div with an id that you can then target your links to. I'd need to see the layout to give you a better idea of how to do it.
http://www.milonic.com/frames/
This is the one that shows the menu opening over an iframe, it has the explanation for that and also for opening windows and targeting the iframe as the place to open the pages from the menu.
http://www.milonic.com/menusample11.php
Hope this helps.
Ruth
again great help
Poster: opstalj
Dated: Monday July 17 2006 - 7:30:54 BST
Ruth, thanks a lot for your help. Exactly what I needed.