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

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

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

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

Спасибо!

@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. Следующий пример - с таблицей.

Код

<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

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

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

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

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

@Rouslan 0 / 0 / 0 Регистрация: 03.10.2007 Сообщений: 76
	27.08.2009, 15:06 [ТС]	3
	Спасибо за помощь! Привожу пример.Например есть меню слева на странице,состоящее из 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	4
	Понял. Постараюсь сегодня выложить код, или, если хочешь, могу кинуть ссылку на один из моих сайтов - там есть меню, только без подменю, а код подменю допишу здесь. p.s. Последнее хочу уточнить: Подменю должно появляться под основным меню? 0

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

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

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

@palva 4240 / 2937 / 687 Регистрация: 08.06.2007 Сообщений: 9,817 Записей в блоге: 4
	27.08.2009, 16:07	8
	<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 [ТС]	9
	To PROFI: ОК. Прикольно, но я тоже занимался пару лет программированием на VB. Но вовремя поменял работу и возвратился к своей основной сфере деятельности - экономике. Сайт заценил, меню прикольное, мне нравится. To PALVA: Спасибо огромное!Работает!Супер! Сейчас еще потестирую...Спасибо!!! 0

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

	28.08.2009, 13:16

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

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

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

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

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

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

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

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