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

@**падаван** · 19.02.2011, 12:42

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

Оффтоп:

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

@Gri3li · 19.02.2011, 13:00

Пс будут видеть, это же обычный хтмл.

Насчет js скриптов правда, их можно как css подключать. Обфчно в хедере подключают но можно и в боди.

Вставка js скрипта в страничку:

Код:

  <script type="text/javascript" src="script.js"></script>

@**падаван** · 19.02.2011, 14:03

здОрово, спасибо большое Gri3li

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

@Gri3li · 22.02.2011, 05:34

Это долго разбираться… Но легко можно сделать чтобы при открытии нового меню старое не закрывалось, тоже может пригодится. Для этого нужно удалить этот код:

Код:

    if (CURRENT_TARGET && CURRENT_TARGET != target) { 
        CURRENT_TARGET.display = 'none'; 
    };

@**x997** · 22.02.2011, 10:13

Оффтоп:

@**падаван** · 22.09.2011, 12:46

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

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

@**падаван** · 26.09.2011, 16:26

Цитата:

Сообщение от падаван

если в браузере скрипты отключены, меню не открывается

решение: в строках с id подменю изменить значение на "display: block;"
[php]<ul class="sub_menu" id="sub_menu1" style="display: block;">[/php]
и добавить минискрипт после кода html-меню, который и будет прятать его при включенных скриптах, т.к. для его выполнения необходимо, что бы элементы меню уже загрузились
[php]<script>
document.getElementById('sub_menu1').style.display = 'none';
document.getElementById('sub_menu2').style.display = 'none';
</script>[/php]

может быть кому то тоже пригодиться..

19.02.2011, 12:42	#1
@падаван Друзья SEO cafe Сообщений: 814 FR (активность): 25,662 Отзывы: 236 Доп. информация Регистрация: 17.10.2010	"Выдвигающееся" меню со скриптом Взгляните, пожалуйста, на такой вариант меню: Оффтоп: [PHP] <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 = 4factor; //в середине элемента скорость прироста высоты быстрее } else { var growth = 2factor; // чем в начале и конце элемента } 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> [/PHP] и очень интересно узнать, будет ли пс видеть ссылки в таком исполнении? и где лучше разместить скрипт, чтобы не загромождать код странички? где то читал, что скрипты можно и нужно размещать в отдельном файле, который, можно подключить ссылкой, также как css..это правда?) или я что то не так понял..и если его нужно размещать только в самом коде, то в контейнере вместе с меню или это не играет роли?.. ученик SeoCafe

19.02.2011, 13:00	#2
@Gri3li Сообщений: 40 FR (активность): 685 Отзывы: 64 Доп. информация Регистрация: 16.02.2011 Специализация: Разработка сайтов Адрес: Краснодар	Re: "Выдвигающееся" меню со скриптом Пс будут видеть, это же обычный хтмл. Насчет js скриптов правда, их можно как css подключать. Обфчно в хедере подключают но можно и в боди. Вставка js скрипта в страничку: Код: <script type="text/javascript" src="script.js"></script>

19.02.2011, 14:03	#3
@падаван Друзья SEO cafe Сообщений: 814 FR (активность): 25,662 Отзывы: 236 Доп. информация Регистрация: 17.10.2010	Re: "Выдвигающееся" меню со скриптом здОрово, спасибо большое Gri3li p.s если вдруг не сложно, и в скрипте долго не надо разбираться, подскажите пожалуйста, как сделать, чтобы при нажатии на второй пункт меню, уже развернутый первый закрывался не мгновенно, а также плавно, как и открывается ?.. ученик SeoCafe

22.02.2011, 05:34	#4
@Gri3li Сообщений: 40 FR (активность): 685 Отзывы: 64 Доп. информация Регистрация: 16.02.2011 Специализация: Разработка сайтов Адрес: Краснодар	Re: "Выдвигающееся" меню со скриптом Это долго разбираться… Но легко можно сделать чтобы при открытии нового меню старое не закрывалось, тоже может пригодится. Для этого нужно удалить этот код: Код: if (CURRENT_TARGET && CURRENT_TARGET != target) { CURRENT_TARGET.display = 'none'; };

22.02.2011, 10:13	#5
@x997 Друзья SEO cafe Сообщений: 2,205 FR (активность): 72,650 Отзывы: 1021 Доп. информация Регистрация: 24.06.2009 Специализация: SEO услуги Адрес: Минск	Re: "Выдвигающееся" меню со скриптом Оффтоп: блин, первый раз прочитал название топика как "выдвигающееся меню со скрипом" ... жэсть ... Говорят,что я такое же быдло как и все!!! ха ... Господа хорошие,для системы ценностей большенства людей , Я ЗНАЧИТЕЛЬНО ХУЖЕ!!! внимание! существенная часть того что я пишу, может оказаться сарказмом!

22.09.2011, 12:46	#6
@падаван Друзья SEO cafe Сообщений: 814 FR (активность): 25,662 Отзывы: 236 Доп. информация Регистрация: 17.10.2010	Re: "Выдвигающееся" меню со скриптом замечательный скрипт меню снова пошел в дело) но только сейчас дошло, что если в браузере скрипты отключены, меню не открывается...)) почему то я думал, что в таком случае, оно наоборот, будет сразу развернуто.. но возможно ли вообще так сделать, чтобы при отключенной джаве меню было открыто? может быть подправив этот скрипт или каким нибудь другим путем?... ученик SeoCafe

Сообщение форума

Отменить изменения

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра	Оценка этой теме
Линейный вид Комбинированный вид Древовидный вид	Оценка этой теме:

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
RDS - Узнай историю изменения "тИЦ" и "Индекса Яндекса" любого сайта!	RDS bar	Софт оптимизатора, SEO утилиты	9	05.03.2012 10:18
Валидный, кроссбраузерный способ создания "резинового" горизонтального меню сайта	Recover	Дизайн и верстка	11	03.05.2011 15:18
Краткий обзор "SEO конференция "Продвижение сайтов. Революция""	specialist-seo	Яndex	8	06.12.2010 23:56
Выпадающее "резиновое" меню средствами css	Recover	Дизайн и верстка	0	07.11.2010 16:16