Brothercake menu problem

castali

04-30-2004, 06:38 AM

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;
cursor:pointer;
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;
cursor:pointer;
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>

brothercake

04-30-2004, 04:18 PM

And the problem is ..?

castali

04-30-2004, 05:11 PM

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

brothercake

04-30-2004, 05:41 PM

I don't really know what you mean - can you put a demo online?

castali

04-30-2004, 05:48 PM

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

castali

05-01-2004, 08:14 AM

here is the link >>> http://free.networkthai.net/x/castali/

brothercake

05-01-2004, 08:37 PM

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.

castali

05-01-2004, 08:47 PM

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 ?

brothercake

05-01-2004, 08:53 PM

Yeah, just put the colors in a class and change the .className property

castali

05-01-2004, 08:56 PM

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

brothercake

05-01-2004, 09:30 PM

Yeah I mean you can go something like:

menuTrigger.firstChild.className = 'hover';

And remove it with:

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.

castali

05-02-2004, 06:21 AM

ok .. thank you

it works

brothercake

05-02-2004, 06:28 AM

ace :thumbsup: