VPF::Раздвигающиеся меню как у Apple. - Форум программистов

Elfet

Дата 25.1.2008, 18:40 (ссылка)

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

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

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

Вот тут http://www.apple.com/ru/support/ - есть классное меню "решения", при наведении мышкой меню раздвигается. Как сделать такое же меню?

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

PHP Чат Скрипт

ksnk

Дата 25.1.2008, 18:48 (ссылка)

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

Загрузка ...

прохожий

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

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

Посмотреть как сделано...
Поискать в гугле по словам prototype, scriptaculous, accordion, menu

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Elfet

Дата 25.1.2008, 18:51 (ссылка)

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

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

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

Пробовал я уже разобраться как это у них устроено - бесполезно smile

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

PHP Чат Скрипт

ksnk

Дата 25.1.2008, 18:59 (ссылка)

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

Загрузка ...

прохожий

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

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

Тогда попробуй вот здесь. Это почти оно-же, только на jQuery

Это сообщение отредактировал(а) ksnk - 25.1.2008, 18:59

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Sardar

Дата 25.1.2008, 19:06 (ссылка)

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

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

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

Можно создать общий div (position:relative; overflow: hidden), он будет координатным якорем и заодно clip эффект реализует. Внутрь кладём div'ы на абсолютных позициях, будут менюшками, выставляем им правильный z-index: <num>, что бы друг на дружке были. Двигаем любой анимацией, тем же script.aculo.us.

По моему можно абсолютные слои вложить друг в дружку, тогда достаточно будет сдвинуть самый внешний таб, все дочерние пойдут наверх сами, проверь.

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

Опыт - сын ошибок трудных © А. С. Пушкин
Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
Оценить мои качества можно тут.

Elfet

Дата 25.1.2008, 20:21 (ссылка)

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

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

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

А как сделать что бы они вверх отползали? Там они не просто вниз уходят, но ещё и вверх.

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

PHP Чат Скрипт

Sardar

Дата 25.1.2008, 20:55 (ссылка)

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

Загрузка ...

Бегун

Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

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

А чем отличается движение в верх от того же вниз? вместо style.top -= delta пишем style.top += delta или я не понял вопроса?

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

Elfet

Дата 26.1.2008, 12:34 (ссылка)

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

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

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

Там они в одном случае опускается див, а в другом случае поднимаеться. Так вот как определить какой поднимается, а какой опускается?

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

PHP Чат Скрипт

ksnk

Дата 26.1.2008, 12:59 (ссылка)

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

Загрузка ...

прохожий

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

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

Цитата(Elfet @ 25.1.2008, 18:40

)

Как сделать такое же меню?

Весь это тред имеет смысл, если вопрос вучит не как сделать, а как сделать ВСЕ САМОМУ... Я прав? ;-)

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Elfet

Дата 26.1.2008, 18:04 (ссылка)

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

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

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

ksnk, да если есть уже готовое такое меню, я бы им воспользовался. Но похоже его нету, и придеться самому делать smile

Я всё примерно представляю как это делается, немного помучившись можно сделать такое же меню, но это будет очень громоздко и не "масштабируемо" smile

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

PHP Чат Скрипт

ksnk

Дата 26.1.2008, 18:38 (ссылка)

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

Загрузка ...

прохожий

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

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

Цитата(Elfet @ 26.1.2008, 18:04

)

есть уже готовое такое меню

Не громоздко (во всяком случае - с твоей стороны ;) ) и масштабируемо можно написать, воспользовавшись готовыми accordion'ами от jQuery или scriptaculos. по моей ссылке вверху можно посмотреть демку... Второй пример сверху...

Самому писать с нуля - придется "помучится", хотя результат будет значительно меньше по объему...

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Elfet

Дата 27.1.2008, 12:38 (ссылка)

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

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

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

Не люблю я всякие jQuery smile

Добавлено через 1 минуту и 34 секунды
Какой вобще принцип действия у такого меню?

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

PHP Чат Скрипт

ksnk

Дата 27.1.2008, 13:59 (ссылка)

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

Загрузка ...

прохожий

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

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

Ну что-ж... принципы...
В HTML разметке вставляем чего-то наподобии такого.

Код


<div>
    <ul id="navigation">
        <li>
            <a class="head" href="?p=1.1.1">Guitar</a>
            <ul>
                <li><a href="?p=1.1.1.1">Electric</a></li>
                <li><a href="?p=1.1.1.2">Acoustic</a></li>
                <li><a href="?p=1.1.1.3">Amps</a></li>
                <li><a href="?p=1.1.1.4.1">Effects A</a></li>
                <li><a href="?p=1.1.1.4.2">Effects B</a></li>
                <li><a href="?p=1.1.1.4.3">Effects C</a></li>
                <li><a href="?p=1.1.1.4.4">Effects D</a></li>
                <li><a href="?p=1.1.1.5">Accessories</a></li>
            </ul> 
        </li>
        <li>
            <a class="head" href="?p=1.1.2">Bass</a>
            <ul>
                <li><a href="?p=1.1.2.1">Electric</a></li>
                <li><a href="?p=1.1.2.2">Acoustic</a></li>
                <li><a href="?p=1.1.2.3">Amps</a></li>
                <li><a href="?p=1.1.2.4">Effects</a></li>
                <li><a href="?p=1.1.2.5">Accessories</a></li>
            </ul> 
        </li>
        <li>
            <a class="head" href="?p=1.1.3">Drums</a>
            <ul>
                <li><a href="?p=1.1.3.2">Acoustic Drums</a></li>
                <li><a href="?p=1.1.3.3">Electronic Drums</a></li>
                <li><a href="?p=1.1.3.4">Cymbals</a></li>
                <li><a href="?p=1.1.3.5">Hardware</a></li>
                <li><a href="?p=1.1.3.6">Accessories</a></li>
            </ul> 
        </li>
    </ul>
</div>

Вариантов оформления меню в HTML может быть дофига, но определенность какая-то должна быть...
И пытаемся сделать так, чтобы ul#navigation оказался нашим меню, все #navigation li a.head - заголовками разделов этого меню, а все #navigation ul li - строчками нашего меню.
Сначала неплохо бы скроить css так, чтобы все заголовки меню показывались, а строчки - нет. Так можно немного сэкономить на кодинге smile

Хотя, достаточно здраво будет скрывать строки меню уже JavaScript'ом, чтобы юзеры с отключенным JS все-таки до него могли добраться.
После чего на все a.head нужно навесить какой-то обработчик каких-то событий.
В нашем случае - событие mouseover .
По этому событию необходимо найти "нижележащий" UL и в зависимости от того, скрыт он или нет закрыть "раскрытое" сейчас меню и показать это. Показывать или скрывать нужно медленно и печально, для чего нужно пользоваться специальным методом, принципы которого пытался показать Sardar, несколькими сообщениями выше.
Итого

необходим какой-то eventmanager, который позволяет относительно безболезненно ставить обработчики событий на элемент
функция animation, которая элемент либо медленно раздвигает до его натуральных размеров, либо сдвигает до нуля. Она тоже, вроде в форуме мелькала
необходим способ "пробега" по DOM'у с поиском характерных элементов, что тоже где-то тут неоднократно мелькал...

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Elfet

Дата 27.1.2008, 22:03 (ссылка)

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

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

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

Ок, спасибо. буду делать smile

Если бы дал ссылки на лучшие примеры eventmanager'а и "способа "пробега" по DOM'у с поиском характерных элементов" было бы очень классно! smile

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

PHP Чат Скрипт

ksnk

Дата 28.1.2008, 02:59 (ссылка)

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

Загрузка ...

прохожий

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

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

Ну, так и знал, что все придется делать самому smile

Попытался наискать собственных писем с нужными кусочками кода и подумал, что сделать проще, чем найти и объяснить что как и куда...
CSS тут совсем уж минимально обработан напильником после утаскивания из примера, да HTML разметка несколько оличается от той, что выше...

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Simple menu</title>

<style>

ul.Menu { margin: 0; padding: 0; list-style-type: none; }
ul.Menu li { margin: 0; margin-bottom: 2px; padding: 0;}
ul.Menu li a.head { display: block; padding-left: 5px; margin-right: 3px; 
    height: 28px; background: white; color: #000; text-decoration: none; line-height: 28px; }

ul.Menu div{ overflow:hidden;} /* контейнер оказался необходим :-( */

ul.Menu ul{ display: block; margin-left: 30px; padding: 0; list-style-type: none; }
</style>

<script type="text/javascript">

// бег по DOM'у
function scanDomTree(e,callback,lvl){
    var o= e,
        stack=[null]
    do {
        if(!o) {
            o=stack.pop(); continue  // go up
        }
        if(callback.call(this,o))
            return o;
        if (o.firstChild) {
            stack.push(o.nextSibling);
            o=o.firstChild; // go deep
        } else
            o=o.nextSibling
    } while(stack.length)
    return null;
}

// переменная для проверки - делаем или нет какую анимацию...
var animation_going=0;
// медленно и печально... в течении секунды...
function animate(e,_from,_to,callback){
    animation_going++;
    var i = 20, // <<< вот тут - частота смены кадров.
        disp=(_from-_to)/i,interval=
    setInterval(function(){
        try{
            e.style.height=(_from-=disp)+'px';
        } catch(ee){;}
        if(!i--) {
            animation_going--;
            clearInterval(interval);
            callback()
        }
    },1000/i) // <<< вот тут она - секунда
}

// вот это - event handler
// хранилище событий для последующей чистки. Чистка нужна для IE :-(
var handlers=[]
// установка события
function add_event(a,e,o){
    if (a.addEventListener)
        a.addEventListener(e,o,false)
    else if (a.attachEvent) {
        try {
            a.attachEvent( e='on'+e, o);
        } catch (aEx) {}
    }
    handlers.push({a:a,e:e,o:o});
}
function clear_event(a,e,o) {
    if (a.removeEventListener) {
        a.removeEventListener(e, o, false);
    } else {
        try {
            a.detachEvent( /*'on'   */ e, o);
        } catch (aEx) {}
    }
}
// это то, ради чего огород с event manager'ом городили - чистка хвостов...
add_event(window,'unload',function(){
    for(var i in handlers){
        var h=handlers[i];
        clear_event(h.a,h.e,h.o);
    }
})

// а тут, собствено, жужжим ....
add_event(window,'load',function(){
    scanDomTree(document,function(e){
        // для всех элементов с классом Menu
        if(e && e.className && e.className=='Menu' ){
            var header=null;
            var menu={}; // элемент для хранения кое-какой информации
            scanDomTree(e,function(ee){
                if (ee.className && ee.className=='head') {
                    // нашли заголовок
                    header=ee; // сохраним его для истории
                } else if ( (e!=ee) && ee.tagName && ee.tagName.toUpperCase()=='DIV'){
                    // нашли UL 
                    add_event(header,'mouseover',(function(el){
                        // магия... немного дикая, но симпатичная
                        return function (){
                            if(animation_going) return;
                            // поехали
                            if(el.style.display=='none'){
                                // скрываем открытое
                                if (menu.current) {
                                    var he=menu.current;
                                    animate(he,he.getElementsByTagName("ul")[0].offsetHeight,0,
                                        function(){he.style.display='none';
                                    })
                                }
                                el.style.height='0px';
                                el.style.display='';
                                animate(el,0,el.getElementsByTagName("ul")[0].offsetHeight,function(){
                                    el.style.height='auto';
                                    menu.current=el
                                })
                            }
                        }
                    })(ee))
                    // скрываем пока ...
                    ee.style.display='none';
                }
            })
        }
    })

})
</script>
</head><body>
<div>
    <ul class='Menu'>
        <li>
            <a class="head" href="?p=1.1.1">Guitar</a>
            <div>
            <ul>
                <li><a href="?p=1.1.1.1">Electric</a></li>
                <li><a href="?p=1.1.1.2">Acoustic</a></li>
                <li><a href="?p=1.1.1.3">Amps</a></li>
                <li><a href="?p=1.1.1.4.1">Effects A</a></li>
                <li><a href="?p=1.1.1.4.2">Effects B</a></li>
                <li><a href="?p=1.1.1.4.3">Effects C</a></li>
                <li><a href="?p=1.1.1.4.4">Effects D</a></li>
                <li><a href="?p=1.1.1.5">Accessories</a></li>
            </ul>
            </div>
        </li>
        <li>
            <a class="head" href="?p=1.1.2">Bass</a>
            <div>
            <ul>
                <li><a href="?p=1.1.2.1">Electric</a></li>
                <li><a href="?p=1.1.2.2">Acoustic</a></li>
                <li><a href="?p=1.1.2.3">Amps</a></li>
                <li><a href="?p=1.1.2.4">Effects</a></li>
                <li><a href="?p=1.1.2.5">Accessories</a></li>
            </ul> 
            </div>
        </li>
        <li>
            <a class="head" href="?p=1.1.3">Drums</a>
            <div>
            <ul>
                <li><a href="?p=1.1.3.2">Acoustic Drums</a></li>
                <li><a href="?p=1.1.3.3">Electronic Drums</a></li>
                <li><a href="?p=1.1.3.4">Cymbals</a></li>
                <li><a href="?p=1.1.3.5">Hardware</a></li>
                <li><a href="?p=1.1.3.6">Accessories</a></li>
            </ul> 
            </div>
        </li>
    </ul>
</div>
</body>
</html>

То, что тут называется event manager'ом и animation выглядит уж слишком упрощенно, но, однако свою функцию исполняет...

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

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

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