Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Archived Topics for the old Version 3.0 JavaScript Menu
Forum Topic: Click to view post
Last Updated: Wednesday July 18 2012 - 06:07:16

autodisplay (but not permanent) submenu


Poster: molesquirrel
Dated: Wednesday December 25 2002 - 2:53:25 GMT

Hey -

I'm looking into creating a submenu that appears by default (kind of like the always visible flag), but adheres to the timegap variable, and will close after awhile. To put it another way, I'm going to have a menu selection that dynamically loads some sentence of information, and I want it to appear on the screen for a little bit, but disappear after some set period of time, or after they click on it. I realize that using the Menu for this isn't the most clean cut way, but I'm already using the Menu for other elements on my page, and if I could extend it to handle this, all the better.

Thanks for your time~


Poster: kevin3442
Dated: Sunday December 29 2002 - 6:00:31 GMT

Hi molesquirrel,

I have some ideas. You could probably achieve the desired effect with a few small, additional functions that'll hook into existing functions in mmenu.js. But before I jump into it, I have some questions about specifics:

(1) Do you want to show an actual menu, with multiple items, or just something more like a popup text box?

(2) What event(s) will trigger the showing of the timed menu? On the one hand, your description makes it sound like you want the menu to appear automatically when the page loads (Always Visible), but you also describe having the timed menu appear as the result of another menu selection. Both maybe?

(3) Will clicking on the "popup" menu simply dismiss it, or do you want it to be able to link to a url as well?

Kevin


Poster: molesquirrel
Dated: Monday December 30 2002 - 5:48:03 GMT

To answer your questions:

(1 & 3) Popup text box. Clicking on it will do nothing but make it disappear.

(2) Some dynamic code (php) will decide if this 'box' is to be included - so on page loadup, it will know where or not it should appear. It should stay up for some timed period. One thing I might have neglected to mention is that I'd like to have different 'time out' periods for this box and the rest of the menu. If I have a sentence in the box saying 'you are logged in to the site', or whatever, I might want it to stay up to 10 seconds, whereas a menu might collapse at half a second.

I did some browsing since I posted the original message, and found a way to do this using only a few lines of code bent towards dhtml, so if you are busy at all, I wouldn't worry about trying to put together something for this; I appreciate your response thus far.


Poster: kevin3442
Dated: Monday December 30 2002 - 18:12:57 GMT

Thanks for the answers. Out of curiousity, I already figured out how you could do what you want using the menus. If you're interested, let me know and I'll follow up. Otherwise, I'll assume you plan to stick with the other method you found.

Kevin


Poster: molesquirrel
Dated: Monday December 30 2002 - 23:06:30 GMT

After some more thought, I think it would be beneficial to see what you thought of; another little feature I'd like would be possible if the menu was integrated with the popup box. So, let me know what you have. Thanks!


Poster: kevin3442
Dated: Tuesday December 31 2002 - 8:08:00 GMT

OK, here goes...

It'd probably be easier if I could attach a .zip. As it is, I'll just paste the relevent code into code boxes here, and you can cut and paste the box contents to recreate the pertinent files on your end.

Rather than go into my usual, extensive (and sometimes too wordy) explanations, I'll just give you the files I was working with while I was playing around. You'll probably be able to figure out the functions, and how the various examples use them.

All three of the following files go in the same directory, along with a copy of mmenu.js

(1) index.html -- a small file I was using to test the various functions:
Code:
<html>
<head>
<title></title>
<style>
TD {FONT-SIZE: 11pt; COLOR: #000000; FONT-FAMILY: Verdana, Helvetica}
HR {COLOR: #000099}
</style>
<SCRIPT language=JavaScript src="kc_timedMenus.js" type=text/javascript></SCRIPT>
</head>

<body bgcolor=white topmargin=20>
<SCRIPT language=JavaScript src="menu_array.js" type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript src="mmenu.js" type=text/javascript></SCRIPT>
<table border="0" cellPadding="0" cellSpacing="15" width="740">
<tr>
<td class="normal"><font class="normal"><hr>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam aliquet dui nec justo. Donec odio magna, eleifend at, pulvinar in, sodales quis, neque. Curabitur auctor ipsum suscipit enim. Sed adipiscing lectus mattis nisl. Duis et arcu ac mauris mattis nonummy. Praesent laoreet lobortis quam. Quisque euismod dui. Donec accumsan metus ac arcu fermentum sagittis. Fusce suscipit metus at lorem. Mauris volutpat pretium arcu. Ut nibh velit, cursus eget, imperdiet bibendum, aliquam id, lectus. Fusce laoreet purus quis justo. Curabitur posuere.<br>
<hr>
</body>

</html>


(2) kc_timedMenus.js -- contains the custom functions to control timed popups/menus. All "popups" are essentially menus in the sense that they are constructed using the addmenu() function, but popups with no real links are like a basic popup textbox. The code is pretty straight forward; I've also added some comments for each function to document the parameters being passed. Please be kind ;) ... as I said, I was just playing around out of curiosity... the code could probably be improved here and there! At least you'll get an idea of the various approaches I had in mind. Feel free to make improvements (and to let me know what they are, if you like).
Code:
var kc_menuTimer = 0;

// Check to see if menuName is still open.

function kc_isOpen(menuName)
{
  var menuStyle = gmstyle("menu" + getMenuByName(menuName));

  if (ns4) {
    return (menuStyle.visibility == "show");
  }
  else {
    return (menuStyle.visibility != "hidden");
  }
}

// Set menuName's AlwaysVisible property (1 or 0), then show menuName.  If alwaysVis = 0
// menuName will close when calling submenu (and others from the same main menu) close.
// If alwaysVis = 1, menuName will remain open until manually closed.

function kc_showMenu(menuName, alwaysVis)
{
  var menuNum = getMenuByName(menuName);
  var menuArr = eval("menu" + menuNum);
  menuArr[7] = alwaysVis;
  SDiv("menu" + menuNum, 1);
}

// If menuName is currently open, close it.

function kc_hideMenu(menuName)
{
  if (kc_isOpen(menuName)) SDiv("menu" + getMenuByName(menuName), 0);
  if (kc_menuTimer) clearTimeout(kc_menuTimer);
}

// Show menuName for openTime milliseconds and close the calling menu.

function kc_timedMenu(menuName, openTime) // use of popup() closes calling menu
{
  var menuArr = eval("menu" + getMenuByName(menuName));
  menuArr[7] = 1;
  popup(menuName);
  var functionStr = "kc_hideMenu('" + menuName + "')";
  kc_menuTimer = setTimeout(functionStr, openTime);
}

// Show menuName for openTime milliseconds and leave the calling menu open.

function kc_timedMenuCallerOpen(menuName, openTime) // leaves calling menu open
{
  kc_showMenu(menuName, 1);
  var functionStr = "kc_hideMenu('" + menuName + "')";
  kc_menuTimer = setTimeout(functionStr, openTime);
}

// Open the url in a new window.  windoName = the new window's name attribute.
// t = top coordinate, l = left, w = width, h = height, callingMenuNames = a
// comma-separated string (NO SPACES) of menu names to close when the new window
// opens (i.e., to close an entire cascade of submenus).

function kc_linkToNewWindow(url, windowName, t, l, w, h, callingMenuNames)
{
  var winAttributes = "resizable=yes,scrollbars=yes,dependent=yes" + ",top=" + t + ",left=" + l + ",width=" + w + ",height=" + h;

  var menusToClose = callingMenuNames.split(",");
  for (var i in menusToClose) kc_hideMenu(menusToClose[i]);

  var newWin = window.open(url, windowName, winAttributes);
  newWin.focus();
}

// onload event handler... causes a popup textbox on load.

window.onload = function()
{
  on_load();
}

function on_load()
{
  kc_timedMenu('onloadbox',5000);
}


(3) menu_array.js -- standard array file to integrate the Popup Examples into a normal menu (borrowed partially from the horizontal menu sample on the Milonic site). Comments above each example in the code briefly explains what the example does... study the examples, the calling menus, and the result to see how it works.
Code:
/*
Milonic DHTML Menu
Written by Andy Woolley
Copyright 2002 (c) Milonic Solutions. All Rights Reserved.
Plase vist http://www.milonic.co.uk/menu or e-mail menu3 __at__ milonic.com
You may use this menu on your web site free of charge as long as you place prominent links to http://www.milonic.co.uk/menu and
your inform us of your intentions with your URL AND ALL copyright notices remain in place in all files including your home page
Comercial support contracts are available on request if you cannot comply with the above rules.

Please note that major changes to this file have been made and is not compatible with earlier versions..

You no longer need to number your menus as in previous versions.
The new menu structure allows you to name the menu instead. This means that you can remove menus and not break the system.
The structure should also be much easier to modify, add & remove menus and menu items.

If you are having difficulty with the menu please read the FAQ at http://www.milonic.co.uk/menu/faq.php before contacting us.

Please note that the above text CAN be erased if you wish as long as copyright notices remain in place.
*/

//The following line is critical for menu operation, and MUST APPEAR ONLY ONCE.
menunum=0;menus=new Array();_d=document;function addmenu(){menunum++;menus[menunum]=menu;}function dumpmenus(){mt="<script language=JavaScript>";for(a=1;a<menus.length;a++){mt+=" menu"+a+"=menus["+a+"];"}mt+="<\/script>";_d.write(mt)}
//Please leave the above line intact. The above also needs to be enabled if it not already enabled unless you have more than one _array.js file


////////////////////////////////////
// Editable properties START here //
////////////////////////////////////

timegap=500                   // The time delay for menus to remain visible
followspeed=5                 // Follow Scrolling speed
followrate=40                 // Follow Scrolling Rate
suboffset_top=10              // Sub menu offset Top position
suboffset_left=10             // Sub menu offset Left position

boxEffect="Shadow(color='#202020', Direction=135, Strength=4)";

PlainStyle=["navy","ccccff","ffebdc","4b0082","000099","12","normal","bold","verdana,helvetica",4,,0,,,,,,,,,]
DropStyle=["navy","ccccff","ffebdc","4b0082","000099","10","normal","normal","verdana,helvetica",4,,0,,,,,,,,,]
BoxStyle=["navy","ccccff","ffebdc","4b0082","000099","10","normal","normal","verdana,helvetica",4,,0,,,,,,,,,]

popupNoLinkColors = " onfontcolor=" + BoxStyle[0] + ";onbackcolor=" + BoxStyle[1];

popupOffset = "offset=-20";

// Main menu
addmenu(menu=["mainmenu",10,20,,1,,PlainStyle,1,,,0,1,0,,,0,0,,,0,,
,"Home","index.html",,,1
,"Links","show-menu=Links",,,1
,"News","show-menu=News",,,1
,"Popup Examples","show-menu=popup_examples",,,1
])

// Menu of different popup/menu examples
addmenu(menu=["popup_examples",,,250,1,,DropStyle,0,,,0,0,0,,,0,0,,,0,,
,"Show the popup as long as any of this main menu's submenus are open (popup will close after timegap msec)","javascript:kc_showMenu(\"popup\",0);",,,1
,"Show the popup and leave it open until you click on it or select the next menu item (below).","javascript:kc_showMenu(\"popup\",1);",,,1
,"Close the popup if it&#39;s open, but keep this menu open","javascript:kc_hideMenu(\"popup\");",,,1
,"Show the popup for 5 seconds and keep this submenu open while mouseon","javascript:kc_timedMenuCallerOpen(\"popup\",5000);",,,1
,"Show the popup for 5 seconds and close this menu","javascript:kc_timedMenu(\"popup\",5000);",,,1
,"Open a 10-second popup containing a link to another page, shown in this window","javascript:kc_timedMenu(\"linkedbox_sw\",10000);",,,1
,"Open a 10-second popup containing a link to another page, shown in a new window","javascript:kc_timedMenu(\"linkedbox_nw\",10000);",,,1
,"Open a 15-second popup containing a vertical menu with links to content in a new window","javascript:kc_timedMenu(\"menubox\",15000);",,,1
])

// Example of an onload popup textbox
addmenu(menu=["onloadbox",10,popupOffset,250,1,"right",BoxStyle,0,,boxEffect,0,0,0,,,0,0,,,0,,
,"Greetings Earthling... Lead me to your taker.  I will close myself in 5 seconds, or you can click me now to close me.","javascript:kc_hideMenu(\"onloadbox\")"+popupNoLinkColors,,,0
])

// A popup textbox, no links
addmenu(menu=["popup",10,popupOffset,350,1,"right",BoxStyle,0,,boxEffect,0,0,0,,,0,0,,,0,,
,"Here is a popup text box.  You can wait the specified period \
of time for the box to close itself, or you can click the box to \
close it immediately.<br><hr><b>(1)</b> The box sits 10 pixels from \
the top because the Menu Top field in the &#39;popup&#39; menu is set \
to 10.<p><b>(2)</b> The box sits 20 pixels off the right margin \
because the Menu Left field in the &#39;popup&#39; menu is set to \
&#39;offset=-20&#39;.<p><b>(3)</b> The text wraps within the box \
because the Width field in the &#39;popup&#39; is set at 350px. \
If you want finer control over wrapping, leave the width field blank, \
then use \&amp;nbsp;&#39;s and &lt;br&gt;s to override automatic wrapping.\
<p><b>(4)</b> Since the popup is a menu, you can apply a separate style \
and effect to make your popup stand out, or use styles and effects already \
used by your menus to make the popup look like an integral part of your \
menuing system.<p><b>(5)</b> Since this text has no link, you&#39;ll want \
to specify onfontcolor and onbackcolor in the popup menu item, making them \
the same as Mouse On Font Color and Mouse On Background Color in the style \
that you use for the popup menu (I&#39;ve used a variable called \
popupNoLinkColors in this example, so that any change I make in the \
pertinent colors in the BoxStyle array will automatically be reflected \
in the menu item).<p><b>(6)</b> Since this is actually a menu, the &#39;close \
on click&#39; is achieved by a call to the kc_hideMenu() function, passing \
this menu&#39;s name as the parameter.","javascript:kc_hideMenu(\"popup\")"+popupNoLinkColors,"",,0
])

// A popup textbox that links to a url, changing the current page
addmenu(menu=["linkedbox_sw",10,popupOffset,,1,"right",BoxStyle,0,,boxEffect,0,0,0,,,0,0,,,0,,
,"Click here to open Google.com<br>in this window.","http://www.google.com",,,0
])

// A popup textbox that links to a url, new window
addmenu(menu=["linkedbox_nw",10,popupOffset,200,1,"right",BoxStyle,0,,boxEffect,0,0,0,,,0,0,,,0,,
,"You have 10 seconds to click here to open Google.com in a new window","javascript:kc_linkToNewWindow(\"http://www.google.com\",\"newWindow\",0,0,500,300,\"linkedbox_nw\");",,,0
])

////////////////////////////////////////////////////
// a popup menu... should work like any other menu

addmenu(menu=["menubox",10,popupOffset,100,1,"right",BoxStyle,0,,boxEffect,0,0,0,,,0,0,,,0,,
,"Milonic Home","javascript:kc_linkToNewWindow(\"http://www.milonic.co.uk/menu/\",\"newWindow\",0,0,800,600,\"menubox\");",,,1
,"Search Sites","show-menu=search",,,1
,"Download Sites","show-menu=downloads",,,1
,"Close Me","javascript:kc_hideMenu(\"menubox\");",,,1
])

addmenu(menu=["search",,,100,1,,BoxStyle,0,,boxEffect,0,0,0,,,0,0,,,0,,
,"Google","javascript:kc_linkToNewWindow(\"http://www.google.com\",\"searchWindow\",0,0,640,480,\"search,menubox\");",,,1
,"Yahoo","javascript:kc_linkToNewWindow(\"http://www.yahoo.com\",\"searchWindow\",0,0,640,480,\"search,menubox\");",,,1
,"Excite","javascript:kc_linkToNewWindow(\"http://www.excite.com\",\"searchWindow\",0,0,640,480,\"search,menubox\");",,,1
])

addmenu(menu=["downloads",,,100,1,,BoxStyle,0,,boxEffect,0,0,0,,,0,0,,,0,,
,"Milonic Menus","javascript:kc_linkToNewWindow(\"http://www.milonic.co.uk/menu/download.php\",\"downloadWindow\",0,0,640,480,\"downloads,menubox\");",,,1
,"Dynamic Drive","javascript:kc_linkToNewWindow(\"http://www.dynamicdrive.com\",\"downloadWindow\",0,0,640,480,\"downloads,menubox\");",,,1
,"Javascript Kit","javascript:kc_linkToNewWindow(\"http://www.javascriptkit.com/\",\"downloadWindow\",0,0,640,480,\"downloads,menubox\");",,,1
])

// end popup menu example
////////////////////////////////////////////////////

// Standard submenus for the main menu

addmenu(menu=["Links",,,160,1,,PlainStyle,0,,,0,0,0,,,0,0,,,0,,
,"Business Meetings","http://www.businessmeetings.com target=new",,,0
,"DHTML Menu","/menu target=new",,,0
,"Dynamic Drive","http://www.dynamicdrive.com target=new",,,0
,"Content Management","http://www.refsite.co.uk target=new",,,0
])

addmenu(menu=["News",,,180,1,,PlainStyle,0,,,0,0,0,,,0,0,,,0,,
,"BBC News","http://news.bbc.co.uk",,,0
,"CNN","http://www.cnn.com",,,0
,"MSNBC","http://www.msnbc.com",,,0
,"Vancouver Local News","show-menu=VancouverNews","test",,0
])

dumpmenus();


Sorry for the long post. I didn't know a better way to do it (wish we could attach files). I should point out that I have not tested this code extensively... just played around with it on IE6, NS7, NS4.75, and Opera 6.05 under Win2k pro. It worked reasonably well with all of these combinations; best on IE6 (my preferred browser). You may want to do further testing if your target audience uses other combos (e.g., Macs).

This should work right out of the box. If not, something may have gotten screwed up in the transfer; let me know and we can see about emailing you the files. Also, I realize that just because my code makes sense to me, doesn't mean it makes sense to other people! So, if you have questions, please feel free to ask.

I had fun doing this, and I'll probably end up using some of it myself in the future. I hope you also find some of it useful.

Kevin

©1998-2012 Milonic Solutions Ltd. UK Registered Company #4406835
Privacy Policy | License Agreement | Contact Us | Tech Support