VPF::хочу написать простейшее меню

begin

Дата 27.7.2009, 13:02 (ссылка)

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

Загрузка ...

Опытный

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

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

Есть меню: разделы и подразделы (т.е. двухуровневое). Грузятся сразу все пункты и подпункты. Но вначале пользователь видит только список разделов. Нужно, чтобы при наведении мышки на раздел - появлялся список подразделов, раздвигая при этом остальные пункты меню. Плавность тут не обязательна. При наведении на другой раздел, эти подразделы исчезают, меню опять сжимается, появляются другие подразделы, снова раздвигая собой меню.
Поискал готовые скрипты, но они настолько громоздкие, что пропадает всякое желание. Вот я и подумал: допустим каждая группа подразделов лежит в в своем div. При событии onmouseover для их родительского раздела, меняется свойство display у div хранящего подразделы для данного раздела. Но вот будет ли при этом появляющийся div раздвигать остальные пункты меню, а не просто перекрывать их сверху?
Заранее благодарю за советы по этой теме.

Michael.de

Дата 28.7.2009, 01:05 (ссылка)

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

Загрузка ...

Опытный

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

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

begin, предлагаю следующее: нарисуй от руки на бумажке оба варианта (закрытое и раскрытое) меню, отсканируй (сожми до ~25KByte) и покажи тут. Я, честно говоря, не врубился (про остальных не знаю) smile

begin

Дата 28.7.2009, 13:09 (ссылка)

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

Загрузка ...

Опытный

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

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

Вот как должно выглядеть меню в разных ситуациях:

1. На меню еще не наводили мышку:

Код


• АВТОМОБИЛИ
• КАТЕРЫ
• МОТОЦИКЛЫ

2. Навели мышку на пункт "катеры":

Код


• АВТОМОБИЛИ
• КАТЕРЫ
   - двухместные
   - четырехместные
• МОТОЦИКЛЫ

3. Навели мышку на пункт "автомобили":

Код


• АВТОМОБИЛИ
   - хетчбеки
   - татчбеки
   - кабриолеты
   - полноприводные
• КАТЕРЫ
• МОТОЦИКЛЫ

EmilRegis

Дата 28.7.2009, 13:19 (ссылка)

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

Загрузка ...

Опытный

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

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

так если div подменю будет лежать внутри div'а родителя, то в любом случае всё будет раздвигаться
то есть

Код


<div>
АВТОМОБИЛИ
<div id=childAuto>
...
</div>
</div>
<div>
КАТЕРЫ
<div id=childCat>
...
</div>
</div>
<div>
МОТОЦИКЛЫ
<div id=childMoto>
</div>
</div>

begin

Дата 28.7.2009, 20:54 (ссылка)

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

Загрузка ...

Опытный

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

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

Итак, написал код, но не работает - никакой реакции.

Код


<style>
div.menuover
{margin:0px; padding:0px; display:none;}
</style>

<div>
<a href='#' onmouseover="document.getElementById("menu2_2").style.display='block'">• Автомобили</a>
</div>
<div class='menuover' id="menu2_2">
<a href='index.php?option=2&v=1'>Хетчбеки</a><br>
<a href='index.php?option=2&v=2'>Кабриолеты</a><br>
<a href='index.php?option=2&v=3'>Полноприводные</a>
</div>

Подскажите - что я не так делаю? smile

Michael.de

Дата 28.7.2009, 23:02 (ссылка)

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

Загрузка ...

Опытный

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

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

begin, следующий код работает:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type='text/css'>
div.menuover {margin:0px; padding:0px; display:none;}
</style>
<script type='text/javascript'>
var pressed=[false, false, false];
function isPressed(el){
 number=el.id.substr(1);
 pressed[number]=!pressed[number];
 if (pressed[number]) document.getElementById("menu"+number+"_2").style.display='block';
 else document.getElementById("menu"+number+"_2").style.display='none';
}
</script>
</head>
<body>

<div onclick='isPressed(this);' id='d0'> Computers </div>
<div class='menuover' id="menu0_2">
<a href='index.php?option=0&v=1'> PCs </a><br>
<a href='index.php?option=0&v=2'> Mac </a><br>
<a href='index.php?option=0&v=3'> Wii </a>
</div>
<br>
<div onclick='isPressed(this);' id='d1'> Cars </div>
<div class='menuover' id="menu1_2">
<a href='index.php?option=1&v=1'> BMW </a><br>
<a href='index.php?option=1&v=2'> VW </a><br>
<a href='index.php?option=1&v=3'> Audi </a>
</div>
<br>
<div onclick='isPressed(this);' id='d2'> Drinks </div>
<div class='menuover' id="menu2_2">
<a href='index.php?option=2&v=1'> Pepsi </a><br>
<a href='index.php?option=2&v=2'> Fanta </a><br>
<a href='index.php?option=2&v=3'> Milk </a>
</div>

</body>
</html>

только там используется onclick() вместо onmouseover() и onmouseout() smile

EmilRegis

Дата 29.7.2009, 05:42 (ссылка)

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

Загрузка ...

Опытный

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

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

Цитата(begin @ 28.7.2009, 20:54

)

Подскажите - что я не так делаю? smile

с кавычками напутал...поставь одинарные

Код


<a href='#' onmouseover="document.getElementById('menu2_2').style.display='block'">• Автомобили</a>

Это сообщение отредактировал(а) EmilRegis - 29.7.2009, 05:43

begin

Дата 29.7.2009, 17:30 (ссылка)

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

Загрузка ...

Опытный

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

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

Спасибо всем smile

, сейчас буду пробовать. Позже отпишусь о результатах smile

begin

Дата 29.7.2009, 20:00 (ссылка)

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

Загрузка ...

Опытный

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

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

Этот код очень помог. Но теперь встала задача: нужно ведь сворачивать остальные div'ы.
Попровал сделать это вот так - добавил цикл до 20 (с запасом), который прячет все div'ы.
Но:
1. перестает все работать вообще
2. как посчитать количество подлежащих сворачиванию div'ов?

Код


<script type='text/javascript'>
var pressed=[false, false, false];
function isPressed(el){

for (var i = 0; i < 20; i++) 
{
document.getElementById("menu"+i+"_2").style.display='none';
}

 number=el.id.substr(1);
 pressed[number]=!pressed[number];
 if (pressed[number]) document.getElementById("menu"+number+"_2").style.display='block';
 else document.getElementById("menu"+number+"_2").style.display='none';
}
</script>

diadiavova

Дата 29.7.2009, 20:02 (ссылка)

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

Загрузка ...

Доктор Зло(диагност, настоящий, с лицензией и полномочиями)

Профиль
Группа: Модератор
Сообщений: 5821
Регистрация: 14.8.2008
Где: В Коньфпольте

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

Код


<html>
<head>
    <title>Menu</title>
    <style type='text/css'>
        .submenu
        {
            display: none;
        }
        .menuitem
        {
            cursor: pointer;
        }
        .submenuitem
        {
            list-style-type: none;
        }
    </style>

    <script type='text/javascript'>
        function mOver(src)
        {
            getUl(src).style.display = "block";
        }
        function mLost(src)
        {
            getUl(src).style.display = "none";
        }
        function getUl(src)
        {
            for (var i = 0; i < src.childNodes.length; i++)
            {
                if (src.childNodes.item(i).nodeType == 1) return src.childNodes.item(i);
            }
        }
        
    </script>

</head>
<body>
    <ul>
        <li class="menuitem" onmouseover="mOver(this);" onmouseout="mLost(this);">Автомобили
            <ul class="submenu">
                <li class="submenuitem"><a href="">-хетчбеки</a></li>
                <li class="submenuitem"><a href="">-татчбеки</a></li>
                <li class="submenuitem"><a href="">-полиприводные</a></li>
                <li class="submenuitem"><a href="">-кабриолеты</a></li>
            </ul>
        </li>
        <li class="menuitem" onmouseover="mOver(this);" onmouseout="mLost(this);">Катеры
            <ul class="submenu">
                <li class="submenuitem"><a href="">-двуместные</a></li>
                <li class="submenuitem"><a href="">-четырёхместные</a></li>
                <li class="submenuitem"><a href="">-восьмиместные</a></li>
                <li class="submenuitem"><a href="">-шестнадцатиместные</a></li>
            </ul>
        </li>
        <li class="menuitem" onmouseover="mOver(this);" onmouseout="mLost(this);">Мотоциклы
            <ul class="submenu">
                <li class="submenuitem"><a href="">-с колёсами</a></li>
                <li class="submenuitem"><a href="">-без колёс</a></li>
                <li class="submenuitem"><a href="">-с рулём</a></li>
                <li class="submenuitem"><a href="">-без руля</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

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

Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile

begin

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

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

Загрузка ...

Опытный

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

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

diadiavova, благодарю за код, но:
1. у меня ведь уже все на дивах - можно ли для моей ситуации пример?
2. по onmouseout мне уже не нужно сворачивать подпункты - я уже понял, что погарячился
3. нужно только по onmouseover разворачиать подпункты данного раздела, а подпункты остальных разделов наоборот - свернуть.

Сейчас у меня заковыка только со сворачиванием остальных разделов.

diadiavova

Дата 29.7.2009, 20:39 (ссылка)

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

Загрузка ...

Доктор Зло(диагност, настоящий, с лицензией и полномочиями)

Профиль
Группа: Модератор
Сообщений: 5821
Регистрация: 14.8.2008
Где: В Коньфпольте

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

Цитата(begin @ 29.7.2009, 21:31

)

у меня ведь уже все на дивах - можно ли для моей ситуации пример?

Надо во вложенных списках просто имена тегов поменять, там ничего специфичного для списков не используется и будет работать хоть для дивов, хоть для чего(хотя, имхо, так лучше).

Цитата(begin @ 29.7.2009, 21:31

)

Сейчас у меня заковыка только со сворачиванием остальных разделов.

Можно просто назначить им атрибут name и получить все дивы с этим именем при помощи getElementsByName. Обойти весь список и свернуть, а после этого развернуть то, что надо.

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

Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile

diadiavova

Дата 29.7.2009, 21:01 (ссылка)

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

Загрузка ...

Доктор Зло(диагност, настоящий, с лицензией и полномочиями)

Профиль
Группа: Модератор
Сообщений: 5821
Регистрация: 14.8.2008
Где: В Коньфпольте

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

Что-то в этом роде

Код


<html>
<head>
    <title>Menu</title>
    <style type='text/css'>
        .submenu
        {
            display: none;
            margin-left:20px;
        }
        .menuitem
        {
            cursor: pointer;
        }
        .submenuitem
        {
            list-style-type: none;
        }
    </style>

    <script type='text/javascript'>
        function mOver(src)
        {
            var si=document.getElementsByName("submenu");
            for (var i = 0; i < si.length; i++)
            {
                si[i].style.display = "none";
            }
            getUl(src).style.display = "block";
        }
        function mLost(src)
        {
            //getUl(src).style.display = "none";
        }
        function getUl(src)
        {
            for (var i = 0; i < src.childNodes.length; i++)
            {
                if (src.childNodes.item(i).nodeType == 1) return src.childNodes.item(i);
            }
        }
        
    </script>

</head>
<body>
    <div style="width:200px;border:1px;border-style:solid;border-color:Black;">
        <div class="menuitem" onmouseover="mOver(this);" onmouseout="mLost(this);">Автомобили
            <div class="submenu" name="submenu">
                <div class="submenuitem"><a href="">-хетчбеки</a></div>
                <div class="submenuitem"><a href="">-татчбеки</a></div>
                <div class="submenuitem"><a href="">-полиприводные</a></div>
                <div class="submenuitem"><a href="">-кабриолеты</a></div>
            </div>
        </div>
        <div class="menuitem" onmouseover="mOver(this);" onmouseout="mLost(this);">Катеры
            <div class="submenu" name="submenu">
                <div class="submenuitem"><a href="">-двуместные</a></div>
                <div class="submenuitem"><a href="">-четырёхместные</a></div>
                <div class="submenuitem"><a href="">-восьмиместные</a></div>
                <div class="submenuitem"><a href="">-шестнадцатиместные</a></div>
            </div>
        </div>
        <div class="menuitem" onmouseover="mOver(this);" onmouseout="mLost(this);">Мотоциклы
            <div class="submenu" name="submenu">
                <div class="submenuitem"><a href="">-с колёсами</a></div>
                <div class="submenuitem"><a href="">-без колёс</a></div>
                <div class="submenuitem"><a href="">-с рулём</a></div>
                <div class="submenuitem"><a href="">-без руля</a></div>
            </div>
        </div>
    </div>
</body>
</html>

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

Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile

begin

Дата 29.7.2009, 22:13 (ссылка)

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

Загрузка ...

Опытный

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

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

О, это уже теплее

Код


function mOver(src)
        {
            var si=document.getElementsByName("submenu");
            for (var i = 0; i < si.length; i++)
            {
                si[i].style.display = "none";
            }
            getUl(src).style.display = "block";
        }

А как доработать эту функцию, если у меня у всех свернутых/развернутых дивов, разные имена типа: meny1_2, menu2_2....menu4_2 ?

diadiavova

Дата 29.7.2009, 23:01 (ссылка)

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

Загрузка ...

Доктор Зло(диагност, настоящий, с лицензией и полномочиями)

Профиль
Группа: Модератор
Сообщений: 5821
Регистрация: 14.8.2008
Где: В Коньфпольте

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

Прилепи туда какой-нибудь собственный атрибут и ищи понему

<div hiddenmenu="1">
Обрабатывать это можно так

Код


function mOver(src)
        {
            var si=document.getElementsByTagName("div");
            for (var i = 0; i < si.length; i++)
            {
                if(si[i].getAttribute("hiddenmenu")=="1")
                    si[i].style.display = "none";
            }
            getUl(src).style.display = "block";
        }

Что-то в этом роде, я сам не проверял, но думаю, идея понятна.
Хотя честно говоря, мне это не очень нравится, предыдущие варианты были лучше.

Это сообщение отредактировал(а) diadiavova - 29.7.2009, 23:03

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

Хочешь получить мудрый совет - читай подписи участников форумов.
Злой доктор Щасзаболит smile

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