JS/Ajax/Php- помогите сообразить, как реализовать

[zavu]

В общем, прошу помощи коллективного разума с подсказками реализации такой штуки: у меня есть пункт меню. При нажатии на него должна появляться табличка со списком в 30 или даже больше итемов (каждый генерируется автоматически из БД для аккаунта).

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

Сейчас стоит вариант с window.open. Т.е. при нажатии на кнопку меню открывается окошко со списком. Но это тоже не слишком удачный вариант, так как переход по ссылкам идет уже в окне этого списка, и страница раскрывается не полностью + сайт получается дробным в нескольких окошках. Вот что у меня сейчас:

<a href='#' onclick="window.open('spisok.php?id=<?php echo $myrow2['id']; ?>', 'spisok', 'width=200,height=500,status=no,resizable=no,top=200,left=200'); return false;"><img border="0" src="images/menu6.png"></a>

Чего в идеале хочу: чтобы эта таблица появлялась на моей же странице, а переходы по ссылкам из таблицы были нормальными переходами как обычно в сайте. Т.е. таблица была этаким подвидом меню, только не выпадающим а... (вот не знаю, как это назвать, поэтому гугль помочь не смог) =( Надеюсь, понятно объяснила =/

 

[vlad_v]

window.open это будет уход с текущей страницы, так что это никак не твое решение.

смотри в сторону использования модальных окон.
есть готовые фреймворки - подключай и радуйся

 

[unsiker]

Тут надо связать в кучу ряд факторов ... ненужны никакие модальные окна, а вот фреймворк все же прийдется исользвать, самый простой и надежный это jquery ( [хватает версии 1.4.2)
алгоритм действий такой,
пункту меню назначается уникальный id ли клас, например
(<a href='#' id="dropdown" ><img src="images/menu6.png"></a>)
Дальше пришется обработчик клика по этой ссылке:

$(document).ready(function() {
  $("#dropdown").click(function() {
   //тут будет событие по клику
   alert("dropdown click ");
 });
});

Дальше нужно выбрать данные с базы, это делается с помощью jqury функции ajax

$.ajax({
  type: "get",
  url:  "getmymenu.php",
  data: "",
  timeout: 5000,
  success: function(data){
   $("#menubox").show('fast');
   $("#menubox").html(data);
  }
});

Вобщем что делает этот код: посылает запрос файлу getmymenu.php. смотрит что он выводит и вставляет данные в контейнер с id menubox, перед этим предварительно делает его видимым.
контейнер с id menubox может выглядеть приблизительно так:
<div id="menubox" style="display: none;position:absolute;"></div>
остается его поднастоить под внешний вид и продумать события по его закрытию

 

[zavu]

Вобщем что делает этот код: посылает запрос файлу getmymenu.php. смотрит что он выводит и вставляет данные в контейнер с id menubox, перед этим предварительно делает его видимым.

Хотела уточнить - сейчас у меня в таком файле здоровенный код целиковой пхп и хтмл страницы с прописанными правами доступа и прочей-прочей, как и на других страницах.
Я так понимаю, что для аякса это не нужно? Выдрать просто сортировку таблички БД, сохранить отдельно и все?

апд по совету Влада нашла модуль reveal, кажется, то, что мне нужно =))