Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Медленно выпадающее меню, Помогите доработать 
:(
    Опции темы
GIK
Дата 20.10.2005, 15:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Добрый человек
**


Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: 6
Всего: 14



Я извиняюсь что создаю похожие темы, но это частный случай smile
У меня такая задача:
Хочу сделать выпадающее меню, не просто выпадающее, а МЕДЛЕННО выпадающее, как например на сайте sony.ru.
Вот с чего я начал:
Код

<html>
<head>
 <title>Простой JS сценарий</title>
   <style type="text/css"> 
  <!-- 
    #layer1 
    { background-color: green;
      left: 24px;
      position: absolute; 
      top: 24px;
      visibility: visible  
    }
    #layer2 
    { background-color: red;
      left: 24px;
      position: absolute; 
      top: 44px;
      visibility: hidden 
    }
    }
    #layer3 
    { background-color: blue;
      left: 24px;
      position: absolute; 
      top: 24px;
      visibility: hidden  
    }
   #layer4
    { background-color: silver;
      left: 24px;
      position: absolute; 
      top: 84px;
      visibility: hidden   
     }
     }
   #layer5
    { background-color: green;
      left: 24px;
      position: absolute; 
      top: 104px;
      visibility: hidden
     }
 --> 
  </style> 
 <script type="text/javascript" language="JavaScript">
  <!-- 
   function ifr_doc(lay,state) 
 { 
   for(var i=2; i<6; i++) 
   { var layval = document.getElementById(lay+i);
     layval.style.visibility = state;
   }
 }
//-->
</script>
</head>
 <b
  <p id="layer1" onMouseover="ifr_doc('layer','visible')" onMouseout="ifr_doc('layer','hidden')">
   Блок1 
  </p>
  <p id="layer2">
   Блок2
  </p>
  <p id="layer3">
   Блок3 
  </p>
 <p id="layer4">
   Блок4
  </p>
 <p id="layer5">
   Блок5
  </p>   
 </body>
</html>

А далее после различных эксперементов пошли курьезы: (если навести один раз, убрать, и навести еще раз, то произойдет чудо), это чудо объесняется мной частично: после первой наводки инициализируется I++, что даст 2, далее после отвода мыши 3, но почему визуално я вижу слои только после повторного навода, вот это как раз и есть чудо???
Код

<html>
<head>
 <title>Простой JS сценарий</title>
   <style type="text/css"> 
  <!-- 
    #layer1 
    { background-color: green;
      left: 24px;
      position: absolute; 
      top: 24px;
      visibility: visible  
    }
    #layer2 
    { background-color: red;
      left: 24px;
      position: absolute; 
      top: 44px;
      visibility: hidden 
    }
    }
    #layer3 
    { background-color: blue;
      left: 24px;
      position: absolute; 
      top: 24px;
      visibility: hidden  
    }
   #layer4
    { background-color: silver;
      left: 24px;
      position: absolute; 
      top: 84px;
      visibility: hidden   
     }
     }
   #layer5
    { background-color: green;
      left: 24px;
      position: absolute; 
      top: 104px;
      visibility: hidden
     }
 --> 
  </style> 
 <script type="text/javascript" language="JavaScript">
  <!-- 
   i=1;
   function ifr_doc(lay,state) 
 { 
    
   var layval = document.getElementById(lay+i);
     layval.style.visibility = state;
    i++;
 }
//-->
</script>
</head>
 <b
  <p id="layer1" onMouseover="ifr_doc('layer','visible')" onMouseout="ifr_doc('layer','hidden')">
   Блок1 
  </p>
  <p id="layer2">
   Блок2
  </p>
  <p id="layer3">
   Блок3 
  </p>
 <p id="layer4">
   Блок4
  </p>
 <p id="layer5">
   Блок5
  </p>    
 </body>
</html>


У кого есть идеи по созданию плавно выпадающего меню ????????


--------------------
Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.
PM MAIL ICQ   Вверх
Sardar
Дата 20.10.2005, 16:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



GIK ничего медленно выпадающего на sony.ru не увидел. По товему коду... где же там медленно что выпадает? По шаговое открытие строк это плохая тактика. smile
Добавлено @ 16:18
Цитата(GIK @ 20.10.2005, 15:07)
КАК ЕГО РЕДАКТИРОВАТЬ

Жать на кнопку "редактировать", заменить все вхождения {code=javascript] на {code=html].
Попытаться обьяснить произошедшие изменения и главное смысл подсветки.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Aliance
Дата 20.10.2005, 16:56 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Специально для GIK:
«МАНУАЛ: как редактировать посты»

Кнопочка «редактировать» - находится в правом углу, верхней части твоего поста, выглядит вот так:
--Resize_Images_Alt_Text--



Это сообщение отредактировал(а) Aliance - 20.10.2005, 16:57
PM MAIL WWW ICQ Skype   Вверх
GIK
Дата 23.10.2005, 09:20 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Добрый человек
**


Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: 6
Всего: 14



Цитата
По шаговое открытие строк это плохая тактика.

А я как раз до этого догадался.
Что если сделать так:
Первый слой видимый(он же начало меню), второй слой "прячется" за первым, он постепенно вылазит из него, все остальные слои невидимы и их нахождение имеет координаты "1 слой вниз", т.е. пронумерованные слои начиная со второго, изначально находятся на растоянии равному тольшине 1-го слоя вниз. Т.е. используем setTimeout, который в первой функции увеличивает top слоя №2 постепенно, на 1 px, и как только он достиг предела, вызываем вторую функцию, которая сначала делает видимым слой №3 (который на данный момент находится под слоем №2) и затем увеличивает его top также на 1 px., т.е. слой №3 изначально находится на "пределе" слоя №2, только он невидим.
Все это прописать мне недолго, но есть пара логических ошибок которые я не пойму.
1) в моем примере нахождение слоя №1 имеет свое визуальное нахождение относительно других неправильным, хотя координаты left =24, т.е. такие же как у остальных.
2) слой №3 находится выше слоя №2

А на сайте sony.ru раньше была плавно выпадающая менюшка.



P.S. не отвечал долго т.к. немог, компьютер подключенный к интернет пока только на работе.


--------------------
Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.
PM MAIL ICQ   Вверх
Sardar
Дата 23.10.2005, 13:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



GIK открыл твой пост, подредактировал. Будь добр, в следующий раз не тормози, если видишь в коде теги, знай это html, соотвественно {code=html] чот бы подсветка была верная. Если ещё не ясно, html может содержать не только теги, но и CSS и JS, а подсветка у нас достаточно "умна" что бы это всё дело отдельно подсветить.

Не пойму как должна быть анимация? Допустим слой плавно выезжает "из ниоткуда", это обычно выполняеться вырезанием слоя (стиль clip), либо сделай слой с заданными размерами и overflow: hidden, внутрь положи слой на абсолютной позиции. Если внутренний слой за пределами окошка внешнего слоя, то его не видно, затем выдвигай его в окошко.
Оба эффекта(стиль clip и "слой окошко") смотряться одинакого, но clip чуть больше торозит.


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
GIK
Дата 24.10.2005, 09:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Добрый человек
**


Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: 6
Всего: 14



Сдесь приблизительный код.
Ни как не могу разместить слои правильно, у меня почему-то слой №1 при left=12 все равно отличается от других:
Код

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "DTD/xhtml1-transitional.dtd">
<html>
<head>
 <title>Простой JS сценарий</title>
   <style type="text/css"> 
  <!-- 
    #layer1 
    { background-color: green;
      left: 12px;
      position: absolute; 
      top: 10px;
      visibility: visible  
    }
    #layer2 
    { background-color: red;
      left: 12px;
      position: absolute; 
      top: 10px; //слой изначально находится на уровне = первому слою, и постепенно (на 1px) увеличивается
      visibility: hidden; 
    }
    }
    #layer3 
    { background-color: blue;
      left: 12px;
      position: absolute; 
      top: 25px;  //Слой находится на уровне = максимальному "top" слоя №2, становится видимым и "растет".
      visibility: hidden;  
    }
   #layer4
    { background-color: silver;
      left: 24px;
      position: absolute; 
      top: 40px;
      visibility: hidden;   
     }
     }
   #layer5
    { background-color: green;
      left: 12px;
      position: absolute; 
      top: 55px;
      visibility: hidden;
}
 --> 
  </style> 
 <script type="text/javascript" language="JavaScript">
  <!-- 
   function ifrdoc() 
 {  var layval=document.getElementById("layer2");
    var topval=layval.style.top;
    var w=topval;
    document.getElementById("layer2").style.top=w+1; 
   if (document.getElementById("layer2").style.top<25) //25 это максимум до которого доходит этот слой.
   {setTimeout(ifrdoc(), 50);}
   else {f2();}
  }

  function f2()
{ увеличиваем слой №3
  
 }

//-->
</script>
</head>
 <b
  <p id="layer1" onMouseover="ifrdoc()">
   Блок1 
  </p>
  <p id="layer2">
   Блок2
  </p>
  <p id="layer3">
   Блок3 
  </p>
 <p id="layer4">
   Блок4
  </p>
 <p id="layer5">
   Блок5
  </p>   
   </body>
</html>

Добавлено @ 09:24
Да и чуть не забыл:
Вчера обнаружил что вместо тега <body> можно писать так: <b , не так <bo и не так<bod
Вот пример:
Код

<html>
<head>
 <title>Простой JS сценарий</title>
   <style type="text/css"> 
  <!-- 
    #layer1 
    { background-color: green;
      left: 1px;
      position: absolute; 
      top: 12px;
      visibility: visible  
    }
    #layer2 
    { background-color: red;
      left: 34px;
      position: absolute; 
      top: 44px;
      visibility: hidden; 
    }
    }
    #layer3 
    { background-color: blue;
      left: 24px;
      position: absolute; 
      top: 24px;
      visibility: hidden;  
    }
   #layer4
    { background-color: silver;
      left: 24px;
      position: absolute; 
      top: 84px;
      visibility: hidden;   
     }
     }
   #layer5
    { background-color: green;
      left: 24px;
      position: absolute; 
      top: 104px;
      visibility: hidden;
}
 --> 
  </style> 
 <script type="text/javascript" language="JavaScript">
  <!-- 
   function ifrdoc() 
 {  var layval=document.getElementById("layer1");
    var topval=layval.style.left;
    var w=topval; 
    document.getElementById("layer1").style.left=w+1; //увеличиваем плавно, на 1....
   if (document.getElementById("layer1").style.left<54)
   {setTimeout(ifrdoc(), 240);}
   else {f2();}
  }

  function f2()
{ alert("Странно.... наведеш еще раз и ЭТО сообщение больше не вылезет, хотя функция вызывается");
  
 }

//-->
</script>
</head>
 <b
  <p id="layer1" onMouseover="ifrdoc()">  
   Блок1 
  </p>
  <p id="layer2">
   Блок2
  </p>
  <p id="layer3">
   Блок3 
  </p>
 <p id="layer4">
   Блок4
  </p>
 <p id="layer5">
   Блок5
  </p>    
 </body>
</html>



--------------------
Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.
PM MAIL ICQ   Вверх
Aliance
Дата 24.10.2005, 12:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137



Цитата(GIK @ 24.10.2005, 10:18)
Вчера обнаружил что вместо тега <body> можно писать так: <b , не так <bo и не так<bod

можно вообще ничего не писать, парсер сам подставит…
Но это не является корректным.
PM MAIL WWW ICQ Skype   Вверх
Sardar
Дата 24.10.2005, 13:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Цитата(GIK @ 24.10.2005, 08:18)
Вчера обнаружил что вместо тега <body> можно писать так: <b , не так <bo и не так<bod

Это ты в какой спецификации нашёл? Наша подсветка не норматив, что бы на её результаты опираться smile

Во вторых не хочетсья тестировать код и дорабатывать, если он с первого раза не пашет. Браузер же откровенно ошибки кидает и матом ругаеться, или ты этого не видишь? smile


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
GIK
Дата 25.10.2005, 12:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Добрый человек
**


Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: 6
Всего: 14



Ладно бох с ним с Body (Хотя у меня ни чего не ругается и все работает, по крайней мере ИМЕННО <b).
Меня сейчас больше всего интересует корректное (как указывают координаты) расположение слоев???? smile


--------------------
Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.
PM MAIL ICQ   Вверх
Sardar
Дата 25.10.2005, 14:42 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Времени не хватает написать тебе прару примеров...

О координатах + полезные примеры: http://forum.vingrad.ru/index.php?showtopic=28220


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
Гость_12345
Дата 25.10.2005, 19:10 (ссылка)    |    (голосов: 0) Загрузка ... Загрузка ... Быстрая цитата Цитата


Unregistered











GIK : не вижу попытку создать плавное выпадение. Для него нужно содержать функции setTimeout() (setInterval()) в коде, чтобы указывать интервал срабатывания. Без них не будет.
Чудеса здесь (сам не смотрел) появляются, видимо, из-за наезжания слоёв, и когда выполняестя подвод мыши снизу, появляется скрытый слой, закрывает ведущий, на нём работает mouseOut, всё закрывается.
Почему бы не сделать сразу красиво, в однослойной таблице, проявлять по display, и конечно же, с setTimeout()?

Код
<title>плавно спадающий список</title> 
<meta http-equiv="Content-Type" content="charset=windows-1251">
<script>d=document;ii=ww=0;
function ff(th,alt,cont,displ){th.style.display='none';alt.style.display='';
    if(ii>=2&&ii<=7)clearTimeout(ww);
    ii=(displ==''?2:7);ff2(displ);
}
function ff2(displ){
    if(ii>=2&&ii<=7)ww=setTimeout("d"+ii+".style.display='"+displ+"';ff2('"+displ+"');",50);
    ii+=(displ==''?1:-1);
}</script>

<table border=1 cellspacing=2 width=120>
<tr id=d0 onClick=ff(this,d.all.d1,d.all.d2,'')>
<td>(показать)</td></tr>
<tr id=d1 style=display:none onClick=ff(this,d.all.d0,d.all.d2,'none')>
<td>(скрыть)</td></tr>
<tr id=d2 style=display:none><td>Строка1</td></tr>
<tr id=d3 style=display:none><td>Строка2</td></tr>
<tr id=d4 style=display:none><td>Строка3</td></tr>
<tr id=d5 style=display:none><td>Строка4</td></tr>
<tr id=d6 style=display:none><td>Строка5</td></tr>
<tr id=d7 style=display:none><td>Строка6</td></tr>
</table>
Пример на burime.org.ru/test1/JsPrimeryCode-61.htm . Оно не идеально работает (при многих кликах сразу). Как всегда такие коды надо долго отлаживать, чтобы предусмотреть все варианты событий и все нештатные пролезания счётчиков один вперёд другого. Здесь будто бы не должны накладываться клики, но происходят.
  Вверх
PARROT
Дата 25.10.2005, 20:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
****


Профиль
Группа: Экс. модератор
Сообщений: 2339
Регистрация: 5.1.2005
Где: Спб-ЦарьГрад

Репутация: 1
Всего: 50



Тогда и это меню подойдет:
Незнаю хорошее оно или нет, я не спец в яваскрипт, но работает!
Код

<style>
body{background-color:#FFFFFF}
A{color:Navy; text-decoration:none}
A:hover{color:red}
A:visited:{color:#808080}
TD{font-family:arial,helvetica; font-size:10pt}
DIV.clTopMenu{position:absolute; width:101; height:150; clip:rect(0,101,14,0); visibility:hidden; z-index:31; layer-background-color:#EEEEEE; background-color:white}
DIV.clTopMenuBottom{position:absolute; width:101; height:3; clip:rect(0,101,3,0); top:11; layer-background-color:#CECFCE; background-color:#CECFCE; z-index:2}
DIV.clTopMenuText{position:absolute; width:91; left:5; top:15; font-family:arial,helvetica; font-size:11px; background-color:#EEEEEE; z-index:1}
</style>
<script>
ie=document.all?1:0
n=document.layers?1:0
var numberOfMenus=2
var mwidth=101
var pxBetween=10
var fromLeft=20
var fromTop=10
var bgColor='#CECFCE'
var bgColorChangeTo='#6380BC'
var imageHeight=11
function makeNewsMenu(obj,nest){
        nest=(!nest) ? '':'document.'+nest+'.'
        this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')
        this.scrollHeight=n?this.css.document.height:eval('document.all.'+obj+'.offsetHeight')
        this.moveIt=b_moveIt;this.bgChange=b_bgChange;
        this.slideUp=b_slideUp; this.slideDown=b_slideDown;
        this.clipTo=b_clipTo;
    this.obj = obj + "Object";         eval(this.obj + "=this")
}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
function b_bgChange(color){if(ie) this.css.backgroundColor=color; else this.css.bgColor=color}
function b_clipTo(t,r,b,l){
        if(n){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l
        }else this.css.clip="rect("+t+","+r+","+b+","+l+")";
}
function b_slideUp(ystop,moveby,speed,fn,wh){
        if(!this.slideactive){
                if(this.y>ystop){
                        this.moveIt(this.x,this.y-5); eval(wh)
                        setTimeout(this.obj+".slideUp("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
                }else{
                        this.slideactive=false; this.moveIt(0,ystop); eval(fn)
                }
        }
}
function b_slideDown(ystop,moveby,speed,fn,wh){
        if(!this.slideactive){
                if(this.y<ystop){
                        this.moveIt(this.x,this.y+5); eval(wh)
                        setTimeout(this.obj+".slideDown("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)
                }else{
                        this.slideactive=false; this.moveIt(0,ystop); eval(fn)
                }
        }
}
function newsMenuInit(){
        oTopMenu=new Array()
        for(i=0;i<=numberOfMenus;i++){
                oTopMenu[i]=new Array()
                oTopMenu[i][0]=new makeNewsMenu('divTopMenu'+i)
                oTopMenu[i][1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i)
                oTopMenu[i][2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i)
                oTopMenu[i][1].moveIt(0,imageHeight)
                oTopMenu[i][0].clipTo(0,mwidth,imageHeight+3,0)
                oTopMenu[i][0].moveIt(i*mwidth+fromLeft+(i*pxBetween),fromTop)
                oTopMenu[i][0].css.visibility="visible"
        }
}
function topMenu(num){
        if(oTopMenu[num][1].y==imageHeight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,'oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)')
        else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(imageHeight,10,40,'oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)')
}
function menuOver(num){oTopMenu[num][1].bgChange(bgColorChangeTo)}
function menuOut(num){oTopMenu[num][1].bgChange(bgColor)}
onload=newsMenuInit;
</script>
</head>

<body>
<div id="divTopMenu0" class="clTopMenu"><a href="#" onmouseover="menuOver(0)" onmouseout="menuOut(0)" onclick="topMenu(0); if(ie)this.blur(); return false"><img src="news.gif" width=101 height=11 alt="" border=0 align="top"></a>
        <div id="divTopMenuText0" class="clTopMenuText">
                Added some link to me buttons and
                advertising info and a new script and a new tutorial.<br><br>
                Remember to join the newsletter!
        </div>
        <div id="divTopMenuBottom0" class="clTopMenuBottom"></div>
</div>

<div id="divTopMenu1" class="clTopMenu"><a href="#" onmouseover="menuOver(1)" onmouseout="menuOut(1)" onclick="topMenu(1); if(ie)this.blur(); return false"><img src="keycontrol.gif" width=101 height=11 alt="" border=0 align="top"></a>
        <div id="divTopMenuText1" class="clTopMenuText">
                1-6=Menu controls<br>
                M=Menuchange<br>
                N=News<br>
                K=Key controls<br>
                P=Page control<br>
                A=Scroll down<br>
                Z=Scroll up<br>
                S=Scriptomania<br><br>
        </div>
        <div id="divTopMenuBottom1" class="clTopMenuBottom"></div>
</div>
<div id="divTopMenu2" class="clTopMenu"><a href="#" onmouseover="menuOver(2)" onmouseout="menuOut(2)" onclick="topMenu(2); if(ie)this.blur(); return false"><img src="pagecontrol.gif" width=101 height=11 alt="" border=0 align="top"></a>
        <div id="divTopMenuText2" class="clTopMenuText">
                <a href="#" onclick="changeMenu(); return false">Меню</a><br>
                <a href="#" onclick="changeMenu(); return false">Учебная часть</a>
        </div>
        <div id="divTopMenuBottom2" class="clTopMenuBottom"></div>
</div>




--------------------
Безумный утешается прошедшим, слабоумный - будущим, умный - настоящим!
PM MAIL   Вверх
GIK
Дата 26.10.2005, 08:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Добрый человек
**


Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: 6
Всего: 14



PARROT спасибо, хотя стиль написания мне мало понятен.
Гость_12345 твой код я тоже разобрал, но все же с таблицами не так красиво smile , как со слоями


--------------------
Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.
PM MAIL ICQ   Вверх
Гость_12345
Дата 26.10.2005, 11:57 (ссылка)    |    (голосов: 0) Загрузка ... Загрузка ... Быстрая цитата Цитата


Unregistered











Чем же таблицы отличаются от слоёв? Они помогают не считать координаты слоя, подвешиваются в нужное место (в отдельный слой), поэтому компактнее и не зависят от контекста. А попробуй свои слои поставить в плавающий дизайн?
  Вверх
Sardar
Дата 26.10.2005, 14:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Цитата
А попробуй свои слои поставить в плавающий дизайн?

Оберни слои на абсолютной позиции в слой на релативной, который помещай куда угодно и ставь ему любой размер.

Пример:
Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <title>Untitled</title>
<style type="text/css">
.menu {
  position: relative;
}
.item {
  position: absolute;
  top: 0px;
  left: 0px;
  border: 1px solid navy;
  background-color: white;
  cursor: pointer;
  padding: 3px;
  font-family: Tahoma;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  width: 100px;
}
.first { }
</style>
<script type="text/javascript">
<!--
function toggleMenu(obj) {
  if(obj.tmr) window.clearInterval(obj.tmr);
  if(obj.open) {
    obj.open=false;
    obj.tmr=window.setInterval(function() {moveMenuAnim(obj, false);}, 50);
  } else {
    obj.open=true;
    obj.tmr=window.setInterval(function() {moveMenuAnim(obj, true);}, 50);
  }
}

function closeMenu(obj) {
  if(obj.tmr) window.clearInterval(obj.tmr);
  obj.tmr=window.setInterval(function() {moveMenuAnim(obj, false);}, 50);
}

function moveMenuAnim(obj, open) {
  var o=obj.previousSibling;
  var cum=0;
  while(o) {
    if(open) {
      if(o.offsetTop>=(o.nextSibling.offsetHeight+o.nextSibling.offsetTop)) {
        window.clearInterval(obj.tmr);
        return;
      }
      o.style.top=(o.offsetTop+(++cum)*3)+'px';
    } else {
      if(o.offsetTop<=0) {
        window.clearInterval(obj.tmr);
        return;
      }
      o.style.top=(o.offsetTop-(++cum)*3)+'px';
    }
    o=o.previousSibling;
  }
}
//-->
</script>
</head>

<body>

<div class="menu">
 <div class="item">Item5</div>
 <div class="item">Item4</div>
 <div class="item">Item3</div>
 <div class="item">Item2</div>
 <div class="item">Item1</div>
 <div class="item first" onclick="toggleMenu(this)">Menu</div>
</div>

</body>
</html>

Писать на JS не возможно не зная правильной вёрстки, т.е. CSS. Кстати CSS это не набор стилей, это точное и ясно описание визуальной модели документа. Прочитав вопросы типа "как расположить меню" исчезнут вместе с кучей "багов".


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
GIK
Дата 26.10.2005, 15:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Добрый человек
**


Профиль
Группа: Участник
Сообщений: 985
Регистрация: 3.6.2005
Где: я только не небыв ал

Репутация: 6
Всего: 14



Sardar большле СПАСИБО, это то что я хотел увидеть


--------------------
Математика=>пиво=> програмирование, три вещи последовательны и совместимы !!!
Программирование - это не деятельнось! Программирование - это состояние души!
Бог - самый крутой программист.
PM MAIL ICQ   Вверх
Страницы: (2) [Все] 1 2 
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0644 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.