| Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате |
| Форум программистов > JavaScript: Общие вопросы > Построение вёрстки меню |
| Автор: ОнКофе 14.3.2006, 11:59 | ||||||
и нужно вставить эти названия и сами ссылки в таблицу
ПРИМЕЧАНИЕ: нужна такая функция-конструктор, которая будет заполнять эту таблицу автоматически... то есть, чтобы я в любой момент мог добавить в массив новую ссылку, и таблица сама перестраивалась бы. Если кто-нибудь знает - помогите! ЗАРАНЕЕ БЛАГОДАРЕН!
|
| Автор: Sardar 14.3.2006, 12:37 |
А своих попыток не было?  При нулевом коде обычно обращаються в раздел "работа". Наверное в конце недели поставлю сюда одну интересную менюшку с подробным, написал на днях для нашего форума, там будет и построение вёрстки. Совет: убирай таблицы, делай меню на списке (UL), задавай стили, будет гораздо проще работать Название давай осмысленное, просто "JS" рискует упасть в мусор не прочитанным. |
| Автор: Ciber SLasH 14.3.2006, 14:36 | ||||||
| Объясняю алгоритм: 1) обходишь в цикле все свойства объекта:
где i — будет текущим свойством объекта при каждой итерации; Obj — твой объект с менюхами 2) в цикле делаешь проверку текущего свойства на то, содержит ли он в себе другой объект, т.е. подменю:
3) если проверка дала положительный результат, то проходишь по всем свойствам этого подобъекта:
ну и при каждом проходе соответственно строишь необходимую разметку. Просто заведи переменную и прибавляй постепенно к ней разметку, а после — присоединяешь эту разметку к необходимому элементу. |
| Автор: Ciber SLasH 14.3.2006, 15:08 |
| Стоп, тут вообще-то не так, даже меню с помощью этого конструктора неправильно создаётся. Тут нужно подругому. |
| Автор: ОнКофе 14.3.2006, 15:16 | ||
Вы можете написать готовый результат? Я думаю, что это будет многим интересно! |
| Автор: Ciber SLasH 14.3.2006, 15:22 | ||
Да ничего тут интересного вообще нет, даже с таблицами подход не очень рулит. Вот что я намудрил:
|
| Автор: Sardar 14.3.2006, 15:26 | ||
| ОнКофе, делаешь древовидное меню? Тогда забей на таблицы, пользуй списками (да и вообще в любом меню списками), структура уже есть, перебирать обьекты умеем (смотри пост Ciber SLasH'a), а вёрстку создаём путём:
Так в идеале строиться вёрстка, для древовидных структур всё предельно просто если функция вызывает себя рекурсивно. |
| Автор: Ciber SLasH 14.3.2006, 15:54 |
| Отредактировал свой предыдущий пост, а вообще почитай эту статью: http://webmascon.com/topics/coding/42a.asp |
| Автор: ОнКофе 14.3.2006, 16:05 |
| Ciber SLasH, http://webmascon.com/forum/viewtopic.php?t=157&postdays=0&postorder=asc&start=135&sid=47a10050a9c0246cdbfd5847e217135f Я там принимал обсуждение (он_кофе)... полностью понял конструкцию меню построенного на списках с использованием списков, но к сожалению мне нужно пользоваться таблицами... такие условия... поэтому я и просил о помощи... Сейчас посмотрю как ты передела! ОЧЕНЬ благодарен Добавлено @ 16:09 Ciber SLasH, а вот посмотри, я попробовал вставить var c = new MainMenuItem("пункт 3", "index3.htm", ["подменю 3.1", "подменю 3.2"], ["new5.htm", "new6.htm"]); но 3 пункт меню у меня не показывает как быть? А все понял.. нашел причину.... Вот сюда добавим + buildMenu(с) и получим... <input type="button" onClick='document.getElementById("menu").innerHTML = buildMenu(a) + buildMenu(b) + buildMenu(с)' value="Создать меню"> Тогда такой вот вопрос, а как сделать, чтобы меню сразу отображалось, ну чтобы не нужно было нажимать на кнопку... и при этом не сувать вызов функции в <body> ??? Есть ИДЕИ? Думаю что если ты еще добавишь описание всего того что ты написал, то это очень многим пригодится. Сейчас я уже не за свои интересы говорю! |
| Автор: Ciber SLasH 14.3.2006, 16:31 |
| Отредактировал свой пост с кодом. |
| Автор: ОнКофе 14.3.2006, 16:37 |
| Ciber SLasH, Великолепно!!! Я ПРОСТО В ВОСТОРГЕ !!! Такой вопрос.... а это все как-нить можно на asp перенести? будет в asp работать? А у тебя есть ася? |
| Автор: 12345c 14.3.2006, 16:40 |
| Есть многочисленные примеры меню на сайтах со скриптами - http://script.woweb.ru/index.htm/c/65 и подобные, разделы "Навигация". |
| Автор: Ciber SLasH 14.3.2006, 16:42 | ||
Понятия не имею, я с ASP-ом не знаком. |
| Автор: ОнКофе 14.3.2006, 16:46 | ||
не против если я с твоим скриптом убегу в раздел asp ? ГЫ! Добавлено @ 16:53 Ciber SLasH, еще наткнулся на непонятное.... а как сделать пункт меню например второй, чтобы у него не было подпунктов??? |
| Автор: Ciber SLasH 14.3.2006, 16:53 |
| Да пожалуйста, хотя стоит заглянуть по ссылке, которую дал 12345c |
| Автор: ОнКофе 14.3.2006, 16:58 |
| Ciber SLasH, оно может и стоит заглянуть... только ведь там скрип скачаешь и все.. и никто не поможет разобраться, никто не поможет переделать.... такие вот дела.... еще наткнулся на непонятное.... а как сделать пункт меню например второй, чтобы у него не было подпунктов??? |
| Автор: Ciber SLasH 14.3.2006, 17:02 | ||
Просто пишешь пустые массивы:
|
| Автор: ОнКофе 14.3.2006, 17:05 | ||||
попробовал... тогда получается что ячейка таблицы по ширине меньше тех ячеек, которые с подменю... как быть? |
| Автор: Ciber SLasH 14.3.2006, 17:10 | ||
Поменять стиль на такой:
|
| Автор: ОнКофе 14.3.2006, 17:15 |
| Ciber SLasH, ОГРОМНОЕ СПАСИБО!!!! только вот теперь такой вопрос!!! А как мне определить цвет ячеек, чтобы у меню был одного цвета а у подменю другого!??? |
| Автор: Ciber SLasH 14.3.2006, 17:20 |
| В 23-строке и в 28-строке в генерируемой ячейке пропиши класс, а затем опиши класс в стилях. Вообще-то это уже к JS не имеет отношение, это в "Вёрстка web-сайтов". |
| Автор: ОнКофе 14.3.2006, 17:24 |
| Ciber SLasH, так... разобрался.... вот еще вопрос! а можно сделать чтобы подменю было отдельным слоем? ну чтобы его можно было потом сбоку приделать... тоесть подводишь мышку к пункту меню, а подменю вылазит сбоку... Я понимаю что это все переделать нужно, просто если есть возможность подскажи..., так сказать дай направление... |
| Автор: Ciber SLasH 14.3.2006, 17:33 |
| Поставь обработчики onMouseOver, onMouseOut событий на DIV с менюхой. По onMouseOver — показываешь весь DIV (display: block), по onMouseOut — скрываешь (display: none). |
| Автор: ОнКофе 14.3.2006, 17:36 |
| Ciber SLasH, не пойму куда <DIV> засунуть нужно .... подскажи, пожалуйста! а во всех браузерах работать будет? Добавлено @ 17:43 Ciber SLasH, попоробовал изменить класс вот так var content = "<table>\n<tr><td class="menu"><a href='"+obj.Link+"'>"+obj.Title+"</a></td></tr>\n"; ничего не получилось... выходит пустое окно... в стилях этот клас прописал... КАК БЫТЬ? |
| Автор: ОнКофе 14.3.2006, 17:59 | ||
| Ciber SLasH, вот еще оказывается что мне нужно, чтобы у всех <DIV> id автоматически выстанавливался в очередном порядке начиная с 1.... , но только чтобы у тех пунктов меню, у которых нет подменю, id <div> был равен null вот например
Что-то примерно так.... ЗАРАНЕЕ БЛАГОДАРЕН!!! |
| Автор: Ciber SLasH 14.3.2006, 18:24 | ||||||||
Никуда его засовывать не надо. Его надо по умолчанию скрыть и определить элемента, на который при наведении грызуном будет показываться этот DIV.
Ну так кавычки аедь обрывают строку! Их либо надо экранировать \", либо использовать одинарные.
Ну так определить нужно глобальную переменную, которую прописывать в ID при генерации таблицы, а следом увеличивать эту переменную.
Условие можно вставить: если длина массив подменю 0, то вставить null. Это уже елементарщина пошла, тут всего-лишь нужно чуть-чуть напрячь мозг. |
| Автор: ОнКофе 14.3.2006, 18:37 |
| Ciber SLasH, я понимаю что элементарщина, но так ведь это для тебя оно так, для меня иначе... все равно не могу понять как <DIV> сделать чтобы он не к каждой ячейке прописывался а только к тем которые лежат в подменю.... и как описать условие если длина массив подменю 0, то вставить null, тоже не пойму... После того как присвоил класс для <td> между ячейками стало видно пространсто... это можно как-нибудь избежать? с этим разобрался... вместо <table> написал <table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">\n<tr><td class=\"menu\"> Прошу о помощи! Еще раз прошу написать код! СПАСИБО! |
| Автор: Ciber SLasH 14.3.2006, 19:41 | ||
|
| Автор: ОнКофе 14.3.2006, 19:48 | ||
| Ciber SLasH, немного не то.... но это я виноват.. поспешил.... давай по порядку разберемся... нужно чтобы в конечном счете получилось вот так
так можно сделать? |
| Автор: Ciber SLasH 14.3.2006, 20:19 | ||
Вот ещё вариант через NODE-ы:
|
| Автор: ОнКофе 14.3.2006, 20:23 |
| Ciber SLasH, через ноды не работает... да и ты не в том направлении пошел... посмотрий мое прошлое сообщение! |
| Автор: Ciber SLasH 14.3.2006, 20:29 |
| Ну ведь разметка такая и получается через NODE-ы. Раскомментируй 60-ю строку и посмотри разметку. А NODE-ы почему-то при таком раскладе работают только в Opera, FireFox, а в IE — нет. |
| Автор: ОнКофе 14.3.2006, 20:35 |
| Ciber SLasH, блин мне IE - это основное!!! это главное так сказать!!! ты можешь отвлечься от нодов? вернись к старому!... нужно теперь только <DIV> каким-то образом определить! |
| Автор: Ciber SLasH 14.3.2006, 20:45 |
| Почему-то DIV-ы не хотят становится на места. Как я понял они должны обрамлять строки таблицы, а они почему-то ничего не обрамляют. С этой багой я не знаю как бороться. |
| Автор: ОнКофе 14.3.2006, 20:48 |
| Ciber SLasH, я верю в тебя!!! ты можешь!!! нужно перед каждым началом подменю поставить <DIV> и после того как массив с подменю закончится тоже поставить </div> ТЫ СМОЖЕШЬ!!! |
| Автор: Ciber SLasH 14.3.2006, 20:51 | ||
Именно так и не получается, что-то где-то глючит и разметка получается другая. Добавлено @ 20:52 А для чего эти DIV-ы? |
| Автор: ОнКофе 14.3.2006, 20:59 | ||
| Ciber SLasH, смотри а вот так сможешь сделать???
|
| Автор: Ciber SLasH 14.3.2006, 21:09 |
| В таком варианте DIV-ы становятся абсолютно ненужными, т.к. ID-шник можно засунуть внутрь TABLE. Добавлено @ 21:11 Вместо DIV, в строках 20 и 27 пропиши TABLE и будет тебе счастье. |
| Автор: ОнКофе 15.3.2006, 00:47 |
| Ciber SLasH, пожалуйста напиши как это все будет выглядеть! И чтобы номера у id автоматически проставлялись и в случае отсутствия подменю ставился null... Смотри как много народу просматривает наш топик!!! Наверно интересно! Думаю что всем новичкам есть что тут почитать!!! Жду с нетерпением твоего кода!!! У тебя аси нет? |
| Автор: Ciber SLasH 15.3.2006, 17:00 | ||
для скрытия alert-а, закомментируй 39-строку. |
| Автор: ОнКофе 16.3.2006, 19:11 |
| Ciber SLasH, хм..... не плохо!! ЗДОРОВО!!! а как сделать чтобы оно сразу появлялось, чтобы не нужно было подводить мышь к надписи "Меню здесь"??? |
| Автор: Ciber SLasH 16.3.2006, 19:19 | ||
Но ведь тогда это уже не меню, а простая таблица... А так вообще адаляешь DIV, где прописаны обработчики событий (оставляешь только DIV с id='menu') и в стилях у #menu убираешь display: none |
| Автор: ОнКофе 17.3.2006, 19:25 |
| Ciber SLasH, прикольно!!! СПАСИБо! |
| Автор: ОнКофе 20.3.2006, 13:12 | ||
Если внутри <div> стоит <iframe> то onMouseOut не работает! Как быть? |
| Автор: Ciber SLasH 20.3.2006, 16:31 | ||||
Ставь onMouseOut в <iframe>:
|
| Автор: ОнКофе 20.3.2006, 17:43 |
| Ciber SLasH, а разве у iframe есть onMouseOut или подобное свойство??? Попробовал сейчас и ничего!!! Не работает так!! Как-то по другому нужно! |
| Автор: Ciber SLasH 21.3.2006, 11:21 | ||
Но ведь работает, я проверял в IE6, FireFox 1.5.0.1, Opera 7.54, Opera 8.51. |
| Автор: ОнКофе 21.3.2006, 13:25 | ||||
| Ciber SLasH, у меня OPERA вот это
вообще не воспринемает... подводишь мышкой к пункту меню, потом пытаешься передти в это подменю которое iframe показывает, но как только двигаешь мышкой подменю сразу убирается... хотя в других браузерах нормально!!! Попробовал вот так:
- не помогло.... Opera - мозг парит Что можно придумать? |
| Автор: Ciber SLasH 22.3.2006, 03:37 |
| Приведи весь код, который ты проверяешь. Я уже запутался в хронологии постов... |
| Автор: ОнКофе 22.3.2006, 11:55 | ||||
так работает везде:
и все хорошо, кроме одного случая, когда выпадающее подменю попадает на элементы формы или flash-анимацию или applet, то подменю оказывается под ними... пробовал z-index - не помагает flash все равно сверху... попробовал сделать через iframe вот так:
работает нормально везде, но вот в Opera работать не хочет, как только курсор попадает на слой срабатывает onMouseOut="showdiv('2', 0)".... Что делать? Главное что везде нормально все работает, только в Opera не хочет!!! |
| Автор: ОнКофе 22.3.2006, 16:17 | ||||||
| Ciber SLasH, слушай, я кажется кое что придумал!!! попробовал работает даже в опере! Мне вот только теперь одну вещь нужно выяснить... суть такова: в целом вся страница разбита на две области - правая область и левая область. Можно сделать чтобы при наведении курсора подменю появлялось, но не убиралось, то есть onMouseOut="showdiv('1', 0) не писать!!! Вернее написать но уже не в ячейке а в <div> смотри:
В левой находится меню, в правой контекст...
в этом случае все будет работать как и прежде только с одним отличием... в Opera слои не будут убираться, они будут показываться и оставатся на месте... тогда мы сможем перемещаться по сылкам которые находятся в IFRAME... а чтобы они убирались мы в правой области
поставим событие onMouseOver="showdiv('1',0);showdiv('2',0);", тоесть когда в Opere курсор будут перемещаться с подменю, он будетпопадать в правую область где стоит обработчик события - "прятать слой"... В этом случае везде работает нормально, даже в этой самой Opera, теперь собственно мой вопрос.... Понимаешь у меня довольно много пунктов меню и их подменю, поэтому не удобно писать там где мне нужно onMouseOver="showdiv('1',0);showdiv('2',0); ................................ showdiv(' N ',0);" - чтобы все слои закрывались когда курсор уходит из области слоя (специально для Opera)... Можно ли эту запись сократить? Как сделать чтобы вызвать одну функцию и она закрывала все эти <div> |
| Автор: ОнКофе 22.3.2006, 20:51 |
| Ciber SLasH, переделал я так как написал выше.... все стало тормозить.... из-за одной Opera столько проблем... Ты не нашел решения этой задачки? |
| Автор: Ciber SLasH 23.3.2006, 10:03 | ||
Можно ещё так выкрутиться:
|
| Автор: ОнКофе 23.3.2006, 11:34 | ||
| Ciber SLasH, ты предлогаешь засунуть подменю на пункты меню? чтобы Opera не замечала уход курсора с ячейки что ли? А можно это сделать только для Opera а в остальных браузерах чтобы нормально было? ну то есть вот тут
если пользователь зашел под Opera оставить left:90px, а если под любым другим сделать left:100px Можно так как-нибудь? Я пробовал у меня что-то не очень получилось.. |
| Автор: Ciber SLasH 23.3.2006, 12:27 |
| Смотри мой предыдущий код, я его исправил. |
| Автор: ОнКофе 23.3.2006, 12:43 | ||
| Ciber SLasH, просто сделал меню <div> !!!!!!!!!!! И ВСЕ??? Все гениальное просто??? :-) смотри только я стал увеличивать меню и оно уже не работает... ты принцип то не рассказал
Добавлено @ 12:56 Ciber SLasH, все дошдо до меня!!! просто ширину ячейки нужно сделать больше ширины <div> и будет тогда мне счастье!!! Ну что думаю вопрос решен!!!! МОЙ ТЕБЕ РЕСПЕКТ!!!! Ты лучший!!!!! А ведь народ до сих пор думает как же сделать...а ты не стал думать, ты просто сделал!!!! Надеюсь что больше непредвиденных ситуаций не случится.... но пока не буду закрывать тему!!! А вдруг еще нужно будет что-нить по этому вопросу узнать... Думаю этот топик можно добавить в учебное пошаговое пособие!!! |
| Автор: ОнКофе 23.3.2006, 13:51 | ||
Ciber SLasH, вот что не получается... я бы хотел чтобы подменю немного (padding-left:2) отступало от основного меню.... попробовал - ничего не вышло... Opera снова начинает парить мозг... можно ли это как-нибудь сделать? Или хотя бы чтобы в Opera отступа не было а во всех других браузерах отступ был???
|
| Автор: Ciber SLasH 23.3.2006, 14:35 |
| Поставь: 1) в классе menu: width: 198px 2) в DIV-ах: left:200px |
| Автор: ОнКофе 23.3.2006, 14:52 |
| Ciber SLasH, тогда Mozilla FireFox накладывает подменю на пункты меню и вообще никакого отступа не получается... а в Opera и IE нормально! Добавлено @ 14:57 Ciber SLasH, вообще нужно просто отслеживать когда пользователь зашел с Opera и тогда просто накладывать подменю на меню..... и все! |
| Автор: Ciber SLasH 23.3.2006, 16:00 | ||
|
| Автор: ОнКофе 23.3.2006, 16:20 | ||
Ciber SLasH, а я просто вместо цвета ячейки
поставил картинку, то есть убрал background-color:#000000, а вместо нее поставил пиксельную картинку и все стало нормально... а зачем ты в ID добавил "s" ??? Что просто цифры нельзя ?? как было раньше id=1 не правильно? |
| Автор: ОнКофе 23.3.2006, 17:57 |
| Ciber SLasH, смотри, у меня под меню идет блок 150px я попробовал сделать чтобы и меню было шириной 150px но Mozilla FireFox постоянно что-то свое выдает.... Как быть-то? |
| Автор: Ciber SLasH 23.3.2006, 21:01 | ||
ID-шники и имена не должны начинаться с цифры. FireFox в логах ошибку выдаёт. В таком варианте как щас, нужно постоянно подстраивать 3 значения: 1) если увеличиваешь длину ячейки таблицы с меню <td width="220">, то 2) нужно подстроить длину меню: .menu{width: 198px; 3) и подстроить отступ подменю: .submenu {left: 212px; но главное, чтобы отступ подменю не превышал длину ячейки таблицы с меню. |
| Автор: ОнКофе 24.3.2006, 11:23 |
| Ciber SLasH, все-равно не получается... даже тот код который ты последний раз написал... в Opera и IE отступ подменю от меню одного размера а в Mozilla FireFox совсем другого размера... Когда добился более менее одинакового результата во всех бразерах стало ясно еще одно.... пока в IFRAME указан src которого нет, то все работает... но как только укажешь реальный адрес, чтобы туда подгружалось подменю, то переход в подменю невозможен - ни в Mozilla ни в Opera... как только ставишь src на несуществующий url то все работает!!! |
| Автор: Ciber SLasH 24.3.2006, 20:14 | ||
Это наверно связано с проблемой безопасности и все браузеры, кроме IE, не разрешают переход по ссылкам.  Придётся наверно тебе забить на IFRAME. |
| Автор: ОнКофе 28.3.2006, 16:09 | ||
| решил снова поднять эту тему..... вот такой вопрос помнишь ты писал:
А можно ли к нему еще как-нибудь добавить задержку, ну чтобы по истечении определенного времени меню само убиралось? |
| Автор: Ciber SLasH 28.3.2006, 16:21 | ||
Вызывай функцию так:
|
| Автор: ОнКофе 28.3.2006, 17:02 |
| понятно... спасибо!!! Ну теперь точно тема закрыта!!!!  |
| Автор: ОнКофе 29.3.2006, 14:51 | ||
пишу
и не работает, что не так??? |
| Автор: Ciber SLasH 29.3.2006, 14:56 | ||
|
| Автор: ОнКофе 3.4.2006, 13:56 |
| Opera оказывается вообще забила на iframe... стоит iframe или не стоит ей плевать, она все-равно показывает flash баннер сверху слоя!!! |
