Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В. PHP 5. На примерах. Авторы: Кузнецов М.В., Симдянов И.В., Голышев С.В. PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Развертывающееся меню
 
 автор: Druid   (14.08.2008 в 14:01)   письмо автору
6.6 Кб
 
 

Здравствуйте.

Помогите пожалуйста сделать меню которое разворачивается после того как страничка загрузилась или спустя некоторое время.

Вот код менюшки


<TABLE style="BACKGROUND: url(/img/m_fon.png)  "cellSpacing=0 cellPadding=0 width=217 border=0>
<TR>
<TD style="text-align: center; FONT-SIZE: 12px; BACKGROUND: url(/img/m_1.png); border=0; COLOR: #790000; PADDING-TOP: 5px" vAlign=top  height=31><B>Меню сайта</B></TD></TR>
       
<TR>
<TD style="PADDING-RIGHT: 20px; PADDING-LEFT: 20px; PADDING-BOTTOM: 0px; PADDING-TOP: 5px">
<DIV id=menuDiv style="DISPLAY: inline">
<UL style="PADDING-LEFT: 20px">
<LI>пппппотпо
<LI> ооооо
<LI>ооооо
</UL></DIV>
              
</TD></TR>

<TR>
<TD><IMG src="/img/m_2.png" border=0></TD>
</TR>
</TABLE>

  Ответить  
 
 автор: Druid   (14.08.2008 в 14:02)   письмо автору
9.6 Кб
 
   для: Druid   (14.08.2008 в 14:01)
 

в верхнем прикреплённом файле меню до разворота
а етот после

помогите очень надо

  Ответить  
 
 автор: DDK   (14.08.2008 в 14:49)   письмо автору
 
   для: Druid   (14.08.2008 в 14:02)
 

<body onload="div_slider('menuDiv', 1, 100, 'show')">
<script language="JavaScript">
<!-- 
function div_slider(objid, value_from, value_to, mode)  {
    if (document.getElementById(objid)) {
        var target_object = document.getElementById(objid);
        if(target_object.style.height == value_to) return;
        target_object.style.height = value_from;
    }
    if (mode=='show' && value_from < value_to) {
        value_from += 4;
        setTimeout("div_slider('"+objid+"', "+value_from+", "+value_to+", '"+mode+"')", 20);
    } else if(mode=='hide' && value_from > value_to) {
        value_from -= 4;
        setTimeout("div_slider('"+objid+"', "+value_from+", "+value_to+", '"+mode+"')", 20);
    }

}
//-->
</script>

<TABLE style="BACKGROUND: url(/img/m_fon.png)  "cellSpacing=0 cellPadding=0 width=217 border=0> 
<TR> 
<TD style="text-align: center; FONT-SIZE: 12px; BACKGROUND: url(/img/m_1.png); border=0; COLOR: #790000; PADDING-TOP: 5px" vAlign=top  height=31><B>Меню сайта</B></TD></TR> 
        
<TR> 
<TD style="PADDING-RIGHT: 20px; PADDING-LEFT: 20px; PADDING-BOTTOM: 0px; PADDING-TOP: 5px"> 
<DIV id="menuDiv" style="height:1px;overflow:hidden;"> 
<UL style="PADDING-LEFT: 20px"> 
<LI>пппппотпо 
<LI> ооооо 
<LI>ооооо 
</UL></DIV> 
               
</TD></TR> 

<TR> 
<TD><IMG src="/img/m_2.png" border=0></TD> 
</TR> 
</TABLE>

  Ответить  
 
 автор: DDK   (14.08.2008 в 14:57)   письмо автору
 
   для: DDK   (14.08.2008 в 14:49)
 

Вот так еще можно сделать эффект ускорения по мере выползания (добавил немного элементарной тригонометрии):

<script language="JavaScript">
<!-- 
function div_slider(objid, value_from, value_to, mode)  {
    if (document.getElementById(objid)) {
        var target_object = document.getElementById(objid);
        if(target_object.style.height >= value_to) return;
        if(value_from > value_to) value_from -= value_from - value_to;
        target_object.style.height = value_from;
    }
    if (mode=='show' && value_from < value_to) {
        value_from += 10 * Math.tan(value_from / value_to);
        setTimeout("div_slider('"+objid+"', "+value_from+", "+value_to+", '"+mode+"')", 10);
    } else if(mode=='hide' && value_from > value_to) {
        value_from -= 4;
        setTimeout("div_slider('"+objid+"', "+value_from+", "+value_to+", '"+mode+"')", 10);
    }

}
//-->
</script>

  Ответить  
 
 автор: Druid   (14.08.2008 в 15:05)   письмо автору
 
   для: DDK   (14.08.2008 в 14:49)
 

спасиб огромное

ток ещо вопрос

Если у меня таких 2 меню ток одно маленькое а второе побольше


<body onload="div_slider('menuDiv', 1, 100, 'show')"> 


я поменял 100 на 300 для первого меню ето прекрасно а вот для второго очень много

  Ответить  
 
 автор: DDK   (14.08.2008 в 15:10)   письмо автору
 
   для: Druid   (14.08.2008 в 15:05)
 

Первому прописываете id="menudiv1", второму id="menudiv2". И так сколько Вам угодно их делайте. Потом просто добивите сюда:

<body onload="div_slider('menuDiv1', 1, 100, 'show');div_slider('menuDiv2', 1, 300, 'show');">

  Ответить  
 
 автор: Druid   (14.08.2008 в 15:11)   письмо автору
 
   для: DDK   (14.08.2008 в 15:10)
 

Я так и думал ;)

Спасиб огромнейшае за помощь

  Ответить  
 
 автор: mihdan   (15.08.2008 в 17:07)   письмо автору
 
   для: Druid   (14.08.2008 в 14:01)
 

http://jquery.bassistance.de/treeview/demo/?1.0

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования