Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Horizontal Cascading Menu Not Overlaping.

    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.

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

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I'd recommend you to read http://htmldog.com/articles/suckerfish/dropdowns/ to see how to make a cross browsers compatible drop down effect.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #4
    New Coder
    Join Date
    Jan 2011
    Posts
    66
    Thanks
    10
    Thanked 5 Times in 5 Posts
    Never mind

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    #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?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    DavieP (02-18-2011)

  • #6
    New Coder
    Join Date
    Jan 2011
    Posts
    66
    Thanks
    10
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by Excavator View Post
    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

  • #7
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks Excavator, that worked a treat, such a simple thing I totally missed!

  • #8
    New to the CF scene
    Join Date
    Feb 2011
    Posts
    8
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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 but this doesn't work, it just either makes the menu drop downwards or lose all formating.

    Any ideas?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •