Reputation: 189
Hi I wrote a code for my menu bar as shown below. The menu bar is supposed to expand only when my mouse is over the menu. But it is expanding by default.
<dt onmouseover="javascript:montre('smenu1');">
<a href="#">● About Us</a></dt>
<dd id="smenu1" onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre();">
<ul>
<li><a href="../php_sql_scripts/index.php">º What is microEP?</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu12');">
<a href="#">● News</a></dt>
<dd id="smenu12" onmouseover="javascript:montre('smenu12');" onmouseout="javascript:montre();">
<ul>
<li><a href="../php_sql_scripts/news.php">º Department News</a></li>
</ul>
</dd>
<dt onmouseover="javascript:montre('smenu13');">
<a href="#">● Calendar</a></dt>
<dd id="smenu13" onmouseover="javascript:montre('smenu13');" onmouseout="javascript:montre();">
<ul>
<li><a href="../php_sql_scripts/calendar.php">º Calendar of events</a></li>
</ul>
</dd>
<script type="text/javascript">
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=14; i++)
{
if (document.getElementById('smenu'+i))
{
document.getElementById('smenu'+i).style.display='none';
}
}
if (d)
{
d.style.display='block';
d.style.zIndex = 12;
}
}
</script>
Upvotes: 1
Views: 320
Reputation: 26617
You must hide the elements when the page is loaded. There's different way to do this :
display: none
montre()
in one of the different loading event, for exemple window.onload
Another topic, like said in one of the comment, you should use a library to do this, for example jQuery.
Upvotes: 2