PDA

View Full Version : Omni Slide Menu with Frames



stod
10-16-2012, 08:59 PM
Basically, I have a frameset with 5 frames. One frame ("topFrame") contains the navigation (horizontal) and I am trying to use Omni Slide Menu in that frame to change the contents in another frame ("mainFrame").

I have changed the menu list (in menuItems.js) to include the following line.

["TEST", "xfrm_main.html", "_new"]

I have two problems and would appreciate some help please.

First, the drop down menu is hidden behind the frame underneath. Can I change the code so that the drop down menu is on the top of the frame underneath?

Secondly, how can I change the line above to ensure that the page "xfrm_main.html" is loaded into a nominated frame ("mainFrame") rather than a new window?

Thanks.

bernie1227
10-17-2012, 02:19 AM
For your first question, try adjusting the z-index css property (http://reference.sitepoint.com/css/z-index)to put the lower frame behind the upper frame.

stod
10-17-2012, 04:34 PM
Thank you bernie 1227. Yes, I am aware of z-index. However, I am totally ignorant about CSS (shame on me!!). So where do I put the lines


#warning {
position: absolute;
z-index: 1;
}

and in which file. menuitem.js or mmenu.js?

Sorry for such a simple question.

I have resolved how to load the page into a another frame. I simply replaced "_new" with the name of the targeted frame (e.g "mainFrame")

bernie1227
10-18-2012, 07:49 AM
Please use bbcode (ie
) tags to make your posts more readable.
As for the question, for example
[code]
#topframe {
z-index: 50;
}

To place the topframe above the rest of the frames.

stod
10-18-2012, 01:23 PM
Thanks for your help bernie1227. I'm obviously struggling to grasp the basics of css. Let me try to explain my ignorance.

I have a frameset called qdemo.html and this contains two frames leftFrame (containing omni.html) and subFrame (containing (qfrm_sub.html).

The code for qdemo.html is:


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

#leftFrame, #subFrame {
position: absolute; /* absolute positioning */
}

#leftFrame {

z-index: 50;
}
#subFrame {

z-index: 10;
}

</style>

</head>

<frameset rows="80,*" frameborder="NO" border="0" framespacing="0">
<frame name="leftFrame" scrolling="NO" noresize src="omni.html" >
<frame name="subFrame" src="qfrm_sub.html">
</frameset>
<noframes><body bgcolor="#FFFFFF">

</body></noframes>
</html>





and that for qfrm_sub.html is:


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#leftFrame, #subFrame {
position: absolute; /* absolute positioning */
}

#leftFrame {

z-index: 50;
}
#subFrame {

z-index: 10;
}

</style>

</head>

<body bgcolor="#FFFFFF">
temp frame
</body>
</html>


The file omni.html contains the drop down menus and the start of the file is...



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Dynamic Drive DHTML Scripts- Omni Slide Menu demo</title>
<style type="text/css">
/*Menu Links*/

#leftFrame, #subFrame {
position: absolute; /* absolute positioning */
}



#leftFrame {

z-index: 50;
}
#subFrame {

z-index: 10;
}

/*NOTE: anything not specified for the #(menu id's) a selector and its pseudo classes
may be inherited in some browsers from other 'a' element styles (if any) on the page*/

#menu1 a {color:black;background-color:white;text-decoration:none;text-indent:1ex;}
#menu1 a:active {color:black;text-decoration:none;}
#menu1 a:hover {color:black;background-color:#FFFF99}
#menu1 a:visited {color:black;text-decoration:none;}


All, fairly simple stuff but I am clearly not grasping where/how to use css. Can you help please?

bernie1227
10-18-2012, 07:37 PM
Ok, so find the css for specifically the frame that contains the menu which drops down, and put something along the lines of:


z-index: 100;

In there. The idea of that, is to place the frame above the levels of the other frames so the menu will not slide behind the lower frame.

It should be in leftFrame

molendijk
10-18-2012, 08:16 PM
Ok, so find the css for specifically the frame that contains the menu which drops down, and put something along the lines of:


z-index: 100;

In there. The idea of that, is to place the frame above the levels of the other frames so the menu will not slide behind the lower frame.

It should be in leftFrame

You can't just have elements (like the items of a menu) from one frame of a frameset go over another frame of the set. The reason is that frames (of a frameset) are windowed elements that don't obey zIndex rules. There's some sort of a solution, though. I wrote this (mesdomaines.nu/eendracht/include_menu10_on_top/include_menu10_on_top_smooth/index.html) about it a long time ago, so it's not up to date anymore. But it still works, except for the Google link.
Arie.