VPF::меню на javascript - Форум программистов

svip

Дата 26.1.2008, 20:31 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 61
Регистрация: 27.3.2007

Репутация: нет
Всего: нет

Сразу скажу что в javascript - полный дуб. Пишу на php. Вот появилась проблема:
Есть шаблон

Код


<!-- Sardar: под-меню лучше вкладывать в отдельный слой, удобней работать. -->
<!-- в структурном плане лучше использовать списки ul -->
<div id="menu1"><div>МЕНЮ1</div>
 <div classs="container">
  <div id="menu1.1">Подменю1</div>
  <div id="menu1.2">Подменю2</div>
  <div id="menu1.3"><div>Подменю3</div>
   <div classs="container">
     <div id="menu1.3.1">Подподменю3</div>
     <div id="menu1.3.1">Подподменю3</div>
   </div>
  <div id="menu1.4">Подменю4</div>
 </div></div>

<!-- далее оригинальная вёрстка -->
<div id="menu1">МЕНЮ2</div>
  <div id="menu1.1">Подменю1</div>
  <div id="menu1.2">Подменю2</div>
  <div id="menu1.3">Подменю3</div>
     <div id="menu1.3.1">Подподменю3</div>
     <div id="menu1.3.1">Подподменю3</div>
  <div id="menu1.4">Подменю4</div>

Помогите. как сделать чтобы при клике на МЕНЮ разворачивалось его подменю. при посторном клике - сворачивалось. Если выбрано первое меню, то при клике на второе или др. первое сворачивалось, а разворачивалось то на которое кликнули??

M
Sardar

Пользуйся кнопкой "Код". Поправил твою вёрстку. Задачу найти div:class:container в childNodes и скрыть/открыть путём style.display = "none/block" (в будущем появиться .irrelevant для этого;) ) оставляю на тебя.

Это сообщение отредактировал(а) Sardar - 26.1.2008, 21:25

KonstRuctor

Дата 1.2.2008, 22:44 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 245
Регистрация: 31.3.2006
Где: Россия, Санкт-Пет ербург

Репутация: нет
Всего: нет

Привет, это ты мне сообщение на e-mail присылал?
Я, признаться, его убил, думал что СПАМ... теперь вижу, что не СПАМ это был.
Решил проблему с меню? Помощь нужна?

Dr.Zlo

Дата 2.2.2008, 00:40 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 49
Регистрация: 12.11.2007

Репутация: 1
Всего: 2

Цитата

Сардар, ты специально это сделал, чтоб парень мучался дольше? smile

Вот пример, может быть не самый правильный с идеологической точки зрения, зато простой в понимании, новичку самое то:

Код


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title></title>
<style>

.container{
  padding-left: 30px;
  display: none;
}

.have_sub{
  cursor: pointer;
  color: blue;
}
</style>
<script>
function menu_assign(menu_id){
    var menu_mas = document.getElementById(menu_id).getElementsByTagName('div');
    for (var i=0; i<menu_mas.length; i++){
        if (menu_mas[i+1] && (menu_mas[i+1].className == "container")){
            menu_mas[i].sub = menu_mas[i+1];
            menu_mas[i].className = "have_sub";
            menu_mas[i].onclick=function(){
                this.sub.style.display = (this.sub.style.display == 'block')? 'none' : 'block';
            }
        }
    }
}

</script>
</head>
<body onload="menu_assign('menu')">

<div id="menu">
    <div>МЕНЮ</div>
        <div class="container">
            <div>Подменю</div>
            <div>Подменю</div>
            <div>Подменю</div>
            <div class="container">
                <div >Подподменю</div>
                <div >Подподменю</div>
            </div>
            <div>Подменю</div>
            <div class="container">
                <div>Подменю</div>
                <div>Подменю</div>
                <div>Подменю</div>
                <div class="container">
                    <div >Подподменю</div>
                    <div >Подподменю</div>
                    <div >Подподменю</div>
                    <div >Подподменю</div>
                </div>
                <div>Подменю</div>
                <div>Подменю</div>
        </div>
        </div>
    </div>
</div>
</body>
</html>

Это сообщение отредактировал(а) Dr.Zlo - 2.2.2008, 00:43

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »