» Форма входа

»Мoy-weB ver.4.1

» Статистика

 Главная » 2008 » Сентябрь » 10 » Древовидное меню

Древовидное меню
10.Сен.2008 | 17:40:35
Древовидное меню

Теперь про меню скажу. Все
наверно видели такие меню, с виду обычные три ссылки, а нажимаешь на
неё и выскакивают ещё подразделы. Вот примерно это сейчас и сделаем:

до нажатия:

[ Популярные и нужные скрипты ] *

после нажатия:

[ Популярные и нужные скрипты ] *


JavaScript: (объяснения ниже)

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 макет нашего меню: (объяснения опять таки ниже...) tongue.gif

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>



Что видим:
у
каждого <div> есть уникальный id (menu1,2,3), припоминаете эти
названия, в верхнем скрипте мы их скрыли (none). И есть ещё загадочное
onLoad="javascript:startmenu()" smile.gif а это темка сразу при загрузке страницы, запускает функцию, которая в свою очередь скрывает <div>'ы.
С этим понятно. Теперь давайте поглядим на это:
CODE
<a href="javaScript:menufunc('menu3')">
Опять знакомые все лица, неправда ли wink.gif ( вспоминаем функцию menufunc и её значение - menuId )
этой
строчкой в ту самую функцию menufunc мы вместо menuId, ставим тот id
который хотим открыть.... вот теперь думаю всё окончательно понятно. wink.gif

Ну вот собсно меню и готово, beer.gif ну для пущей красоты можно накидать css.

примерно так:

CODE
a:visited{color:black;font-family:verdana}
a:link{color:black;font-family:verdana}
a:hover{color:blue;font-family:verdana}



ну это уже украшательства, на любителя... tongue.gif
Категория: Скрипты для UCOZ | Просмотров: 1294 | Добавил: CorsaR
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]