...

View Full Version : First script. menu



awsomejoe23
05-13-2007, 02:28 AM
Hey guys I decided to expand my horizon, and start on learning javascript today!!!
Unfortunately my first script isn't working. :(
I am planing on eventually making a drop down menu.
This is the first thing I could come up with for starts.

<html>
<head>
<style type="text/css">
#menu {
float:left;
width:40px;
margin:1px 1px 1px 1px;
background-color:#666667;
padding:1px 1px 1px 1px;
}
#sub {
float:left;
clear:left;
width:35px;
margin:1px 1px 1px 1px;
background-color:#454545;
padding:1px 1px 1px 1px;
}
</style>
</head>
<body>
<script type="text/javascript">
function sub() {
var item = 1
}
</script>
<div id="menu" ><a href="#" onmouseover="sub()">link</a></div>
<div id="menu" ><a href="#" onmouseover="sub()">link</a></div>
<div id="menu" ><a href="#" onmouseover="sub()">link</a></div>
<script type="text/javascript">
if(item ==1) {
document.write("<div id="sub">link2</div>");
}
</script>
</body>
</html>
I'm sure I will have to change the "item" variable on mouse off and everything, but I will save that for later. What I want to know now is why isn't the "sub" div showing up on mouse over?

_Aerospace_Eng_
05-13-2007, 11:41 AM
Your problem is using document.write. The document.write will never run because that part of the script only works on page load. You are also going about this the wrong way. Personally I wouldn't try to reinvent the wheel. Using the techniques already out there would be better like this one http://alistapart.com/articles/dropdowns/

What you should be doing is changing the style property of the element using onmouseover and onmouseout.

Also before trying to move on to another coding language, work on becoming proficient at one before moving on. Your HTML needs some work, as well as your CSS (a little redundant). Look into the term 'semantics'.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Simple Dropmenu Javascrip</title>
<style type="text/css">
#menu {
list-style:none;
}

#menu a {
float:left;
width:40px;
margin:1px;
background:#666667;
padding:1px;
}
#sub {
float:left;
clear:left;
width:35px;
margin:1px;
background:#454545;
padding:1px;
}
</style>
<script type="text/javascript">
function displaySub(num)
{
document.getElementById('sub'+num).style.display = (document.getElementById('sub'+num).style.display == 'none') ? 'block' : 'none';
}
window.onload = function()
{
var num = 3;
for(var i = 1; i <= num; i++)
{
document.getElementById('sub'+i).style.display = 'none';
}
}
</script>
</head>
<body>
<ul id="menu">
<li><a href="#" onmouseover="displaySub(1)" onmouseout="displaySub(1)">link</a></li>
<li><a href="#" onmouseover="displaySub(2)" onmouseout="displaySub(2)">link</a></li>
<li><a href="#" onmouseover="displaySub(3)" onmouseout="displaySub(3)">link</a></li>
</ul>
<div id="sub1">This is submenu 1</div>
<div id="sub2">This is submenu 2</div>
<div id="sub3">This is submenu 3</div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum