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
    Regular Coder
    Join Date
    Feb 2004
    Location
    Earth
    Posts
    158
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Brothercake menu problem

    here same problem than with Vladdy menu (for IE3 or Mozilla1.6) , when crossing another div


    <?xml version="1.0" encoding="iso-8859-1"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>list menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <style type="text/css">
    html,body,form,#Header,#MenuG,#Contenu
    {
    margin:0;
    padding:0;
    border:0;
    text-align:center;
    vertical-align:top;
    }
    html,body,form
    {
    width:100%;
    height:100%;
    overflow:hidden;
    }
    body
    {
    font-family:Verdana,arial;
    font-size:10px;
    font-style:normal;
    font-weight:400;
    background:#F6F7EB;
    color:#F6F7EB;
    }
    #Header
    {
    height:6%;
    width:100%;
    background-color:#1C516E;
    color:#F6F7EB;
    vertical-align:middle;
    z-index:2;
    }
    #MenuG
    {
    width:12%;
    height:94%;
    float:left;
    overflow:hidden;
    background-color:#1C516E;
    color:#F6F7EB;
    z-index:1;
    }
    #Contenu
    {
    width:88%;
    height:94%;
    float:right;
    overflow:auto;
    background-color:tan;
    color:#1C516E;
    z-index:0;
    }
    /* main nav */
    ul#menu
    {
    width:9em;
    z-index:1000;
    cursor:default;
    }

    /* menus */
    ul#menu ul {
    visibility:hidden;
    margin-left:9em;
    margin-top:-1.5em;
    padding:0;
    list-style-type:none;
    width:9em;
    position:absolute;
    z-index:1020;
    cursor:default;
    }
    ul#menu ul li, ul#menu ul div {
    width:9em;
    }

    /* noscript menu trigger */
    ul#menu li:hover > ul {
    visibility:visible;
    }

    /* shift menus to interlace borders */
    ul#menu ul {
    left:-1px;
    padding-top:1px;
    }

    /* list-items */
    ul#menu li, ul#menu div {
    width:9em;
    text-align:left;
    cursorointer;
    cursor:hand;
    }
    ul#menu, ul#menu li {
    margin:0;
    padding:0;
    list-style-type:none;
    }

    /* shift list-items to interlace borders */
    ul#menu li, ul#menu div {
    margin-top:-1px;
    }

    /* links */
    ul#menu a, ul#menu a:visited {
    position:relative;
    display:block;
    background-color:#ffc;
    border:1px solid #edbb85;
    padding:3px 7px;
    font:1em tahoma,verdana,helvetica,sans-serif;
    font-weight:bold;
    color:#008000;
    text-decoration:none;
    letter-spacing:0.1em;
    cursorointer;
    cursor:hand;
    }
    ul#menu a:hover,ul#menu a:focus {
    background-color:#ffefcf;
    color:#806020;
    }

    /* accesskey styling */
    .accesskey { text-decoration:underline; }


    </style>
    <script language="javascript" src="menu.js"></script>
    </head>

    <body>
    <form id="MainForm" method="post" action="">
    <div id="Header">
    Header
    </div>
    <div id="MenuG">
    <ul id="menu">
    <li><a href="#" title="..." tabindex="1">Menu Root</a>
    <ul style="margin-top: -24px; visibility: hidden;">
    <li><a href="#" title="I..." tabindex="2">Item 1</a>
    <ul>
    <li><a href="#" title="..." tabindex="3">Item 1.1</a></li>
    <li><a href="#" title="..." tabindex="4">Item 1.2</a>
    </ul>
    </li>
    </ul>
    </li>
    </ul>
    </div>
    <div id="Contenu">
    Content
    </div>
    </form>
    </body></html>

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    And the problem is ..?
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #3
    Regular Coder
    Join Date
    Feb 2004
    Location
    Earth
    Posts
    158
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ooops ! sorry !
    the same than Vladdy Menu , if your cross the edge of the div MenuG , with IE6 the listmenu is under and with Mozilla 1.6 you never cross the edge and the menu shut down ...
    .... the structure with 3 div Header MenuG Content is very classical ... basic

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I don't really know what you mean - can you put a demo online?
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #5
    Regular Coder
    Join Date
    Feb 2004
    Location
    Earth
    Posts
    158
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I cannot put a demo online but I join the zip and you will see at once by your own the problem .. I mean only if you want
    Attached Files Attached Files

  • #6
    Regular Coder
    Join Date
    Feb 2004
    Location
    Earth
    Posts
    158
    Thanks
    0
    Thanked 0 Times in 0 Posts

    a link

    Last edited by castali; 05-01-2004 at 10:14 AM.

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    the menuG div has "overflow:hidden", but it's a container for the left navigation bar. I think that's why the menus disappear - because their container has hidden overflow, and you can't display an element outside the boundaries of its parent.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #8
    Regular Coder
    Join Date
    Feb 2004
    Location
    Earth
    Posts
    158
    Thanks
    0
    Thanked 0 Times in 0 Posts
    yes it was the same problem than Vladdy's menu and finally I solved it ... hmmm ! I mean HE solved it !


    just a question why do you put hover colors in the javascrit of your menu ? it is very unconfortable not to have all in CSS, is there any way to have a hover class in sted ?

  • #9
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah, just put the colors in a class and change the .className property
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #10
    Regular Coder
    Join Date
    Feb 2004
    Location
    Earth
    Posts
    158
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I mean this part

    menuTrigger.firstChild.style.backgroundColor = '#ffefcf';
    menuTrigger.firstChild.style.color = '#806020';


    menuTrigger.firstChild.style.backgroundColor = '#ffc';
    menuTrigger.firstChild.style.color = '#008000';

    then in commentar // and a hover class ?

    ok

    thank you

  • #11
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah I mean you can go something like:
    Code:
    menuTrigger.firstChild.className = 'hover';
    And remove it with:
    Code:
    menuTrigger.firstChild.className = '';
    And then put those styles in an "a.hover" rule. You don't actually *need* those lines at all - the rollovers will still happen - but they maintain persistence, so rollover colors remain as you hover over a child item, which would not happen with :hover alone.
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark

  • #12
    Regular Coder
    Join Date
    Feb 2004
    Location
    Earth
    Posts
    158
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok .. thank you

    it works

  • #13
    Senior Coder
    Join Date
    Jun 2002
    Location
    near Oswestry
    Posts
    4,508
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ace
    "Why bother with accessibility? ... Because deep down you know that the web is attractive to people who aren't exactly like you." - Joe Clark


  •  

    Posting Permissions

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