Вернуться   SEO форум - оптимизация и продвижение сайтов > Web разработки > Дизайн и верстка

Важная информация
Дизайн и верстка - Верстка: блочная, div, HTML... Дизайн, внешний вид сайта.

Ответ
 
Опции темы Оценить тему Опции просмотра
Старый 19.02.2011, 12:42   #1
 
Аватар для падаван
 
Сообщений: 814
FR (активность): 25,662

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

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

[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 = 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>
[/PHP]

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


ученик SeoCafe
падаван вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 19.02.2011, 13:00   #2
 
Аватар для Gri3li
 
Сообщений: 40
FR (активность): 685

Доп. информация
По умолчанию Re: "Выдвигающееся" меню со скриптом

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

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

Вставка js скрипта в страничку:
Код:
  <script type="text/javascript" src="script.js"></script>
Gri3li вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
падаван (19.02.2011)
Старый 19.02.2011, 14:03   #3
 
Аватар для падаван
 
Сообщений: 814
FR (активность): 25,662

Доп. информация
По умолчанию Автор темы Re: "Выдвигающееся" меню со скриптом

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

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


ученик SeoCafe
падаван вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 22.02.2011, 05:34   #4
 
Аватар для Gri3li
 
Сообщений: 40
FR (активность): 685

Доп. информация
По умолчанию Re: "Выдвигающееся" меню со скриптом

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

Код:
    if (CURRENT_TARGET && CURRENT_TARGET != target) { 
        CURRENT_TARGET.display = 'none'; 
    };
Gri3li вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
падаван (22.02.2011)
Старый 22.02.2011, 10:13   #5
 
Аватар для x997
 
Сообщений: 2,205
FR (активность): 72,650

Доп. информация
По умолчанию Re: "Выдвигающееся" меню со скриптом

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


Говорят,что я такое же быдло как и все!!! ха ... Господа хорошие,для системы ценностей большенства людей , Я ЗНАЧИТЕЛЬНО ХУЖЕ!!!
внимание! существенная часть того что я пишу, может оказаться сарказмом!
x997 вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 22.09.2011, 12:46   #6
 
Аватар для падаван
 
Сообщений: 814
FR (активность): 25,662

Доп. информация
По умолчанию Автор темы Re: "Выдвигающееся" меню со скриптом

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


ученик SeoCafe
падаван вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Старый 26.09.2011, 16:26   #7
 
Аватар для падаван
 
Сообщений: 814
FR (активность): 25,662

Доп. информация
По умолчанию Автор темы Re: "Выдвигающееся" меню со скриптом

Цитата:
Сообщение от падаван Посмотреть сообщение
если в браузере скрипты отключены, меню не открывается
решение: в строках с 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]

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


ученик SeoCafe
падаван вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
"Спасибо" от:
emlonlife (26.09.2011)
Ответ

Метки
html, script

Быстрый ответ
Ваше имя пользователя: Регистрация. Для входа нажмите здесь
Случайный вопрос

Сообщение:
Опции
Внимание!
Этой теме более 3932 дней. Вы можете оставить сообщение здесь. Но, обращаем внимание. Возможно, рациональней создать новую тему (найти свежее обсуждение)?


Опции темы
Опции просмотра Оценка этой теме
Оценка этой теме:

Ваши права в разделе
Вы не можете создавать новые темы
Вы можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
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

Текущее время: 20:59. Часовой пояс GMT +3.