Выплывающее подменю

Старый mweb

Модератор: [mweb team]

Выплывающее подменю

Сообщение Nika Вт мар 11, 2003 3:40

Может кто знает, как сделать что при клике на линк меню выплывало подменю и сдвигало нижние линки меню вниз, а при исчезании подменю, задвигало их обратно.
У меня есть скрипт, но в нем слой подменю ложится сверху на слой меню, это не страшно, если менюшка горизонтальная - можно его куда нибудь переставить, но у меня она вертикальная.
Спасибо заранее.

Каталог Java scripts на Vmeste.net

============================================================
Вставьте этот код между тегами <head></head> Вашей основной HTML страницы
============================================================

<script language="JavaScript">
<!--
var eypos=-200, ejump=-4;
var typos=-260, tjump=-4;
var delay=2;
function do_menue()
{
if(typos>-260)
{
tjump=-4;
if(typos>=130)
head_fahren();
}
ejump=-ejump;
if(eypos<=-200 | | eypos>=177)
menue_fahren();
}
function menue_fahren()
{
if(document.layers) document.menue.top=eypos; else document.all.menue.style. top=eypos;
eypos+=ejump;
if(eypos>-200 && eypos<177)
setTimeout("menue_fahren()", delay);
}
function do_head()
{
if(eypos>-200)
{
ejump=-4;
if(eypos>=177)
menue_fahren();
}
tjump=-tjump;
if(typos<=-260 | | typos>=130)
head_fahren();
}
function head_fahren()
{
if(document.layers) document.head.top=typos; else document.all.head.style. top=typos;
typos+=tjump;
if(typos>-260 && typos<130)
setTimeout("head_fahren()", delay);
}
// -->
</script>

<div class=text1 style="width: 295; height: 91">
<div style="position: absolute; z-index: 2; left: 24; top: 159; width: 214; height: 72">
<a href="javascript:do_menue()" style="font-size: 12pt; font-family: Arial">ВЫПЛЫВАЮЩЕЕ 
МЕНЮ</a><br><br>
<!--(не должно быть target страницы по-умолчанию!!!)-->
</div>
<BR>
<div id=menue style="position:absolute; top:-200; left:100; z-index: 2;">
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 COLS=3 width=450>
<TR>
<TD>
<A ONMOUSEOVER= "window.status='Link 1' ;return true" HREF="home.htm" target="_self">[Link 1]</a><br>
<A ONMOUSEOVER= "window.status='Link 2' ;return true" HREF="Link.htm" target="_blank">[Link 2]</a><br>
<A ONMOUSEOVER= "window.status='Link 3' ;return true" HREF="home.htm" target="_self">[Link 3]</a><br>
<A ONMOUSEOVER= "window.status='Link 4' ;return true" HREF="Link.htm" target="_blank">[Link 4]</a><br>
<A ONMOUSEOVER= "window.status='Link 5' ;return true" HREF="home.htm" target="_self">[Link 5]</a><br>
<A ONMOUSEOVER= "window.status='Link 6' ;return true" HREF="Link.htm" target="_blank">[Link 6]</a><br>
<A ONMOUSEOVER= "window.status='Link 7' ;return true" HREF="home.htm" target="_self">[Link 7]</a></TD>
</TR>
</TABLE>
</div>
</div>
Nika
Прохожий
 
Сообщения: 64
Зарегистрирован: Вс фев 16, 2003 1:01
Откуда: USA

Сообщение nokia Вт мар 11, 2003 6:20

Êàê íàñ÷åò òîãî, ÷òîáû ïðè ïîÿâëåíèè äîïîëíèòåëüíîãî ñëîÿ âñåì îñòàëüíûì ñëîÿì (êîòîðûå ñîäåðæàò îñòàëüíûå ññûëêè) íàçíà÷àòü ñäâèã â y-êîîðäèíàòå íà âåëè÷èíó, ñîîòâåòñòâóþùóþ âûñîòå âûâàëèâàþùåãîñÿ ñëîÿ?
(êîä ïèñàòü êàê âñåãäà ëîìàåò) Изображение

------------------
rastaman vibration!positiv!
Bob Marley rulit!
Аватара пользователя
nokia
Курильщик
 
Сообщения: 419
Зарегистрирован: Ср ноя 27, 2002 1:01
Откуда: nov-o-cybersk, russia

Сообщение Nika Вт мар 11, 2003 17:15

Da... esli bi ya umela rabotat' so sloyami mne bi eto pomoglo, zvuhit logihno. Poroyus' v samouhitelyax
Spasibo
Nika
Прохожий
 
Сообщения: 64
Зарегистрирован: Вс фев 16, 2003 1:01
Откуда: USA

Сообщение BoxerGirl Сб мар 15, 2003 14:26

<html><head>
<script language="Javascript">
function tapeDisplay(TapeNewsID) {
eval(TapeNewsID + ".style.display = (" + TapeNewsID + ".style.display == 'block') ? 'none' : 'block'");
}
</script>
<title></title>
</head>
<BODY link="#000000" vlink="#808080" alink="#C0C0C0">
<table>
<tr>
<td><a href="#" onClick="tapeDisplay('menu1');return false;"><font size="2" face="Verdana"><b>Творчество</b></font></a></td>
</tr>
<tr id="menu1" style="display:none;">
<td>
<table cellpadding="0" cellspacing="0" border="0">
<tr><td><a href="http://"><font face="Verdana" size="1">проза</font></a></td></tr>
<tr><td><a href="http://"><font face="Verdana" size="1">поэзия</font></a></td></tr>
<tr><td><a href="http://"><font face="Verdana" size="1">критика</font></a></td></tr>
<tr><td><a href="http://"><font face="Verdana" size="1">переводы</font></a></td></tr>
</table>
</td>
</tr>
</table>
BoxerGirl
Прохожий
 
Сообщения: 58
Зарегистрирован: Чт янв 10, 2002 1:01

Сообщение TBOE Вт июл 17, 2007 15:26

Народ, помогите чайнику -06- Я прописал скрипт BoxerGirl для оденой ссылочки (всё хорошо, всё чудесно), хочу прописать так же для второй (следом идущей) ссылочки и мне говорит Х*Й... Не открывается ни для первой, ни для второй...
Заранее спасибо -03-
Мы не так нуждаемся в помощи друзей,
как в уверенности что мы её получим...
TBOE
Прохожий
 
Сообщения: 17
Зарегистрирован: Вт июл 17, 2007 15:21
Откуда: МоскоФ

Сообщение Berezkin Вт июл 17, 2007 15:53

Просто ты ID прописать забыл у другой ссылки:

Код: Выделить всё
<html><head>
<script language="Javascript">
function tapeDisplay(TapeNewsID) {
eval(TapeNewsID + ".style.display = (" + TapeNewsID + ".style.display == 'block') ? 'none' : 'block'");
}
</script>
<title></title>
</head>
<BODY link="#000000" vlink="#808080" alink="#C0C0C0">

<table>

<tr>
<td>
<a href="#" onClick="tapeDisplay('menu1');return false;">
<font size="2" face="Verdana">
<b>Творчество</b>
</font>
</a>
</td>
</tr>

<tr id="menu1" style="display:none;">
<td>

<table cellpadding="0" cellspacing="0" border="0">

<tr>
<td>
<a href="http://">
<font face="Verdana"size="1">
проза
</font>
</a>
</td>
</tr>

<tr>
<td>
<a href="http://">
<font face="Verdana" size="1">
поэзия
</font>
</a>
</td>
</tr>

<tr>
<td>
<a href="http://">
<font face="Verdana" size="1">критика - не творчество
</font>
</a>
</td>
</tr>

<tr>
<td>
<a href="http://">
<font face="Verdana" size="1">
переводы тоже не творчество
</font>
</a>
</td>
</tr>

</table>

</td>
</tr>

<tr>
<td>

<!-- вот тут меняем ID -->
<a href="#" onClick="tapeDisplay('menu2');return false;">
<!-- вот тут меняем ID -->

<font size="2" face="Verdana">
<b>Бла бла бла</b>
</font>
</a>
</td>
</tr>

<!-- и тут меняем ID -->
<tr id="menu2" style="display:none;">
<!-- и тут меняем ID -->

<td>

<table cellpadding="0" cellspacing="0" border="0">

<tr>
<td>
<a href="http://">
<font face="Verdana" size="1">
бла бла бла
</font>
</a>
</td>
</tr>

<tr>
<td>
<a href="http://">
<font face="Verdana" size="1">
бла бла бла
</font>
</a>
</td>
</tr>

<tr>
<td>
<a href="http://">
<font face="Verdana" size="1">
бла бла бла
</font>
</a>
</td>
</tr>

<tr>
<td>
<a href="http://">
<font face="Verdana" size="1">
бла бла бла
</font>
</a>
</td>
</tr>

</table>

</td>
</tr>

</table>

</body>
</html>
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Сообщение TBOE Вт июл 17, 2007 16:17

Столкнулся ещё с одной проблеммой... Короче есть "Каталог файлов" в нём категория "Софт для видео", а в этой категории есть разделы... Так вот я хочу чтоб это всё можно было сделать как выплывающее подменю... Только чтоб разделы выплывали, только после нажатия на определённыю категорию...
И опять заранее СПАСИБО... =)))
Мы не так нуждаемся в помощи друзей,
как в уверенности что мы её получим...
TBOE
Прохожий
 
Сообщения: 17
Зарегистрирован: Вт июл 17, 2007 15:21
Откуда: МоскоФ

Сообщение Berezkin Вт июл 17, 2007 17:32

:) ничего не понял
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Сообщение Berezkin Вт июл 17, 2007 17:58

Так???
Код: Выделить всё
<html>

<head>

<script language="Javascript">
function tapeDisplay(TapeNewsID) {
eval(TapeNewsID + ".style.display = (" + TapeNewsID + ".style.display == 'block') ? 'none' : 'block'");
}
</script>

<title></title>

</head>

<BODY link="#000000" vlink="#808080" alink="#C0C0C0">

<table>

<tr>
<td>
<a href="#" onClick="tapeDisplay('menu1');return false;">
<font size="2" face="Verdana">
<b>Base Link</b>
</font>
</a>
</td>
</tr>

<tr id="menu1" style="display:none;">
<td>

   <table cellpadding="0" cellspacing="0" border="0">
   
   <tr>
   <td>
   &nbsp;&nbsp;&nbsp;
   <a href="#" onClick="tapeDisplay('in_menu1');return false;">
   <font face="Verdana"size="1">
   link1
   </font>
   </a>
   </td>
   </tr>
   
   <tr id="in_menu1" style="display: none;">
   <td>
      
      <table cellpadding="0" cellspacing="0" border="0">
      
      <tr>
      <td>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="#">
      <font face="Verdana"size="1">
      in_link1
      </font>
      </a>
      </td>
      </tr>
      
      <tr>
      <td>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="#">
      <font face="Verdana"size="1">
      in_link1
      </font>
      </a>
      </td>
      </tr>
      
      <tr>
      <td>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="#">
      <font face="Verdana"size="1">
      in_link1
      </font>
      </a>
      </td>
      </tr>
      
      </table>
      
   </td>
   </tr>
   
   <tr>
   <td>
   &nbsp;&nbsp;&nbsp;
   <a href="#" onClick="tapeDisplay('in_menu2');return false;">
   <font face="Verdana" size="1">
   link2
   </font>
   </a>
   </td>
   </tr>
   
   <tr id="in_menu2" style="display: none;">
   <td>
      
      <table cellpadding="0" cellspacing="0" border="0">
      
      <tr>
      <td>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="#">
      <font face="Verdana"size="1">
      in_link2
      </font>
      </a>
      </td>
      </tr>
      
      <tr>
      <td>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="#">
      <font face="Verdana"size="1">
      in_link2
      </font>
      </a>
      </td>
      </tr>
      
      <tr>
      <td>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a href="#">
      <font face="Verdana"size="1">
      in_link2
      </font>
      </a>
      </td>
      </tr>
      
      </table>
      
   </td>
   </tr>
   
   </table>

</td>
</tr>

</table>

</body>
</html>
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Сообщение TBOE Ср июл 18, 2007 9:18

Точно... -02-
Вот только у меня после вставки кода весь сайт перекорёжило... =( Всё не слава богу...
Но всё равно огромное тебе спасибо...
Мы не так нуждаемся в помощи друзей,
как в уверенности что мы её получим...
TBOE
Прохожий
 
Сообщения: 17
Зарегистрирован: Вт июл 17, 2007 15:21
Откуда: МоскоФ

Сообщение TBOE Ср июл 18, 2007 11:37

А не можешь ещё подсказать, как сделать, чтоб при открытии допустим link1, link2 закрывался автоматически???

З.Ы.
Я совсем тормоз, не могу вставить link3-4 =(

Наверное стоит убиться ап стену... =(
Мы не так нуждаемся в помощи друзей,
как в уверенности что мы её получим...
TBOE
Прохожий
 
Сообщения: 17
Зарегистрирован: Вт июл 17, 2007 15:21
Откуда: МоскоФ

Сообщение TBOE Ср июл 18, 2007 11:55

Так 3 и 4 линк вставил, а вот с автоматическим закрытием тяжко... Уже даже учебник скачал... -21- чайник...
Мы не так нуждаемся в помощи друзей,
как в уверенности что мы её получим...
TBOE
Прохожий
 
Сообщения: 17
Зарегистрирован: Вт июл 17, 2007 15:21
Откуда: МоскоФ

Сообщение Berezkin Ср июл 18, 2007 14:44

Че-то бился, бился, но так и не додумался как это сделать...
Я сам в JS пока не очень рублю...
Да и еще eval() этот...
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Сообщение Muerto Ср июл 18, 2007 15:14

В цикле сначала все закрыть, потом нужный открыть.
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Сообщение feininger Ср июл 18, 2007 19:14

feininger
Прохожий
 
Сообщения: 2
Зарегистрирован: Ср июл 18, 2007 9:39
Откуда: ru

Сообщение Berezkin Чт июл 19, 2007 9:20

2Muerto: а цикл по чему прогонять?

или так?
Код: Выделить всё
for (i=1; i<5; i++) {
TapeNewsID.style.display = 'none';
}
//где i - кол-во ссылок
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 12:39
Откуда: Москоу

Сообщение Bman Чт июл 19, 2007 11:03

2feininger:
Спасибо! Работает. -02-
Bman
Прохожий
 
Сообщения: 2
Зарегистрирован: Чт июл 19, 2007 10:59

Сообщение TBOE Пт июл 20, 2007 9:33

-24- туп, как пень... Ладно, может и работаеть, но я так и не догнал... Спасибо за помощь, мужики...
Мы не так нуждаемся в помощи друзей,
как в уверенности что мы её получим...
TBOE
Прохожий
 
Сообщения: 17
Зарегистрирован: Вт июл 17, 2007 15:21
Откуда: МоскоФ

Сообщение Aqua$erg Сб июл 21, 2007 19:30

Что вы в самом деле... Ищете сайт с хорошим меню, устраивающем по всем параметрам, качаете код, вспомогательные скрипты, и разбираете - что к чему
Аватара пользователя
Aqua$erg
Хронический Астматик
 
Сообщения: 1804
Зарегистрирован: Пт апр 11, 2003 8:12
Откуда: Питер

Сообщение Rostislav Пн июн 09, 2008 14:50

вот это вот меню, кажется самый первый пост..
"Добавлено: Вт Мар 11, 2003 3:40 Заголовок сообщения: Выплывающее подменю"

немец какой-то писал походу.
красиво опускается и подымается...

Только вот меня мучает один вопрос, может кто-то объяснить, НАКУЯ ТАМ функции "do_head()", "head_fahren()" и кусок кода:
Код: Выделить всё
    if(typos>-260)
    {
      tjump=-4;
      if(typos>=130)
      {
        head_fahren();
      }
    }


из функции do_menue...

(без этого работает)
я уже 5-й час трахаюсь с этим меню, пытаюсь до ума довести.. :(

вообще задача интересная и полезная думаю многим будет, поделюсь , когда сделаю.
если кто поможет - буду признателен!
Rostislav
Прохожий
 
Сообщения: 3
Зарегистрирован: Пн июн 09, 2008 14:42

Переделал кропаль скрипт того немца...

Сообщение Rostislav Ср июн 11, 2008 12:18

Код: Выделить всё
<script language="JavaScript">

ejump=20; /* шаг вверх-вниз по ejump-px */
delay=2; /* скорость прокрутки */

  window.onload = function () {
  topMenu1_fixed = parseInt(document.getElementById('Menu1').style.top);  //какой top у слоя
  visMenu1_fixed = document.getElementById('Menu1').offsetHeight;  //высота слоя
  topMenu1 = parseInt(document.getElementById('Menu1').style.top);  //отдаем top скрипту
  NewHeightStakan1 = document.getElementById('Stakan1').offsetHeight; //узнаем высоту стакана
  }
  function do_menue()
  {
    ejump=-ejump; // ejump, теперь = -20
    if(topMenu1<=visMenu1_fixed || topMenu1>=-visMenu_fixed) {
      menue_fahren();
    }
  }
  function menue_fahren()
  {
    document.getElementById('Stakan1').style.display = 'block';
    document.getElementById('Menu1').style.top=topMenu1;
    topMenu1+=ejump; // высота слоя по -4 добавляем
    NewHeightStakan1 += ejump; // уменьшаем-увеличиваем высоту стакана
    if(NewHeightStakan1 >0 && NewHeightStakan1 <= visMenu1_fixed) {
      document.getElementById('Stakan1').style.height = NewHeightStakan1 + 'px';
    } else {
      document.getElementById('Stakan1').style.height = visMenu1_fixed + 'px';
    }

    if(topMenu1 <= topMenu1_fixed) {
              /* поднимаем-опускаем */
      if(topMenu1<visMenu1_fixed && topMenu1>=-visMenu1_fixed) {
        if(topMenu1 <= topMenu1_fixed) {
          setTimeout("menue_fahren()", delay);
        }
      } else { document.getElementById('Stakan1').style.display = 'none'; }
    }
  }

</script>


Код: Выделить всё
<div style="background-color: #9B9B9B; border: 0px dashed green; position:relative;">
<a href="#" onClick="javascript:do_menue()">Bla-bla-bla</a>
</div>

<!-- Stakan1 -->

<div id="Stakan1" style="position: relative; border: 0px dashed red; overflow: hidden;">

<!-- Menu1 -->

<div id="Menu1" style="border: 0px dashed blue; position:relative; top:0">

<b>BLA-BLA-BLA</b> <br /><br />

text-text-text-text-text-text-text-text-text-text-text-text-text-text<br />
text-text-text-text-text-text-text-text-text-text-text-text-text-text<br />
text-text-text-text-text-text-text-text-text-text-text-text-text-text

</div> <!-- Menu1 -->
</div> <!-- Stakan1 -->
Rostislav
Прохожий
 
Сообщения: 3
Зарегистрирован: Пн июн 09, 2008 14:42

Сообщение Rostislav Ср июн 11, 2008 16:51

вот такое вот я сделал...
http://museum-ukraine.org.ua/polza/pvmenu_allready.html
Rostislav
Прохожий
 
Сообщения: 3
Зарегистрирован: Пн июн 09, 2008 14:42


Вернуться в Архив

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 21

cron