Форум Сайтостроение Веб-строительство

Скрипт "выдвигающегося" меню

падаван
На сайте с 05.07.2011
Offline
42
падаван
1920

Доброго времени суток

Взгляните пожалуйста, меню со скриптом: 

<body> 



<style> 

.menu_item 

{ 

    margin: 5px 0px 0px 15px; 

    padding: 6px 0px 0px 0px; 

    cursor:pointer; 

    text-align: center; 

    font-size: 17px; 

    width:186px; 

    height:29px; 

    font-family:"Trebuchet MS"; 

    background: #fff url('img/lmenu_bg1.gif') no-repeat; 

} 

.sub_menu 

{ 

    margin:2px; 

    width: 186px; 

    position:relative; 

    overflow: hidden; 

} 

</style> 



<script> 



var $expandMaxHeight = 0; 

var $expandInterval; 



var GROW = 1; 

var SHRINK = -1; 





function smoothChange(object, factor) { 

    var k = Math.abs((1 - object.offsetHeight/$expandMaxHeight) - object.offsetHeight/$expandMaxHeight); 



    if (k<0.4) { 

        var growth = 4*factor; //в середине элемента скорость прироста высоты быстрее 

    } else { 

        var growth = 2*factor; // чем в начале и конце элемента 

    } 



    if ( 

        ( (factor == GROW) && ((object.offsetHeight + growth) > $expandMaxHeight) ) || 

        ( (factor == SHRINK) && ((object.offsetHeight + growth) < 0) ) 

        ) 

    { 

        growth = factor>0 ? ($expandMaxHeight - object.offsetHeight) : 0; 

        clearInterval($expandInterval); 

        $expandInterval = null; 

    } 



    object.style.height = object.offsetHeight + growth + 'px'; 

    if (factor == SHRINK && !$expandInterval) { 

        object.style.height = $expandMaxHeight + 'px'; 

        object.style.display = 'none'; 

    } 

} 



function smoothShowVertical(object) { 

    if ($expandInterval) 

        return false; 



    object.style.height = '0px'; 

    $expandInterval = setInterval(function(object) { return function () { smoothChange(object, GROW) } }(object), 20); 

} 



function smoothHideVertical(object) { 

    if ($expandInterval) 

        return false; 



    $expandInterval = setInterval(function(object) { return function () { smoothChange(object, SHRINK) } }(object), 20); 

} 



var CURRENT_TARGET; 

function show(aID) { 

    if ($expandInterval) 

        return false; 



    var target = document.getElementById(aID).style; 

    var value = target.display == 'block' ? 'none' : 'block'; 



    if (CURRENT_TARGET && CURRENT_TARGET != target) { 

        CURRENT_TARGET.display = 'none'; 

    }; 



    if (target.display == 'none') { 

        CURRENT_TARGET = target; 

        target.display = 'block'; 



        //--- 

        object = document.getElementById(aID); 

        $expandMaxHeight = object.offsetHeight; 

        object.style.height = '0px'; 



        smoothShowVertical(document.getElementById(aID)); 

        //--- 

    } else { 

        $expandMaxHeight = object.offsetHeight; 

        smoothHideVertical(document.getElementById(aID)); 

        //target.display = 'none'; 

    } 





}; 

</script> 



<div class="menu_item" onclick="show('sub_menu1')">Пункт меню</div> 

    <ul class="sub_menu" id="sub_menu1" style="display: none;"> 

        <li><a href="#">Главная</a></li> 

        <li><a href="#">Контакты</a></li> 

        <li><a href="#">Главная</a></li> 

    </ul> 



<div class="menu_item" onclick="show('sub_menu2')">Пункт меню</div> 

    <ul class="sub_menu" id="sub_menu2" style="display: none;"> 

        <li><a href="#">Главная</a></li> 

        <li><a href="#">Главная</a></li> 

    </ul> 



</body>

неприятность в том, что если java в браузере отключен, то меню конечно не открывается, и отображаются только основные пункты. но хотелось бы сделать так, чтобы при отключенных скриптах, оно сразу отображалось развернутым и все подпункты были бы видны. подскажите пожалуйста, кто знает, возможно ли такое организовать?(хотя бы теоретически)...

gormarket
На сайте с 29.12.2010
Offline
47
gormarket
#1

Задайте изначально для "sub_menu" style="display: block;"

тогда они будут видны если не работает скрипт.

А чтобы их спрятать (если скрипт работает), добавьте их скрытие скриптом при загрузке

т.е. добавьте перед </body>

<script>

document.getElementById('sub_menu1').style.display = 'none';

document.getElementById('sub_menu2').style.display = 'none';

</script>

Товары и цены в магазинах Вашего города: Городской рынок (http://gormarket.ru/)
Google AdSense улучшил адаптивные Скрипты Google AdWords MCC В скрипты AdWords добавили
SI
На сайте с 03.12.2007
Offline
130
Sigmo#ID
#2

http://www.championat.com/football/_russiapl.html

Посмотрите с отключёнными скриптами на черно-красное меню:

[ Футбол Хоккей Теннис ... ]

-= Онлайн сервисы =-
падаван
На сайте с 05.07.2011
Offline
42
падаван
#3

Sigmo#ID, спасибо, но по тому примеру еще нужно дорабатывать свое..

gormarket, а ваше решение замечательно подходит, спасибо большое, получилось! но еще один небольшой нюанс, можно ли добавить строки 

document.getElementById('sub_menu1').style.display = 'none';

document.getElementById('sub_menu2').style.display = 'none';

к уже имеющемуся скрипту, то есть чтобы не добавлять в html код странички строки скрипта, т.к. он у меня подключен отдельным файлом, не подскажете, как это правильно сделать?

Не работют скрипты в Как к html файлам Экспорт в MySQL строк
gormarket
На сайте с 29.12.2010
Offline
47
gormarket
#4

Нужно чтобы к моменту выполнения этих строк скрипта уже был загружен html-код элементов, к которым применяется этот код.

Поэтому в приведенном Вами примере я вставил код отдельным скриптом (после html-кода меню)

падаван
На сайте с 05.07.2011
Offline
42
падаван
#5
gormarket:
Нужно чтобы к моменту выполнения этих строк скрипта уже был загружен html-код элементов, к которым применяется этот код.
Поэтому в приведенном Вами примере я вставил код отдельным скриптом (после html-кода меню)

а, вот как, выходит в любом случае придется подключать еще один файл .js или дописывать эти строки после меню, хорошо, приемлемый вариант, еще раз спасибо! но если вдруг у кого нибудь появятся еще решения, поделитесь, пожалуйста..

В Яндекс.Диске появилась возможность Google советует использовать один WhatsApp обновил функционал опросов

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий