Смотрите пример ниже.
HTML код:
<html><head>
<title>Ня</title>
<script>
function hopen(id) {
a = document.getElementById(id);
if (a.style.display == "none") a.style.display = "inline";
else a.style.display = "none";
return true;
}
</script>
<style>
li {list-style-type:none; // спрятать маркеры списка
margin-left:20px} // сделать отступ слева для каждого нового уровня
</style>
</head><body>
<ul id="top">
<li><a href=# onclick="hopen('n1')">Журналы</a>
<ul id="n1" style="display:none">
<li><a href=# onclick="hopen('n1_1')">Системный администратор</a>
<ul id="n1_1" style="display:none">
<li>1999</li>
<li>2000</li>
<li>2001</li>
</ul>
</li>
<li><a href=# onclick="hopen('n1_2')">Повар-сантехник</a>
<ul id="n1_2" style="display:none">
<li>1999</li>
<li>2000</li>
<li>2001</li>
</ul>
</li>
<li><a href=# onclick="hopen('n1_3')">Мурзилка</a>
<ul id="n1_3" style="display:none">
<li>1999</li>
<li>2000</li>
<li>2001</li>
</ul>
</li>
</ul>
</li>
<li><a href=# onclick="hopen('n2')">Книги</a>
<ul id="n2" style="display:none">
<li>Пушкин</li>
<li>Достоевский</li>
<li>Гоголь</li>
</ul>
</li>
</ul>
</body>
</html>
Основные пункты:
- вложенные пункты имеют идентификатор (id="n1_1")
- при клике по ссылке (событие onclick) вызывается функция hopen(), описанная в начале страницы. В неё передаётся имя того списка, который надо отобразить (также hopen('n1_1')). Я использую и двойные, и одинарные кавычки - пусть вас это в заблуждение не вводит. Просто мне так удобно.
По xhtml-стандарту, кажется, надо двойные ставить, но этот файл всё равно не пройдёт валидацию.
- функция работает следующим образом:
--- получает имя элемента, к которому надо обратиться
--- обращается к этому элементу (для краткости я его в переменную
а сохраняю)
--- проверяет стиль элемента. Если он скрыт - отображает, если отображается - скрывает.
--- return в конце функции - на всякий случай, чтобы браузер вдруг по своей воле не перешёл по ссылке.
Также обратите внимание на описанный стиль. Если его убрать - будет выглядеть иначе)
Красиво попробуйте оформить сами
