Blue Dark 
Blue Light 
Green Dark 
Violet Light 
Red Dark 
Red Light 
CODE
<script>
function startmenu()
{
document.getElementById('menu1').style.display = "none";
document.getElementById('menu2').style.display = "none";
document.getElementById('menu3').style.display = "none";
}
function menufunc(menuId)
{
if(document.getElementById(menuId).style.display == "none")
{
startmenu();
document.getElementById(menuId).style.display = "block";
}
else
{
startmenu();
}
}
</script>
что где?
1) function startmenu() - создаём функцию, имя произвольное в данном случаи startmenu
2)
document.getElementById('menu1').style.display = "none"; - этой
строчкой находится элемент в документе, id которого - menu1 и этот
элемент удаляется из документа. Занимаемое им место не резервируется и
веб-страница формируется так, словно элемента и не было. В нашем случи
таких мест - 3 (тоесть три 'выподаюших' меню )
3) function
menufunc(menuId) - новая функция, в теле которой будет условие. звучит
примерно так: если элемент в документе имеет id - menuId и этот элемент
равен значению - none (тоесть скрыт), то присвоить ему значение -
block! Которое откроет наше меню... ежели нет, то всё как в первом
пункте.
Теперь что такое menuId??? А это мы узнаем, когда сделаем html макет нашего меню: (объяснения опять таки ниже...)
CODE
<body onLoad="javascript:startmenu()">
<table width="100%">
<tr>
<td valign="top" width="20%">
<a href="javaScript:menufunc('menu1')">Photoshop</a>
<div id="menu1">
- <a href='/'>Уроки Photoshop</a><br>
- <a href='/'>Работа в Photoshop</a><br>
- <a href='/'>Photoshop Exchange</a><br>
</div>
<br>
<a href="javaScript:menufunc('menu2')">Векторные редакторы</a>
<div id="menu2">
- <a href='/'>Adobe Illustrator</a><br>
- <a href='/'>Corel Draw</a><br>
</div>
<br>
<a href="javaScript:menufunc('menu3')">3D редакторы</a>
<div id="menu3">
- <a href='/'>3D редакторы</a><br>
- <a href='/'>3D Уроки</a><br>
- <a href='/'>3D Работы</a><br>
</div>
<br>
</td>
<td valign="top" width="80%">
</td>
</tr>
</table>
</body>
Для красоты заделаем CSS
CODE
a:visited{color:black;font-family:verdana}
a:link{color:black;font-family:verdana}
a:hover{color:blue;font-family:verdana}
Комментарии