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 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Fixed top/sidebar with vertical pop-up menus

    I am attempting to combine the vertical list menu found here (http://www.javascriptkit.com/script/...icalmenu.shtml) with the fixed left sidebar and topbar found here (http://www.dynamicdrive.com/style/la...frames-layout/). It almost works. It works in IE7 but fails in every other browser I've tried (IE6, Firefox, and Opera 7 under Linux).

    Essentially what happens is when you hover over the vertical menu that is in the left fixed sidebar, the menu pops up but it is transparent so it you can see the content on the page behind it--and when you move the mouse over that popped-up area of the menu, the menu closes. This seems to be because the popped-up area of the menu is actually over the content area of the page.

    An example of the behavior can be seen at: http://www.craigsteiner.us/test/index2.php

    The component files are obviously index2.php itself and http://www.craigsteiner.us/test/test.css (along with http://www.craigsteiner.us/test/scri...erticalmenu.js, but this JavaScript file is just taken directly from this site as a component of the vertical menu).

    I've found that the problem of the menu can be fixed by removing the boldface line from the following segment of the test.css:

    Code:
    #maincontent{
    position: fixed; /* THIS IS WHAT CAUSES PROBLEM WITH THE MENU */
    left: 120px; /*Set left value to WidthOfLeftFrameDiv*/
    top: 72px; /*Set top value to HeightOfTopFrameDiv*/
    right: 0;
    bottom: 0;
    overflow: auto; 
    }
    Of course, removing that line breaks the non-scrolling top/left sidebar aspect of the page. But it seems the vertical menu is being affected by the "Position: fixed" in another area of the page.

    Does anyone have any idea what I'm doing wrong? Thanks in advance!

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    could you set the maincontent to a z-index of 1 and keep it at lowest priority?

  • Users who have thanked jcdevelopment for this post:

    CraigS (02-13-2008)

  • #3
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks, good idea. I added a "z-index: 1" to the #maincontent and a "z-index: 5" to the pop-up menu. The popped-up menu option is no longer transparent so you can't see the content behind it when it pops up, but mousing over it still causes the menu to close before you can click one of the popped-up options.

    I've updated http://www.craigsteiner.us/test/index2.php to reflect the z-index change.

    Thanks, it's progress!

  • #4
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    is the menu powered by javascript and just styled by CSS, or is it both?

  • #5
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    I wonder if using a doctype and some valid code might help things a bit? This effect can be done with pure CSS very nicely... check out CSS Play for an example of this
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #6
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I got the vertical menu from this page: http://www.javascriptkit.com/script/...icalmenu.shtml

    It appears to use JavaScript on page load to do some initial prepping, but it appears to me that the menu itself is all CSS when it comes to actual operation.

  • #7
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by ahallicks View Post
    I wonder if using a doctype and some valid code might help things a bit? This effect can be done with pure CSS very nicely... check out CSS Play for an example of this
    Thanks, I'll give that implementation a try and see if I have better results.

  • #8
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,179
    Thanks
    174
    Thanked 257 Times in 257 Posts
    yeah, the doctype would help to, but i know that i have seen something like this and it was because the user had an I-frame in the code and it acts as another page. I dont know if because you are going over the iframe and thats why it is causing this. Do you need the I-frame? Im not sure though if that is the problem!!

  • #9
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I tried the CSSPlay approach that was suggested and it works, thanks!

    I prefer how the original menu I was looking looks, but this one works and without JavaScript so that is nice. I'll take a look and maybe I can make the CSSplay one look like the other.

    Thanks for all your help!

  • #10
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Spoke too soon... it works great in IE7 and Firefox, but looks all messed up in IE6 given the non-scrolling layout of my page.

    All of these things work great by themselves, it's just getting them to work within a left sidebar that doesn't scroll on a page that also has a top section that doesn't scroll. That seems to be confusing both of the menu approaches I've tried so far.

  • #11
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I haven't been able to get any of these working properly when used within my fixed left sidebar. All the menus work in IE7/IE6/FF by themselves but when I put them in the fixed left sidebar, they seem to fail in at least one of the browsers--or all of them.

    I'm looking for a way to have a fixed area at the top, a fixed left sidebar, and the main content area scroll normally. In the left sidebar I want a vertical pop-up menu that only needs to go one sub-level deep. I like the way the menu looks in http://www.craigsteiner.us/test/test11.php and would like to use this implementation if it would just work.

    I ultimately didn't like the CSSPlay approach mentioned above because it has embedded IE hacks in the HTML and I'd prefer to limit the hacks to the CSS area. But even the CSSPlay approach could be tolerable if it worked in the context of my page. You can see how it fails in http://www.craigsteiner.us/test/test21.php .

    Can anyone take a look at these links and see why it's not working? I'd be willing to pay someone to get one working, especially if it were the first of the two.

    NOTE: I'd also be more than happy to consider some alternate way of implementing the fixed top and left sidebars if that's necessary to make one of these vertical menus work.

    Thanks!

  • #12
    Regular Coder
    Join Date
    Feb 2007
    Location
    Canada
    Posts
    924
    Thanks
    10
    Thanked 56 Times in 55 Posts
    try this on # 21:
    Code:
    #framecontentLeft, #framecontentTop {
    background-color:navy;
    color:white;
    height:100%;
    left:0pt;
    position:fixed;
    top:0pt;
    width:200px;
    }

  • #13
    New to the CF scene
    Join Date
    Feb 2008
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the suggestion jlhaslip. I went ahead and tried that and made that test #22 at http://www.craigsteiner.us/test/test22.php but I don't observe any change in behavior.


  •  

    Posting Permissions

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