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

Enya

Дата 12.6.2007, 13:12 (ссылка)

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

Загрузка ...

Опытный

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

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

Вот. Давно я писала на JS. нужно сделать простое меню. вот сиписок элементов меню

Код


<ul>
 <li><a hef="">Button</a></li>
 <li><a hef="">Button</a></li>
 <li><a hef="">Button</a></li>
</ul>

при клике на одну из кнопок. список раздвигается и там видно под меню.

Код


<ul>
 <li><a hef="">Button</a></li>
 <li><a hef="">Button</a></li>
    <li><a hef="">Button</a></li>
    <li><a hef="">Button</a></li>
    <li><a hef="">Button</a></li>
 <li><a hef="">Button</a></li>
</ul>

при клике на другой вариант у которого есть подуровни предыдущее сворачивается.

Код


<ul>
 <li><a hef="">Button</a></li>
 <li><a hef="">Button</a></li>
 <li><a hef="">Button</a></li>
    <li><a hef="">Button</a></li>
    <li><a hef="">Button</a></li>
    <li><a hef="">Button</a></li>
</ul>

Добавлено через 3 минуты и 10 секунд
Вот хочу вот такую весщь реализовать. если у кого есть идее или что-то похожее то заранее благодарна и от меня
+ в репку не заржавеет.

Это сообщение отредактировал(а) Enya - 12.6.2007, 13:14

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

Enya

Дата 12.6.2007, 13:43 (ссылка)

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

Загрузка ...

Опытный

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

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

А можно наверное перенести тему в общие вопросы? я наверное не туда запостила.

--------------------

Утсанвлен Денвер
1. PHP Version 5.1.6
2. MySQL 5.0.18-max
3. phpMyAdmin 2.6.1

Vaneska

Дата 21.6.2007, 13:23 (ссылка)

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

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 141
Регистрация: 15.3.2005
Где: Москва

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

Есть такой скриптик.

Код



<script type="text/javascript">

            function groupMenu(menuId, activeGroup) {
                this.menu = menuId; // Контейнер меню
                this.activeGroupNumber = activeGroup; // Номер группы открытой по умолчанию

                this.initMenu = function () { // Инициализация меню
                    this.menu = document.getElementById(this.menu);
                    
                    if(!this.menu) {
                        alert('Error! Can\'t init groupMenu!');
                        return;                    
                    }

                    var list = this.menu.childNodes;                    
                    var count = 0;
                    for(var i=0; i < list.length; i++) { // Поиск пунктов меню
                        if(list[i].tagName == 'LI') {
                            list[i].onclick = this.showMenuGroup; // Событие на нажатие мышки
                            list[i].parentObject = this; // ссылка на Обьект    
                            var list2 = list[i].childNodes;
                            for(var j=0; j < list2.length; j++) { // открытие узла по умолчанию
                                if(list2[j].tagName == 'UL') {
                                    count++;
                                    if (count == this.activeGroupNumber) list2[j].style.display = 'block';
                                    break;
                                }
                            }
                        }
                    }
                }
            
                this.showMenuGroup = function () { 
                    
                    if(!this.parentObject.menu) {
                        alert('Error! Can\'t init groupMenu!');
                        return;                    
                    }
                    
                    var list = this.childNodes;
                    var group;
                    
                    // поиск контейнера раскрывающегося списка 
                    for(var i=0; i < list.length; i++) { 
                        if(list[i].tagName == 'UL') {
                            group = list[i];
                        }
                    }
                    
                    // если список виден сделать его невидимым 
                    var groupDisplay = group.style.display =='block' ? 'none' : 'block';
                    
                    // закрытие всех списков и открытие нужного
                    list = this.parentObject.menu.childNodes;
                    for(var i=0; i < list.length; i++) {
                        if(list[i].tagName == 'LI') {
                            var list2 = list[i].childNodes;
                            for(var j=0; j < list2.length; j++) {
                                if(list2[j].tagName == 'UL') {
                                    if (list2[j] == group) {
                                        list2[j].style.display = groupDisplay;
                                    } else {
                                        list2[j].style.display = 'none';
                                    }
                                }
                            }
                        }
                    }            
                }
            }
        </script>

Это класс двухуровнего меню. Поддерживается только два уровня.
Писалось для простенького сайтика.
Запускать в работу так:

Код


        <script type="text/javascript">
                        // создание объекта
                        // первый параметр - id тега ul, второй - номер открытой группы
            var leftMenu = new groupMenu('leftmenu', 0); 
            
            window.onload = function () {
            
                                // инициализация меню, можно наверно ставить после самого списка, а не в onload
                leftMenu.initMenu();    
            
            }
        </script>

для ul второго уровня я сразу задавал display: none;
но можно в скрипте в initMenu добавить строчку, чтобы это делалось автоматически.

Забыл для точности.
меню должно выглядель приблизительно сл. образом:

Код


<ul id="leftmenu">
 <li><a hef="">Button</a></li>
 <li><a hef="">Button</a></li>
 <li><a hef="">Button</a>
    <ul>
          <li><a hef="">Button</a></li>
          <li><a hef="">Button</a></li>
          <li><a hef="">Button</a></li>
    </ul>
</li>
</ul>

Это сообщение отредактировал(а) Vaneska - 21.6.2007, 13:26

--------------------

http://isokolov.blogspot.com/

Alx

Дата 22.6.2007, 14:36 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

Модератор: Сообщение скрыто.

--------------------

S.A.P.

Дата 22.6.2007, 20:59 (ссылка)

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

Загрузка ...

Эксперт

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

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

http://www.artlebedev.ru/tools/technogrette/html/treeview/

name

Дата 23.6.2007, 15:16 (ссылка)

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

Загрузка ...

Шустрый

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

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

А как сделать ОБЫЧНОЕ ани меню (типа есть картинка, навел, она изменилась, убрал курсор, старая вернулась) самым простым способом. подскажите плз, я в ДЖскрипте ничего не понимаю.
Или это уже где то есть?

Alx

Дата 23.6.2007, 15:55 (ссылка)

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

Загрузка ...

Ajaxy

Профиль
Группа: Комодератор
Сообщений: 2903
Регистрация: 26.11.2003
Где: Cutopia

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

name,

Код


<img src="1_out.gif" onmouseover="this.src='1_over.gif'" onmouseout="this.src='1_out.gif'" />

--------------------

name

Дата 23.6.2007, 16:35 (ссылка)

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

Загрузка ...

Шустрый

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

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

спасибо. уже вставил)

SelenIT

Дата 24.6.2007, 03:41 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

Enya, если вопрос еще актуален - осмелюсь предложить еще один вариант с упором на "простоту"...

Код


<html>
<head>
<title>Simplest menu</title>
<script type="text/javascript">

// спрячем подпункты меню (если JS выключен, меню полностью развернуто)
document.write('<style>#leftmenu ul { display: none; }</style>')

function act(obj) {
   // "перевод стрелок" на интересующий объект
   obj = obj.parentNode.getElementsByTagName('ul')[0];
   // если кликнут уже выбранный пункт или нет вложенного ul - ничего не делаем
   if (!obj || (obj == act.open)) return false;
   // иначе спрячем старый выбранный, раскроем кликнутый и запомним его
   if (act.open) act.open.style.display = 'none';
   obj.style.display = 'block';
   act.open = obj;
   return false;
}

</script>
</head>
<body>
<ul id="leftmenu">
 <li><a href="" onclick="return act(this)">Button 1</a>
    <ul>
          <li><a href="">Button 1.1</a></li>
          <li><a href="">Button 1.2</a></li>
          <li><a href="">Button 1.3</a></li>
    </ul>
 </li>
 <li><a href="">Button 2</a></li>
 <li><a href="" onclick="return act(this)">Button 3</a>
    <ul>
          <li><a href="">Button 3.1</a></li>
          <li><a href="">Button 3.2</a></li>
    </ul>
</li>
</ul>
</html>

Суть та же, что у Лебедева. В дальнейшем скрипт можно совершенствовать сколько угодно - навешивать стили и обработчики динамически и т.п., но это приведет к усложнению... задача этого примера - проиллюстрировать принцип самого скрытия/раскрытия пунктов...

name, в XXI веке принято делать "обычное ани меню" с помощью CSS.

Это сообщение отредактировал(а) SelenIT - 24.6.2007, 13:12

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

AKS

Дата 24.6.2007, 12:45 (ссылка)

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

Загрузка ...

Участник форума

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

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

SelenIT, а есть хоть какой-нибудь шанс, что это условие:

Код


if (obj == act.open)

будет выполнено?

SelenIT

Дата 24.6.2007, 12:55 (ссылка)

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

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

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

AKS, упс, понял ;) Спасибо за внимательность!
Fixed... однако простоты уже немного поубавилось(.

Это сообщение отредактировал(а) SelenIT - 24.6.2007, 13:15

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

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