VPF::Мучения с созданием меню - Форум программистов

Orient

Дата 30.1.2007, 12:37 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 144
Регистрация: 17.7.2004

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

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

Пытаюсь сделать меню. По наведению на ссылку хочу чтобы появилось доолнительное окошко (слой) с дополнительными пунктами. Набросал вот такой вот простенький код:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.unnamed1 {
    position: static;
    visibility: hidden;
}
-->
</style>
</head>


<body onLoad="func1( false )"  onFocus="func1( false )"  >
 
<script  language="JavaScript" type="text/javascript" class="unnamed1" >
    function func1( FVisible ) {
        elm = document.getElementById( "menu" );
        
        if ( FVisible == true ) {
            elm.style.display = "block";
        } else {
            elm.style.display = "none";
        }
        
    }
</script>

    
      
<div id="menu" style="position:relative; top:32px; left:820px; z-index:2" > 
  <table width="8%" border="1">
  <tr>
      <td>first</td>
  </tr>
  <tr>
      <td>second</td>
  </tr>
  <tr>
      <td>third</td>
  </tr>
</table>
</div>

<div style="position: static; left : 880px; top : 32px; z-index:0" >
<table align="right" border="1">
<tr><td>
<a href="" onMouseMove="func1( true )"  >
test11</a> 
</td></tr></table>
</div>
</body>
</html>

ТОлько вот засада, менб то появляется, только почему-то сверху отсут появляется. Подскажите в чем дело? Почему мой слой не хочет просто появиться не сдвигая всю страницу?

12345c

Дата 30.1.2007, 14:11 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Потому что он в потоке документа. Чтобы не сдвигал страницу (не был в потоке), блоку надо иметь стиль position:absolute .

Вообще, это долгое и многоплановое дело - делать меню по наведению мыши на абсолютных слоях. Много других вопросов попутно появится. И нигде они толком и едино не расписаны. Каждый делает и замораживает свой код, который надо сильно править, если реализация изменится. Перечислю группы проблем:

1) возможность помещения меню в любое место страницы. Абсолютные слои должны лежать внутри другого слоя или вычислять своё положение;
2) надо, чтобы не закрывался слой, как только мышь покинет область наведения. Особенно важно для многоуровневого меню с несколькими слоями;
3) делать задержку исчезновения появившегося слоя;
4) закрывать всю ветку, если выбирается другая;
5) отмечать текущую выделенную страницу в меню - другим цветом, невозможностью клика;
6) помнить раскрытые пункты меню, если надо, при переходе на другую страницу;
7) помнить, какую страницу пользователь открывал последний раз.

Orient

Дата 30.1.2007, 14:27 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 144
Регистрация: 17.7.2004

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

Спасибо. Сработало :-)

Orient

Дата 31.1.2007, 12:31 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 144
Регистрация: 17.7.2004

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

А если продолжить тему, можно ли как-то узнать координаты ячейки таблицы, которая выводится в основном документе? Чтобы мне можно было нормально спозиционировать мое меню?

Orient

Дата 31.1.2007, 13:40 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 144
Регистрация: 17.7.2004

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

Хотя... сам нашел рабочий код:

Код


function getPosition(obj) {
 var x=0, y=0;
 while(obj) {
    x+=obj.offsetLeft;
    y+=obj.offsetTop;
    obj=obj.offsetParent;
 }
 return {x: x, y:y};
}

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »