Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Выдвигающиеся меню


Автор: SDEVIL 30.7.2007, 22:48
Вообщем необходимо меню которое бы медленно выдвигалось когда появляется и потом так же медленно убиралось когда ненужно. Может кто подскажет?

Автор: SDEVIL 31.7.2007, 11:00
Пример такого меню:http://spb.tele2.ru/517/Article.aspx

Автор: MisterCleric 31.7.2007, 14:00
И не надо говорить "необходимо", "надо"... Можно нарваться на неприятности от модераторов. 
Напиши что-нибудь, покажи, что ты умеешь программировать. А что не выйдет подскажем.
А если уж пишешь "необходимо меню" так и сумму указывай - за безплатно никто писать не будет

Автор: SDEVIL 31.7.2007, 16:14
Цитата(MisterCleric @ 31.7.2007,  14:00)
И не надо говорить "необходимо", "надо"... Можно нарваться на неприятности от модераторов. 
Напиши что-нибудь, покажи, что ты умеешь программировать. А что не выйдет подскажем.
А если уж пишешь "необходимо меню" так и сумму указывай - за безплатно никто писать не будет

Спасибо за совет! я написал скрипт к менюшке которая постепенно исчезает, но хочу ее переделать чтобы получилось как я писал выше ссылку...

вот код моей менюшки: 

Код

<!--
var hint_prefix = "hint_";
var hint_mapping
var hint_transparency
var Timer
var timer_start = 0;
var timer_end = 30;
var transparency_unit = 2;
var flag_use = 0;

hint_alpha = new Array(3);
hint_alpha['IE'] = 100;
hint_alpha['NS'] = 1;
hint_alpha['OP'] = 1;

function help(hint_id, condition, flag_use){
    switch(condition){
        case 1:
            if(Timer != undefined){
                window.clearTimeout(Timer);
            }
            for(var i = 0; i < hint_name.length; i ++){
                document.getElementById(hint_name[i]).style.display = "none"; 
            }
            switch(navigator.appName){
                case "Microsoft Internet Explorer":
                    document.getElementById(hint_id).style.filter = "alpha(opacity=" + hint_alpha['IE'] + ")";
                    break;
                case "Netscape":
                    document.getElementById(hint_id).style.opacity = hint_alpha['NS'];
                    break;
                case "Opera":
                    document.getElementById(hint_id).style.opacity = hint_alpha['OP'];
                    break;
            }
            document.getElementById(hint_id).style.display = "block";
            break;
        case 0:
            hint_mapping = timer_start;
            switch(navigator.appName){
                case "Microsoft Internet Explorer":
                    hint_transparency = hint_alpha['IE'];
                    break;
                case "Netscape":
                    hint_transparency = hint_alpha['NS'];
                    break;
                case "Opera":
                    hint_transparency = hint_alpha['OP'];
                    break;
            }
            help(hint_id, -1, 0);
            break;
        case -1:
            if(hint_mapping == timer_start || hint_mapping < timer_end){ 
                if(flag_use == 0){
                    hint_mapping ++;
                    switch(navigator.appName){
                        case "Microsoft Internet Explorer":
                            hint_transparency -= transparency_unit;
                            document.getElementById(hint_id).style.filter = "alpha(opacity=" + hint_transparency + ")";
                            break;
                        case "Netscape":
                            hint_transparency -= transparency_unit / 100;
                            document.getElementById(hint_id).style.opacity = hint_transparency;
                            break;
                        case "Opera":
                            hint_transparency -= transparency_unit / 100;
                            document.getElementById(hint_id).style.opacity = hint_transparency;
                            break;
                    }
                    Timer = setTimeout("help('" + hint_id + "', -1, 0)", 100);
                }else{
                    switch(navigator.appName){
                        case "Microsoft Internet Explorer":
                            document.getElementById(hint_id).style.filter = "alpha(opacity=" + hint_alpha['IE'] + ")";
                            break;
                        case "Netscape":
                            document.getElementById(hint_id).style.opacity = hint_alpha['NS'];
                            break;
                        case "Opera":
                            document.getElementById(hint_id).style.opacity = hint_alpha['OP'];
                            break;
                    }
                    window.clearTimeout(Timer);
                }
            }else{
                document.getElementById(hint_id).style.display = "none";
                window.clearTimeout(Timer);
            }
            break;
        default:
            for(var i = 0; i < hint_name.length; i ++){
                document.getElementById(hint_name[i]).style.display = "none"; 
            }
            break;
    }
}
//-->


при наведении на ссылку:
Код

onMouseOver="help('sub_company', 1, 0);"


Код

onMouseOut="help('sub_company', 0, 0);"


при наведении на меню:
Код

onMouseOver="help('sub_company', -1, 1);"


Код

onMouseOut="help('sub_company', 0, 0);"

Автор: dXdYdZ 1.8.2007, 03:16
Сейчас я пишу свою JavaScript - библиотеку компонентов. Эффекты уже написал. Написал и меню.  Скоро думаю выложить ссылку на этом форуме. С использованием готовых эффектов то, что вы описали Выше, совсем не сложно. 
А вообще для создания такого меню надо просто плавно менять высоту элемента (предварительно указав overflow). Делать это надо в функции, запускаемой через определённый промежуток времени (setInterval). После уменьшения высоты до минимума ставим style.display="none".

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)