...
PDA

Horizontal Cascading Menu Not Overlaping.

DavieP
02-17-2011, 05:48 PM
Hello everyone,

I'm very new to CSS and trying to develop a sheet and am having a problem with the code below.
The left menu is to cascade horizontally across the page however stays confined to the left content frame, is there a way to implement this or should I look at another way to cascade this menu, is so could you suggest a better way?

I did do a search but not exactly sure what I'm searching for.

Thanks for your time.


<!--Force IE6 into quirks mode with this comment tag-->
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Temp Title</title>
<style type="text/css">


#framecontentLeft, #framecontentTop{
position: absolute;
top: 0px;
left: 1px;
width: 201px; /*Width of left frame div*/
height: 100%;
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: green;
color: white;
}

#framecontentTop{
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
right: 0;
width: auto;
height: 120px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: green;
color: white;
}

#maincontent{
position: fixed;
left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
top: 120px; /*Set top value to HeightOfTopFrameDiv*/
right: 0;
bottom: 0;
overflow: auto;
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 120px 0 0 200px; /*Set value to (HeightOfTopFrameDiv 0 0 WidthOfLeftFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%;
width: 100%;
}

* html #framecontentTop{ /*IE6 hack*/
width: 100%;
}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}

.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: black;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}


/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</script>

<script type="text/javascript">

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

</head>

<body onload="MM_preloadImages('CSS%20CMRC/images/img09a.jpg')">

<div id="framecontentLeft">
<div class="innertube">

<h3><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','CSS%20CMRC/images/img09a.jpg',1)"><img src="CSS%20CMRC/images/logoB.jpg" name="Image2" width="179" height="163" border="0" id="Image2" /></a></h3>
<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>

<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Sub Item 2.1.3</a></li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>

<p align="center">MENU</p>


</div>
</div>

<div id="framecontentTop">
<div class="innertube">

<h1>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="677" height="95">
<param name="movie" value="Movie2a.swf" />
<param name="quality" value="high" />
<embed src="Movie2a.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="677" height="95"></embed>
</object>
</h1>

</div>
</div>


<div id="maincontent">
<div class="innertube">

<h1>PAGE CONTENT WILL GO HERE </h1>


</div>
</div>


</body>
</html>
abduraooft
02-18-2011, 07:08 AM
I'd recommend you to read http://htmldog.com/articles/suckerfish/dropdowns/ to see how to make a cross browsers compatible drop down effect.
DavieP
02-18-2011, 06:51 PM
Well I've read all of that but my problem isn't making the menu cascade outwards, when it cascades out it doesn't overlay the main content page.

If you try the code in a browser (any) it shows the same results.
Jimather
02-18-2011, 07:02 PM
Never mind :)
Excavator
02-18-2011, 07:18 PM
Hello DavieP,
You have overflow hidden on your left column. That makes your flyout, which is obviously overflow, ...hidden.

Try these changes highlighted in red -
#framecontentLeft, #framecontentTop{
position: absolute;
top: 0px;
left: 1px;
width: 201px; /*Width of left frame div*/
height: 100%;
/*overflow: hidden; Disable scrollbars. Set to "scroll" to enable*/
background-color: green;
color: white;
}
.sidebarmenu ul li{
position: relative;
z-index: 2;
}

p.s. Jimather - OP is using divs, some just have the word frame in their name.
A better question would be why that first line of code above the DocType? Why in the world would you want quirks mode?
Jimather
02-18-2011, 07:24 PM
Hello DavieP,
p.s. Jimather - OP is using divs, some just have the word frame in their name.
A better question would be why that first line of code above the DocType? Why in the world would you want quirks mode?

ah ok, slightly confusing lol, guess I should have read everything a bit more closely before I commented
DavieP
02-18-2011, 11:12 PM
Thanks Excavator, that worked a treat, such a simple thing I totally missed!
DavieP
02-21-2011, 01:12 AM
I may have jumped the gun a bit here!

This fix works well in FF but not in IE grrrrrr.

I've tried to change positions from relative to abs as per this post (http://www.codingforums.com/showthread.php?t=218841) but this doesn't work, it just either makes the menu drop downwards or lose all formating.

Any ideas?

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum