Can the menu appear locked at the top, like a Frame?

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:00

Can the menu appear locked at the top, like a Frame?

Poster: report
Dated: Saturday December 25 2004 - 22:48:49 GMT

Hi, - new user here. I have tried to search for this question and was unable to find anything that worked for me.

I have a horizontal menu set up and working with followscroll=1 and alwaysvisible=1

I find the scrolling visually annoying. As I move up and down my page, the menu is moving up and down to stay at the top.

I am trying hard to avoid frames, but I want a frame like effect. Is there a way to make the menu snap to position without the visuals so it appears to be "fixed" at the top, like it would look in a frame?

I tried the example and just can't figure this out.

Thanks.

Poster: Ruth
Dated: Sunday December 26 2004 - 5:14:56 GMT

You could use an iframe design. You'd put the menu at the top, and insert the iframe all the way across the page right below it and have everything load into the iframe. The scrolling then would be done inside the iframe and the menu would remain at the top. Unlike frames which means every frame is a different 'browser window' an iframe is inline so the submenus will drop over it.

Some other thoughts that come to mind:

1. some kind of function which hides the menu while it's scrolling down the page and then has it become visible when the scrolling stops.

2. have the menu remain fixed at the top, but have a nice small menu icon scroll down the margin, this would only be a 'back to the top' link.

3. have a scrolling icon which would open the menu onMouseover horizontally where the page is. To do this you'd really need to duplicate all the menus in your menu_data.js file, but make sure you rename them. For example: you have the main menu

Code:

with(milonic=new menuname("scroll")
style=menuStyle;
top=35;
left=1;
alwaysvisible=1;
followscroll=1;
align="center";
aI("text=MENU;showmenu=main1;");
}

with(milonic=new menuname("main")){
style=menuStyle;
top=0;
left=20;
alwaysvisible=1;
orientation="horizontal";
aI("text=Home;url=;");
aI("text=whtever;showmenu=sub;");
and so on}

with(milonic=new menuname("sub")){
style=subStyle;
aI("text=submenu;url=;");
and so on}

Assuming those as your menus, you would copy the "main" menu and rename it main1, remove the top and left position and the always visible, do the same for the sub menu. Then the 'menu' logo would scroll down and when you mouseover it the 'main1' menu would open horizontally. Remember that this 'main' is now functioning like a submenu so if you move the mouse off it will close. You could probably set it up as open on click and it should remain open then until it has a mouseOn/mouseOff event on it.

I hope that makes sense...

Ruth

Poster: report
Dated: Monday December 27 2004 - 17:07:27 GMT

Ruth wrote:

You could use an iframe design. You'd put the menu at the top, and insert the iframe all the way across the page right below it and have everything load into the iframe. The scrolling then would be done inside the iframe and the menu would remain at the top. Unlike frames which means every frame is a different 'browser window' an iframe is inline so the submenus will drop over it.

Thanks Ruth - I played with iframes before, to me they look like just a window in a window which scrolls with the parent window. Which means it would not stay at the top?

Or is there something I am unaware of about iframes (I hope...).

George

Poster: Ruth
Dated: Monday December 27 2004 - 19:39:21 GMT

Try the following page and see what happens. You should get what looks like 1 page with 2 scroll bars. I colored the scroll bar on the page that loads in the iframe so you can see it. If you're getting a scroll bar that has to be scrolled on the main page then lower the % on the iframe height until until that disappears. The only scroll that moves should be on the page that is in the iframe. If you use this you have to remember to have a top margin on the pages that load into the iframe so that the menu doesn't overlay content. The other alternative is to make the table on the main page about 30px high. That will give the menu a blank space over which to sit.
MAIN PAGE:

Code:

<html>
<head>   <TITLE>Model-iframe-table layout</TITLE>
   <style type='text/css'>
  
body {
margin-top:0px;
margin-bottom:0px;
margin-right:0px;
margin-left:0px;
background-color:#fefafb;
   }
    </style>
 </HEAD>
<BODY BGCOLOR="#fefafb">
 <SCRIPT language=JavaScript src="milonic_src.js" 
type=text/javascript></SCRIPT>

<SCRIPT language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=mmenuns4.js><\/scr"+"ipt>");      
  else _d.write("<scr"+"ipt language=JavaScript src=mmenudom.js><\/scr"+"ipt>"); 
</SCRIPT>
<SCRIPT language=JavaScript src="menu_data.js" 
type=text/javascript></SCRIPT>
<script>
function openIFrame(iFrameId,winURL)
{
   ifId=gmobj(iFrameId)
   ifId.src=winURL
}
</script>
</HEAD>
<BODY BGCOLOR="#fefafb">
<table border="1" bordercolor="#FF0000" 
cellpadding="0" cellspacing="0" width="100%" height="1px">
<tr>
    <td></td>
</tr>
</table><iframe width="100%" height="98%" id="tempiframe" src="default_iframe_page.htm" align="left"  class="iframe-main" frameborder="0" scrolling=yes> </iframe>
</BODY></HTML>

IFRAME PAGE:

Code:

<html>
<head>
   <title>iFrame insert page</title>
   <style type="text/css">
     BODY {
   BACKGROUND-COLOR: #ffffff;
   MARGIN: 0px; 
   PADDING-TOP: 0px; 
   PADDING-RIGHT: 0px;
   PADDING-BOTTOM: 0px;  
   PADDING-LEFT: 0px; 
   FONT-WEIGHT: bold; FONT-SIZE: 16px; 
   COLOR: #c0afb9; 
   FONT-STYLE: normal; 
   FONT-FAMILY: arial,helvetica,"san serif"; 
      scrollbar-face-color:      #faf5f8;
   scrollbar-track-color:      #ffffff;
   scrollbar-arrow-color:      #BF91AE;
   scrollbar-highlight-color:   #F4EDF1;
   scrollbar-3dlight-color:   #FFFFFF;
   scrollbar-shadow-color:   #C197B3;
   scrollbar-darkshadow-color:   #BF91AE;}
</STYLE>
</head>
<body link="#c6808a">
<CENTER>
 <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>JUST A TEST BLANK PAGE <p>></p><p>></p><p>></p><p>></p>
<p>></p><p>></p><p>></p><p>></p>
<p>></p><p>></p><p>></p><p>></p>
</CENTER>
</body>
</html>

Hope this helps.

Ruth

Poster: report
Dated: Thursday December 30 2004 - 22:16:22 GMT

Wow... this shows my inexperience with even thinking about iframes. I kept picturing the menu being in an iframe, but if I my page in an iframe with the menu in the main page, presto, I think I've got what I"m looking for.

Thanks.

I have a project for the afternoon.

Poster: Ruth
Dated: Friday December 31 2004 - 0:49:58 GMT

Make sure you have all the pages you open from the menu open in the iframe. I think I named this tempiframe, so the aI string url would be:

Code:

url=javascript:openIFrame('tempiframe',whatever the page url is you want to open here');

I tend to open outside sites in a totally new window.

Ruth

Poster: report
Dated: Friday December 31 2004 - 17:48:59 GMT

I was wondering that that function was for.... I just added TARGET=... to the line in the menu defs file and it works after adding NAME= to the <iframe> section.

I've got it mostly implemented, but I have trouble (same with frames) knowing how large to make the iframe to take up the whole screen and not end up with the main menu page too small.

And so far I've seen something very strange. One of my menu choices has a url attached to it, click the menu pulldown and it automatically loads a page and shows the menu. If I "drag" the menu name down into the menu, I lose the menu when I let go of the mouse button.

Why would anyone do this? Who knows, I found it by accident.

Poster: Ruth
Dated: Friday December 31 2004 - 22:41:29 GMT

[quote=report]... I have trouble (same with frames) knowing how large to make the iframe to take up the whole screen and not end up with the main menu page too small.
[/quote]

What do you mean making the main page too small? Is there something else on that page besides the menu? If there is not, then you can do either of the things I suggested both of which have a table at the top of the main page on which the menu appears. Again, that's assuming that there is nothing else on the page. So, you can either make the table 1px high and make sure ALL the pages you load into the iframe have a top margin high enough so the menu doesn't sit over the content, OR you can make the table about 30px high, in which case you don't need to worry about the top margins of the pages that load into the iframe.

As to the other question, I have no clue what you mean. What is the url, what page gets loaded and where, in the iframe? in a new window? Is this one of your pages, and if so do you have the menu code on it? If you have the menu code on it, it will of course have the menu on it. As to dragging the menu name down. What menu name and from where are you dragging it and to where are you dragging it. Do you mean you are clicking and holding your mouse down on your menu and dragging it? Are you using a draggable menu?

We really need to see what you are doing to see what's happening.

Ruth

Poster: report
Dated: Friday December 31 2004 - 23:22:21 GMT

When I make the iframe like 99%, the menu in the main page displays fully, but there is a scroll bar for it (IE and Mozilla). I can make it perfect for the resolution I'm using, but not for all resolutions or if the brower is resized.

I don't fully understand how using a table would help?

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

If you go to milonic.com and then put your mouse on the "About Milonic" and press and hold the left mouse button and drag it down, it looks like you are dragging something. There is no bad effect by releasing the mouse after you've "dragged" the menu name down. But in my setup with the iframe, if I drag the menu name down and release the mouse button, the menu choice is selected but it replaces my page, including the menu and iframe, the menu is gone and so is the iframe.

I can't give you the url, since it's not no the web yet, just on my pc for now. I am trying to use this menu to replace a tree menu I have on my existing page using frames.

http://www.feelmypain.com

Thanks for all the help, learning new ways of thinking and doing things is fun.

Poster: John
Dated: Saturday January 1 2005 - 5:50:12 GMT

report wrote:

If you go to milonic.com and then put your mouse on the "About Milonic" and press and hold the left mouse button and drag it down, it looks like you are dragging something. There is no bad effect by releasing the mouse after you've "dragged" the menu name down. But in my setup with the iframe, if I drag the menu name down and release the mouse button, the menu choice is selected but it replaces my page, including the menu and iframe, the menu is gone and so is the iframe.

My guess is that's a browser problem, not a menu problem. I'm not seeing it at all on Mac in Safari or Firefox.

report wrote:

I am trying to use this menu to replace a tree menu I have on my existing page using frames.

First I've heard you mention tree. Are you using the tree menu code?

Poster: report
Dated: Saturday January 1 2005 - 18:34:44 GMT

John wrote:

report wrote:

Quote:

My guess is that's a browser problem, not a menu problem. I'm not seeing it at all on Mac in Safari or Firefox.

Wow - I think you are right, I don't see the problem with IE, just Mozilla.

report wrote:

I am trying to use this menu to replace a tree menu I have on my existing page using frames.

Quote:

First I've heard you mention tree. Are you using the tree menu code?

I am currently using the menu from http://www.treeview.com for my page, but I want to use a horizontal pull down menu to save the space the left framed tree takes.

Poster: Ruth
Dated: Saturday January 1 2005 - 21:51:12 GMT

If you have a url with your page up, the one that uses Milonic and the iframe it would be helpful. If you don't have a way to put the page up, could you post your main page code, your iframe page code [if you have one load in the iframe when the main page opens], your menu_data code, and if you have a style sheet that code, also. And, what is your resolution?

Many things can cause you to get a scroll bar. With the codes I can make a page and figure out what's causing the problem.

Ruth

Poster: John
Dated: Sunday January 2 2005 - 1:01:12 GMT

In addition to Ruth's requests, make sure you're running the latest version of the code (5.66 as of this writing), and that all 3 menu code files are the same version.

Also, you might want to try our tree menu (why mix things up?). Get the additional code file at http://milonic.com/treemenu.js. Search the forum for tips on using it.

Here's an example of one of my smaller ones...

Code:

_CFix = true;
_scrollAmount = 5      // Used for Netscape 4 scrolling
_scrollDelay = 10        // Used for Netscape 4 scrolling

_menuCloseDelay = 500  // The delay for menus to remain visible on mouse off
_menuOpenDelay = 150   // The delay for opening menus on mouse over
_subOffsetTop = 0     // Sub menu offset Top position
_subOffsetLeft = 0  // Sub menu offset Left position

AllMargin = 0;

treeOffset = 0;  // Used to set the offset of sub menus
singleMasterMenu = true; // Informs the system to only have one menu open at a time

with(tstyle1 = new mm_style()){
offcolor = "#ffffff";
offbgcolor = "#888888";
oncolor = "#000000";
onbgcolor = "#ffcc00";
headerbgcolor = "#990033";
subimage = "/sa/menu5/images/white_arrow.gif";
onsubimage = "/sa/menu5/images/black_arrow_down.gif";
padding = 5;
fontsize = "9px";
fontweight = "bold";
fontfamily = "Tahoma, Verdana, Arial, sans-serif";
subimageposition = "middle;right";
separatorsize = 1;
separatorcolor = "#ffcc00";
//image = "/sa/menu5/images/trans.gif";
subimagepadding = 2;
imagepadding = 2;
itemwidth = 155;
}

sub1Style = new copyOf(tstyle1)
sub1Style.offcolor = "#000000";
sub1Style.offbgcolor = "#efedde";
sub1Style.separatorcolor = "#556E8C";
sub1Style.visitedcolor = "#0055ff";
sub1Style.headercolor = "#ffffff";

sub2Style = new copyOf(tstyle1)
sub2Style.offcolor = "#000000";
sub2Style.offbgcolor = "#D6DDE6";
sub2Style.separatorcolor = "#8EA2BB";

tstyle1.clickcolor = "#000000";
tstyle1.clickbgcolor = "#ffcc00";         //"#D70B0B"
tstyle1.clicksubimage = "/sa/menu5/images/black_arrow_down.gif";
tstyle1.subimageposition = "top;right";

with(new menuname("main Tree Menu")){
style = tstyle1;
alwaysvisible = 1;
itemwidth = 155;
margin = AllMargin;
position = "relative";
aI("text=ASU's West campus;url=http://www.west.asu.edu/;title=ASU's West campus home page;status=ASU's West campus home page;");
aI("text=ASU's Tempe campus;url=http://www.asu.edu/;title=ASU's Tempe campus home page;status=ASU's Tempe campus home page;");
aI("text=ASU's East campus;url=http://www.east.asu.edu/;title=ASU's East campus home page;status=ASU's East campus home page;");
aI("text=Contact Administration;url=http://www.west.asu.edu/admin/contact.htm;title=Administration contact and mailing information;status=Administration contact and mailing information;");
aI("text=Student Affairs;showmenu=stuaff;type=tree;title=Student Affairs divisions;status=Student Affairs divisions;");
aI("text=Other Info...;showmenu=other;type=tree;title=Other campus information and directories;status=Other campus information and directories;");
}

      with(milonic=new menuname("stuaff")){
      style = sub1Style;
      margin = AllMargin;
      aI("text=Information for...;type=header;");
      aI("text=Student Affairs Home;url=http://www.west.asu.edu/sa/;status=Student Affairs Home page;");
      aI("text=Administration;url=http://www.west.asu.edu/admin/;status=Administration;");
      aI("text=Admissions;url=http://www.west.asu.edu/admissions/;status=Admissions;");
      aI("text=Career Services &amp;<br>Personal Counseling;url=http://www.west.asu.edu/cspc/;status=Career Services & Personal Counseling;");
      aI("text=Disability Resource Center;url=http://www.west.asu.edu/drc/;status=Disability Resource Center;");
      aI("text=Financial Aid Services;url=http://www.west.asu.edu/financialaid/;status=Financial Aid Services;");
      aI("text=International Student<br>Services Program;url=http://www.west.asu.edu/international/;status=International Student Services Program;");
      aI("text=Multicultural Student<br>Services;url=http://www.west.asu.edu/multicultural/;status=Multicultural Student Services;");
      aI("text=Native American Student Services Programs;url=http://www.west.asu.edu/nativeamerican/;status=Native American Student Services Programs;");
      aI("text=Recruitment &amp;<br>Outreach Services;url=http://www.west.asu.edu/recruitment/;status=Recruitment & Outreach Services;");
      aI("text=Registrar;url=http://www.west.asu.edu/registrar/;status=Registrar;");
      aI("text=Scholarships;url=http://www.west.asu.edu/scholarships/;status=Scholarships;");
      aI("text=Student Health;url=http://www.west.asu.edu/studenthealth/;status=Student Health;");
      aI("text=Student Life;url=http://www.west.asu.edu/studentlife/;status=Student Life;");
      aI("text=Telecounseling Services;url=http://www.west.asu.edu/telecounselors/;status=Telecounseling Services;");
      aI("text=Technology Support and Development;url=http://www.west.asu.edu/tsa/;status=Technology Support and Development;");
      aI("text=Testing Services;url=http://www.west.asu.edu/testing/;status=Testing Services;");
      aI("text=TRiO (SSS) Program;url=http://www.west.asu.edu/trio/;status=TRiO (SSS) Program;");
      aI("text=Veteran Student Services;url=http://www.west.asu.edu/veteran/vetinfo.htm;status=Veteran Student Services;");
      aI("text=Information about...;type=header;");
      aI("text=Events Calendar;url=http://westcgi.west.asu.edu/sai/staff/calendar/;status=Events Calendar;");
      aI("text=Organization Chart;url=http://westcgi.west.asu.edu/sai/SharedFiles/SA_2004_Org.doc;status=Organization Chart;");
      aI("text=Suggestion Box;url=http://westcgi.west.asu.edu/sai/staff/comments/;status=Suggestion Box;");
      aI("text=Tips 'n Tricks;url=http://westcgi.west.asu.edu/sai/tech/tips.cfm;status=Tips 'n Tricks;");
      aI("text=Web Approval Form;url=http://westcgi.west.asu.edu/sai/SharedFiles/Forms/webapproval.htm;status=Web Approval Form;");
}

      with(milonic=new menuname("other")){
      style = sub1Style;
      margin = AllMargin;
      aI("text=Look It Up;url=http://www.west.asu.edu/asuw2/index/index.html;status=ASU West index;");
      aI("text=Calendar;url=http://www.west.asu.edu/calendar/;status=Public Events Calendar;");
      aI("text=Catalog;url=http://www.asu.edu/catalog/;status=ASU catalogs;");
      aI("text=Degrees;url=http://www.asu.edu/programs/;status=ASU Degree Programs;");
      aI("text=Directory;url=http://www.asu.edu/directory/;status=Student, faculty, and staff directory;");
      aI("text=Map;url=http://www.west.asu.edu/aboutasuw/direct.htm#campusbuildings;status=Map of campus buildings;");
      aI("text=Online Services;url=http://www.asu.edu/sos/;status=ASUInteractive Online Services;");
      }

drawMenus();

See this at http://www.west.asu.edu/admin/.

Industrial Strength JavaScript and DHTML Menus

Can the menu appear locked at the top, like a Frame?