...

View Full Version : Brothercake menu problem



castali
04-30-2004, 07: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, 05:18 PM
And the problem is ..?

castali
04-30-2004, 06: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, 06:41 PM
I don't really know what you mean - can you put a demo online?

castali
04-30-2004, 06: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, 09:14 AM
here is the link >>> http://free.networkthai.net/x/castali/

brothercake
05-01-2004, 09: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, 09: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, 09:53 PM
Yeah, just put the colors in a class and change the .className property

castali
05-01-2004, 09: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, 10: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, 07:21 AM
ok .. thank you

it works

brothercake
05-02-2004, 07:28 AM
ace :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum