Как открыть подменю без наложения строчек?

@Rouslan · Регистрация: 03.10.2007

Студворк — интернет-сервис помощи студентам

Приветствую! Вот такой вопрос хотел задать.
Есть вертикальное меню, наводя мышь на ячейку, внизу должно появиться подменю, а основное меню должно опуститься вниз, т.е. чтобы не было наложения строчек меню и подменю друг на друга.

Спасибо!

@profi2k · 27.08.2009, 14:34

Все зависит от того, каким образом ты делаешь меню, а также от того, сколько у тебя будет пунктов и подпунктов меню. Я делал так:
сделал таблицу, а затем просто менял ее координаты, при наведении мышкой на ссылку. Для подменю можно сделать еще одну таблицу, которая будет привязана к таблице основного меню. Впрочем, много таблиц для этого можно не делать - просто писать проверку на JS, на какую ссылку пользователь навел указатель мыши и следуя отсюда менять значения пунктов меню программно. Просто поподробнее объясни, плиз, какое меню по уровню вложенности тебе нужно сделать. Тогда возможно я смогу привести код.

@Rouslan · 27.08.2009, 15:06 **[ТС]**

Спасибо за помощь!
Привожу пример.Например есть меню слева на странице,состоящее из 6 строк:
Текст1
Текст2
Текст3
Текст4
Текст5
Текст6

Строка 'Текст1' должна открыть подменю,состоящее,например из:
Субтекст1
Субтекст2
Субтекст3
....
Субтекст10

При этом строки главного меню должны расположиться ниже строк подменю. Убирая курсор с ссылки, подменю скрывается,а главное меню возвращается на прежнее место.
И так со всеми строками главного меню.
Т.е. получается, что уровень вложенности только один: есть главное меню, и есть подменю для каждой строки главного меню.

Спасибо!
Буду ждать ответа.

@profi2k · 27.08.2009, 15:47

Понял. Постараюсь сегодня выложить код, или, если хочешь, могу кинуть ссылку на один из моих сайтов - там есть меню, только без подменю, а код подменю допишу здесь.
p.s. Последнее хочу уточнить: Подменю должно появляться под основным меню?

@Rouslan · 27.08.2009, 15:50 **[ТС]**

Да,кидай ссылку,посмотрю на мастера

Уточнение верное:подменю открывается под основным меню, т.е. вид такой будет после наведения мышки на строку:

ТЕКСТ1
подтекст1
подтекст2
подтекст3
ТЕКСТ2
ТЕКСТ3
....

Спасибо!

@profi2k · 27.08.2009, 15:58

Лучше всего смотреть под IE6.0 - налаживать это все под Нетскейп и Оперу времени не было. http://footballmanager.boom.ru
Там две менюшки, потом будет больше, разумеется новую ячейку вставить не проблема - скрипт подсветки переписывать не надо.
Чуть позже напишу, как добавить подменю.

@profi2k · 27.08.2009, 16:02

Кстати, спасибо за комплимент, но я дизайном и web-программированием занимаюсь только год. Пока я еще профи себя назвать не могу - любитель, пожалуй. Просто я параллельно еще системным прог-гом занимаюсь + языки семейства Visual Basic.:-))

@palva · 27.08.2009, 16:07

<HTML><BODY>
<DIV ONMOUSEOVER='document.getElementById('t1 ').style.display='inline''
ONMOUSEOUT='document.getElementById('t1' ).style.display='none''>
Text1

<DIV ID=t1 style='display:none'>
Subtext11

Subtext12

Subtext13

Subtext14

</DIV></DIV>
<DIV ONMOUSEOVER='document.getElementById('t2 ').style.display='inline''
ONMOUSEOUT='document.getElementById('t2' ).style.display='none''>
Text2

<DIV ID=t2 style='display:none'>
Subtext21

Subtext22

Subtext23

Subtext24

</DIV></DIV>
<DIV ONMOUSEOVER='document.getElementById('t3 ').style.display='inline''
ONMOUSEOUT='document.getElementById('t3' ).style.display='none''>
Text3

<DIV ID=t3 style='display:none'>
Subtext31

Subtext32

Subtext33

Subtext34

</DIV></DIV>
</BODY></HTML>

Под мозиллой тоже работает, но с какими-то странностями.

@Rouslan · 27.08.2009, 16:20 **[ТС]**

To PROFI:
ОК. Прикольно, но я тоже занимался пару лет программированием на VB. Но вовремя поменял работу и возвратился к своей основной сфере деятельности - экономике.

Сайт заценил, меню прикольное, мне нравится.

To PALVA:
Спасибо огромное!Работает!Супер! Сейчас еще потестирую...Спасибо!!!

@Rouslan · 27.08.2009, 16:44 **[ТС]**

Интересно, а как можно эту структуру поместить в таблицу? Т.е. каждая строчка сидит в ячейке таблицы...А то получается, что в приведенном коде подменю открывается не только, когда мышка наводится непосредственно на текст, но и в другом любом месте на экране вдоль этой строки.

@profi2k · 27.08.2009, 17:40

Просто отследи координаты div'ов, если я правильно понял.
Вроде, это свойства offsetLeft и offsetTop, или Left и Top - не помню точно. Еще есть pixelLeft и pixelTop - эти, если я не ошибаюсь можно изменять.

@profi2k · 27.08.2009, 17:41

Для того, чтобы изменять видимость лучше использовать свойство visibility.

@Rouslan · 27.08.2009, 18:04 **[ТС]**

Я поменял ДИВы на SPAN и теперь все в порядке..
Теперь пытаюсь все это поместить в таблицу....хотя может это и не обязательно...

@palva · 27.08.2009, 18:08

Что-то с visibility у меня не получилось. Меню не схлапывается. Вот в следующем примере первый пункт меню так сделан.
А в таблицу поместить можно еще можно попробовать вместо тэга DIV применить тэг SPAN. Следующий пример - с таблицей.

Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<HTML><BODY>
<TABLE><TR><TD>
<DIV ONMOUSEOVER='document.getElementById('t1').style.visibility='visible''
     ONMOUSEOUT='document.getElementById('t1').style.visibility='hidden''>
Text1
 
<DIV ID=t1 style='visibility:hidden'>
 Subtext11
 
 Subtext12
 
 Subtext13
 
 Subtext14
 
</DIV></DIV>
<DIV ONMOUSEOVER='document.getElementById('t2').style.display='inline''
     ONMOUSEOUT='document.getElementById('t2').style.display='none''>
Text2
 
<DIV ID=t2 style='display:none'>
 Subtext21
 
 Subtext22
 
 Subtext23
 
 Subtext24
 
</DIV></DIV>
<DIV ONMOUSEOVER='document.getElementById('t3').style.display='inline''
     ONMOUSEOUT='document.getElementById('t3').style.display='none''>
Text3
 
<DIV ID=t3 style='display:none'>
 Subtext31
 
 Subtext32
 
 Subtext33
 
 Subtext34
 
</DIV></DIV>
</TD></TR></TABLE>
</BODY></HTML>

@profi2k · 27.08.2009, 18:46

А где ты именно visibility писал? Я писал в дивке - работает.

@profi2k · 27.08.2009, 18:47

Ааа, вижу. Для элементов таблицы это вроде не работает.

@profi2k · 27.08.2009, 18:50

DIV это всего лишь навсего тэг, который объединяет несколько элементов в группу и позволяет изменять свойства всей группы.
Поэтому нет большого смысла убирать его и менять на span.
Небольшой совет: проще сделать табличку для меню и написать скрипты на отдельной страничке, отладить, а потом вставить на нужную страницу. По крайней мере для меня так проще.:-))

@profi2k · 27.08.2009, 18:52

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

@SuicidE · 28.08.2009, 10:07

Люди добрые, пожалуйсто протестируйте и моё меню.
http://www23.brinkster.com/trupak/html.html

@profi2k · 28.08.2009, 13:16

Классно! Честное слово!

Новые блоги и статьи Все статьи Все блоги /
Видеокарта простаивает ночами? Вот 4 проекта, которые загрузят её наукой Programma_Boinc 10.04.2026 Видеокарта простаивает ночами? Вот 4 проекта, которые загрузят её наукой Если на Windows стоит дискретная NVIDIA или AMD — можно отдать её вычислительную мощность реальным исследованиям. . . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .

@Rouslan 0 / 0 / 0 Регистрация: 03.10.2007 Сообщений: 76

	Как открыть подменю без наложения строчек? 24.08.2009, 15:06. Показов 2394. Ответов 19 Метки нет (Все метки) Приветствую! Вот такой вопрос хотел задать. Есть вертикальное меню, наводя мышь на ячейку, внизу должно появиться подменю, а основное меню должно опуститься вниз, т.е. чтобы не было наложения строчек меню и подменю друг на друга. Спасибо! 0

@profi2k 0 / 0 / 0 Регистрация: 13.09.2008 Сообщений: 120
	27.08.2009, 14:34
	Все зависит от того, каким образом ты делаешь меню, а также от того, сколько у тебя будет пунктов и подпунктов меню. Я делал так: сделал таблицу, а затем просто менял ее координаты, при наведении мышкой на ссылку. Для подменю можно сделать еще одну таблицу, которая будет привязана к таблице основного меню. Впрочем, много таблиц для этого можно не делать - просто писать проверку на JS, на какую ссылку пользователь навел указатель мыши и следуя отсюда менять значения пунктов меню программно. Просто поподробнее объясни, плиз, какое меню по уровню вложенности тебе нужно сделать. Тогда возможно я смогу привести код. 0

@Rouslan 0 / 0 / 0 Регистрация: 03.10.2007 Сообщений: 76
	27.08.2009, 15:06 [ТС]
	Спасибо за помощь! Привожу пример.Например есть меню слева на странице,состоящее из 6 строк: Текст1 Текст2 Текст3 Текст4 Текст5 Текст6 Строка 'Текст1' должна открыть подменю,состоящее,например из: Субтекст1 Субтекст2 Субтекст3 .... Субтекст10 При этом строки главного меню должны расположиться ниже строк подменю. Убирая курсор с ссылки, подменю скрывается,а главное меню возвращается на прежнее место. И так со всеми строками главного меню. Т.е. получается, что уровень вложенности только один: есть главное меню, и есть подменю для каждой строки главного меню. Спасибо! Буду ждать ответа. 0

@profi2k 0 / 0 / 0 Регистрация: 13.09.2008 Сообщений: 120
	27.08.2009, 15:47
	Понял. Постараюсь сегодня выложить код, или, если хочешь, могу кинуть ссылку на один из моих сайтов - там есть меню, только без подменю, а код подменю допишу здесь. p.s. Последнее хочу уточнить: Подменю должно появляться под основным меню? 0

@Rouslan 0 / 0 / 0 Регистрация: 03.10.2007 Сообщений: 76
	27.08.2009, 15:50 [ТС]
	Да,кидай ссылку,посмотрю на мастера Уточнение верное:подменю открывается под основным меню, т.е. вид такой будет после наведения мышки на строку: ТЕКСТ1 подтекст1 подтекст2 подтекст3 ТЕКСТ2 ТЕКСТ3 .... Спасибо! 0

@profi2k 0 / 0 / 0 Регистрация: 13.09.2008 Сообщений: 120
	27.08.2009, 15:58
	Лучше всего смотреть под IE6.0 - налаживать это все под Нетскейп и Оперу времени не было. http://footballmanager.boom.ru Там две менюшки, потом будет больше, разумеется новую ячейку вставить не проблема - скрипт подсветки переписывать не надо. Чуть позже напишу, как добавить подменю. 0

@profi2k 0 / 0 / 0 Регистрация: 13.09.2008 Сообщений: 120
	27.08.2009, 16:02
	Кстати, спасибо за комплимент, но я дизайном и web-программированием занимаюсь только год. Пока я еще профи себя назвать не могу - любитель, пожалуй. Просто я параллельно еще системным прог-гом занимаюсь + языки семейства Visual Basic.:-)) 0

@palva 4278 / 2970 / 693 Регистрация: 08.06.2007 Сообщений: 9,930 Записей в блоге: 5
	27.08.2009, 16:07
	<HTML><BODY> <DIV ONMOUSEOVER='document.getElementById('t1 ').style.display='inline'' ONMOUSEOUT='document.getElementById('t1' ).style.display='none''> Text1 <DIV ID=t1 style='display:none'> Subtext11 Subtext12 Subtext13 Subtext14 </DIV></DIV> <DIV ONMOUSEOVER='document.getElementById('t2 ').style.display='inline'' ONMOUSEOUT='document.getElementById('t2' ).style.display='none''> Text2 <DIV ID=t2 style='display:none'> Subtext21 Subtext22 Subtext23 Subtext24 </DIV></DIV> <DIV ONMOUSEOVER='document.getElementById('t3 ').style.display='inline'' ONMOUSEOUT='document.getElementById('t3' ).style.display='none''> Text3 <DIV ID=t3 style='display:none'> Subtext31 Subtext32 Subtext33 Subtext34 </DIV></DIV> </BODY></HTML> Под мозиллой тоже работает, но с какими-то странностями. 0

@Rouslan 0 / 0 / 0 Регистрация: 03.10.2007 Сообщений: 76
	27.08.2009, 16:20 [ТС]
	To PROFI: ОК. Прикольно, но я тоже занимался пару лет программированием на VB. Но вовремя поменял работу и возвратился к своей основной сфере деятельности - экономике. Сайт заценил, меню прикольное, мне нравится. To PALVA: Спасибо огромное!Работает!Супер! Сейчас еще потестирую...Спасибо!!! 0

@Rouslan 0 / 0 / 0 Регистрация: 03.10.2007 Сообщений: 76
	27.08.2009, 16:44 [ТС]
	Интересно, а как можно эту структуру поместить в таблицу? Т.е. каждая строчка сидит в ячейке таблицы...А то получается, что в приведенном коде подменю открывается не только, когда мышка наводится непосредственно на текст, но и в другом любом месте на экране вдоль этой строки. 0

@profi2k 0 / 0 / 0 Регистрация: 13.09.2008 Сообщений: 120
	27.08.2009, 17:40
	Просто отследи координаты div'ов, если я правильно понял. Вроде, это свойства offsetLeft и offsetTop, или Left и Top - не помню точно. Еще есть pixelLeft и pixelTop - эти, если я не ошибаюсь можно изменять. 0

@profi2k 0 / 0 / 0 Регистрация: 13.09.2008 Сообщений: 120
	27.08.2009, 17:41
	Для того, чтобы изменять видимость лучше использовать свойство visibility. 0

@Rouslan 0 / 0 / 0 Регистрация: 03.10.2007 Сообщений: 76
	27.08.2009, 18:04 [ТС]
	Я поменял ДИВы на SPAN и теперь все в порядке.. Теперь пытаюсь все это поместить в таблицу....хотя может это и не обязательно... 0

@profi2k 0 / 0 / 0 Регистрация: 13.09.2008 Сообщений: 120
	27.08.2009, 18:46
	А где ты именно visibility писал? Я писал в дивке - работает. 0

@profi2k 0 / 0 / 0 Регистрация: 13.09.2008 Сообщений: 120
	27.08.2009, 18:47
	Ааа, вижу. Для элементов таблицы это вроде не работает. 0

@profi2k 0 / 0 / 0 Регистрация: 13.09.2008 Сообщений: 120
	27.08.2009, 18:50
	DIV это всего лишь навсего тэг, который объединяет несколько элементов в группу и позволяет изменять свойства всей группы. Поэтому нет большого смысла убирать его и менять на span. Небольшой совет: проще сделать табличку для меню и написать скрипты на отдельной страничке, отладить, а потом вставить на нужную страницу. По крайней мере для меня так проще.:-)) 0

@profi2k 0 / 0 / 0 Регистрация: 13.09.2008 Сообщений: 120
	27.08.2009, 18:52
	А вообще можно придумать очень много способов реалиации меню - кому что больше нравится. Я же этот способ сам придумал - после того, как не смог найти прогу, создающую меню такое, какое я хочу. Проще самому сделать:-)))) 0

@SuicidE 0 / 0 / 1 Регистрация: 10.04.2009 Сообщений: 246
	28.08.2009, 10:07
	Люди добрые, пожалуйсто протестируйте и моё меню. http://www23.brinkster.com/trupak/html.html 0

@profi2k 0 / 0 / 0 Регистрация: 13.09.2008 Сообщений: 120
	28.08.2009, 13:16
	Классно! Честное слово! 0