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 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

Code:

#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 [code]) 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:

Code:

<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:

Code:

<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...

Code:

<!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:

Code:

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.

Edit:
It should be in leftFrame

**molendijk** · 10-18-2012, 08:16 PM

Originally Posted by bernie1227

Ok, so find the css for specifically the frame that contains the menu which drops down, and put something along the lines of:

Code:

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.

Edit:
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 about it a long time ago, so it's not up to date anymore. But it still works, except for the Google link.
Arie.

Thread: Omni Slide Menu with Frames

Thread Tools

Search Thread

Omni Slide Menu with Frames

Similar Threads

Omni Slide Menu does not slide out on smart phone

Omni Slide Menu

I need help on the Omni Slide Menu!!!!

omni slide menu?

Help for Omni Slide Menu

Bookmarks

Bookmarks

Posting Permissions