DHTML HTML Dokumendis

Muuda elementide väärtusi ja kirjuta oma tekst. Seejärel vajuta " Sisesta " nuppu.

<html>
<head>
<style>
body{font-family:arial;}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:#f0f8ff}

table.nav
{
background:black;
position:relative;
font: bold 80% arial;
top:0px;
left:-135px;
}
</style>
<script type="text/javascript">
var i=-135;
var c=0;
var intHide;
var speed=3;
function show_hide_menu()
{
if (c==0)
	{
	c=1;
	clearInterval(intHide);
	intShow=setInterval("show()",10);
	}
else
	{
	c=0;
	clearInterval(intShow);
	intHide=setInterval("hide()",10);
	}
}
function show()
{
if (i<-12)
	{
	i=i+speed;
	document.getElementById('myMenu').style.left=i;
	}
}
function hide()
{
if (i>-135)
	{
	i=i-speed;
	document.getElementById('myMenu').style.left=i;
	}
}
</script>
</head>

<body>
<table id="myMenu" class="nav" width="150" onclick="show_hide_menu()">
<tr><td class="menu"><a href="#">KOJU</a></td>
<td rowspan="5" align="center" bgcolor="#ffe4c4">M<br />E<br />N<br />&Uuml;<br />&Uuml;</td></tr>
<tr><td class="menu"><a href="#">Veebidisain</a></td></tr>
<tr><td class="menu"><a href="#">HTML</a></td></tr>
<tr><td class="menu"><a href="#">CSS</a></td></tr>
<tr><td class="menu"><a href="#">JavaScript</a></td></tr>
</table>
<p>Kliki men&uuml;&uuml;le selleks, et seda avada ja sulgeda</p>
<p>Proovi ka muuta avamise ja sulgemise kiirust ("speed")</p>
</body>
</html>