...
PDA

Close the menu when the mouse is out and the page is loaded

Lleoun
04-25-2008, 11:08 AM
Hi all,

The code below is a nice menu that works not very well:
I need it to close when the mouse is not over it, and I dont know how to do it.
Plus when the page load the menu goes expanded and it only should be expanded when the mouse is over not on page load.

Thanks a lot in advance!



<head>

<script type="text/javascript">
<!--


window.onload=montre;


function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--

body {margin: 10px;
padding: 0;
font: 1em Verdana, sans-serif;}

dt, dl, dd, ul, li {
list-style-type: none;
margin: 0 10px 0 0;
padding: 0;
}

#menu {
position : absolute;
left: 50px;
top: 20px;
}

#menu dl {
float: left;
}
#menu li {
display: inline;
}

#menu a {
text-decoration: none;
color: #000;
background: #fff;
}

#smenu1, #smenu2, #smenu3, #smenu4 {
position: absolute;
left: 0;
font-size: 0.7em;
border-top: 1px solid gray;
width: 400px;
}


.mentions {
position: absolute;
bottom : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
a {text-decoration: none;
color: #222;
}

-->
</style>

</head>

<body>

<div id="menu">

<dl>
<dt onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>
<dd id="smenu1">
<ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>
<li><a href="#">Menu 1.3</a></li>

</ul>
</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu2');"><a href="#">Menu 2</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#">Menu 2.1</a></li>

<li><a href="#">Menu 2.2</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu3');"><a href="#">Menu 3</a></dt>
<dd id="smenu3">
<ul>

<li><a href="#">Menu 3.1</a></li>
<li><a href="#">Menu 3.2</a></li>
<li><a href="#">Menu 3.3</a></li>
<li><a href="#">Menu 3.4</a></li>
<li><a href="#">Menu 3.5</a></li>
</ul>

</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu4');"><a href="#">Menu 4</a></dt>
<dd id="smenu4">
<ul>
<li><a href="#">Menu 4.1</a></li>
<li><a href="#">Menu 4.2</a></li>

<li><a href="#">Menu 4.3</a></li>
</ul>
</dd>
</dl>

</div>



</body>
mjlorbet
04-25-2008, 11:14 AM
<head>

<script type="text/javascript">
<!--


window.onload=montre;


function montre(id) {
var d;
d = id?document.getElementById(id):undefined;
for (var i = 1; i<=4; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css">
<!--

body {margin: 10px;
padding: 0;
font: 1em Verdana, sans-serif;}

dt, dl, dd, ul, li {
list-style-type: none;
margin: 0 10px 0 0;
padding: 0;
}

#menu {
position : absolute;
left: 50px;
top: 20px;
}

#menu dl {
float: left;
}
#menu li {
display: inline;
}

#menu a {
text-decoration: none;
color: #000;
background: #fff;
}

#smenu1, #smenu2, #smenu3, #smenu4 {
position: absolute;
left: 0;
font-size: 0.7em;
border-top: 1px solid gray;
width: 400px;
}


.mentions {
position: absolute;
bottom : 300px;
left : 10px;
color: #000;
background-color: #ddd;
}
a {text-decoration: none;
color: #222;
}

-->
</style>

</head>

<body>

<div id="menu">

<dl>
<dt onmouseover="montre('smenu1');"><a href="#">Menu 1</a></dt>
<dd id="smenu1">
<ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>
<li><a href="#">Menu 1.3</a></li>

</ul>
</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu2');"><a href="#">Menu 2</a></dt>
<dd id="smenu2">
<ul>
<li><a href="#">Menu 2.1</a></li>

<li><a href="#">Menu 2.2</a></li>
</ul>
</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu3');"><a href="#">Menu 3</a></dt>
<dd id="smenu3">
<ul>

<li><a href="#">Menu 3.1</a></li>
<li><a href="#">Menu 3.2</a></li>
<li><a href="#">Menu 3.3</a></li>
<li><a href="#">Menu 3.4</a></li>
<li><a href="#">Menu 3.5</a></li>
</ul>

</dd>
</dl>

<dl>
<dt onmouseover="montre('smenu4');"><a href="#">Menu 4</a></dt>
<dd id="smenu4">
<ul>
<li><a href="#">Menu 4.1</a></li>
<li><a href="#">Menu 4.2</a></li>

<li><a href="#">Menu 4.3</a></li>
</ul>
</dd>
</dl>

</div>



</body>


your code was checking for elements up to 10 but you only have 4, that would be generating errors, causing the script to break. the entry to the montre function also could cause errors being that on page load no id is being passed in to the function but is still being passed to document.getElementById. the thing you can do now to make the menus collapse on mouse out is to add

onmouseout="montre();"

to each menu
Lleoun
04-25-2008, 01:41 PM
Thanks Mike for your gorgeous code!

The only thing, if I do:


onmouseout="montre();"


I don't have the time to click on the submenus. As soon as I put the pointer out of the word “Menu”, in order to choose one of the submenus, the submenu’s line disappears :-(

Thanks once again!
mjlorbet
04-25-2008, 02:38 PM
move that to the dl instead of the dt
Lleoun
04-28-2008, 10:12 AM
Thanks again, but I'm afraid it does not work even moving it to the dl..
lordkaine01
05-15-2008, 09:43 PM
<head>

<script language="JavaScript">

window.onload=montre;

function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=2; i++) {
if (document.getElementById('smenu'+i)) {
document.getElementById('smenu'+i).style.display='none';
}
}
if (d) {
d.style.display='block';
}
}

</script>

<style type="text/css">

dl, dt, dd, ul {
margin: 0;
padding: 0;
list-style-type: none;
}

li {
background-color: #660000;
line-height: 20px;
border: 1px solid;
border-color: #000000;
text-align: center;
margin: 1px;
font-weight: bold;
background-image: url(images/buttonbg.png);
}

#menu {
position: absolute;
width: 145px;
}

#menu dt {
background-color: #660000;
line-height: 20px;
border: 3px double;
border-color: #000000;
text-align: center;
margin-bottom: 3px;
font-weight: bold;
background-image: url(images/buttonbg.png);
}

#menu dd {
position: absolute;
z-index: 2;
left: 125px;
margin-top: -26px;
width: 150px;
background-color: #660000;
border: 1px solid;
border-color: #000000;
}

#menu ul {
padding: 2px;
}

#menu li {
text-align: center;
}

#menu li a, #menu dt a {
color: #AAAAAA;
text-decoration: none;
display: block;
}

#menu dt a:hover {
text-decoration: none;
background-color:#770000;
background-image:url(images/buttonover.png);
}

#menu ul a:hover {
text-decoration: none;
background-color:#3300FF;
background-image:url(images/buttonover.png);
}
</style>

</head>

<body>

<dl id="menu">
<dt onmouseover="montre('smenu1');" onmouseout="montre();">
<a href="#">Menu 1</a>
</dt>
<dd id="smenu1" onmouseover="montre('smenu1');" onmouseout="montre();">
<ul>
<li><a href="#">Menu 1.1</a></li>
<li><a href="#">Menu 1.2</a></li>
<li><a href="#">Menu 1.3</a></li>
</ul>
</dd>
<dt onmouseover="montre('smenu2');" onmouseout="montre();">
<a href="#">Menu 2</a>
</dt>
<dd id="smenu2" onmouseover="montre('smenu2');" onmouseout="montre();">
<ul>
<li><a href="#">Menu 2.1</a></li>
<li><a href="#">Menu 2.2</a></li>
</ul>
</dd>
</dl>

</body>




This is a little tweek to what you have and it works fine. The only issue I have with it is that when you open the page it asks for permision to use the script/active x control. If you can fix that small hiccup I would very much apreciate it as I really like this menu style.

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum