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

@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

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

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

	Как открыть подменю без наложения строчек? 24.08.2009, 15:06. Показов 2349. Ответов 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