Перейти к содержанию
СофтФорум - всё о компьютерах и не только

Создание выпадающего меню


Рекомендуемые сообщения

Ты имеешь в виду это?

<html><head><script>function show(){document.all.mpp.style.visibility="visible";}function hide(){document.all.mpp.style.visibility="hidden";}</script></head><body><map name="map1" onmouseover="show()" onmouseout="hide()"><area coords="0,0,150,50" href="javascript:alert('Нажат 1й кусок')"><area coords="0,50,150,100" href="javascript:alert('Нажат 2й кусок')"><area coords="0,100,150,150" href="javascript:alert('Нажат 3й кусок')"></map><img src="1.gif" style="top:5px;left:5px" onmouseover="show()" onmouseout="hide()"><img id="mpp" src="2.gif" style="visibility:hidden;position:absolute;top:5px;left:155px" usemap="#map1"></body></html>
Ссылка на комментарий
Поделиться на другие сайты

Пример не рабочий, потому результат не смог увидеть. Выложи картинки тоже. (1.gif и 2.gif)

Ссылка на комментарий
Поделиться на другие сайты

Пример не рабочий, потому результат не смог увидеть. Выложи картинки тоже. (1.gif и 2.gif)

Пример очень даже рабочий(по крайней мере под IE). Картинки выложить не могу(постов не хватает), да это и не нужно. Первая картинка - кнопка, на которую надо навести мышь для появления менюшки, вторая - сама менюшка, разбитая на 3 части.

Ссылка на комментарий
Поделиться на другие сайты

Ты наверное не понял, нужно вот такое меню

Изменено пользователем Emotion
Ссылка на комментарий
Поделиться на другие сайты

Наверно такое...

прости что такой маленький код... ;)

просто случайно на коком-то сайте такое надыбал...(да простят меня хозяева того сайта - это в благих целях...)

<table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><img src='/_images/treeview/m-06.gif'></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><a href='/proc.html?id=33768.32457&action=close'><img src='/_images/treeview/m-03.gif'></a></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td width='99%' nowrap><img src='/_images/menu/folder.gif'><a href='/articles/article32457.html' alt='Библиотека'> Библиотека</a></td></tr><tr><td background='/_images/treeview/m-07.gif'></td><td colspan=2><table cellpadding=0px cellspacing=0px><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-05.gif'></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><a href='/proc.html?id=33768.32459&action=close'><img src='/_images/treeview/m-03.gif'></a></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td width='99%' nowrap><img src='/_images/menu/folder.gif'><a href='/articles/article32459.html' alt='CSS'> CSS</a></td></tr><tr><td background='/_images/treeview/m-07.gif'></td><td colspan=2><table cellpadding=0px cellspacing=0px><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-05.gif'></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><a href='/proc.html?id=33768.32461&action=open'><img src='/_images/treeview/m-02.gif'></a></td></tr><tr><td height=48%></td></tr></table></td><td width='99%' nowrap><img src='/_images/menu/folder.gif'><a href='/articles/article32461.html' alt='Cвязывание c документом'> Cвязывание</a></td></tr><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-05.gif'></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><a href='/proc.html?id=33768.32471&action=open'><img src='/_images/treeview/m-02.gif'></a></td></tr><tr><td height=48%></td></tr></table></td><td width='99%' nowrap><img src='/_images/menu/folder.gif'><a href='/articles/article32471.html' alt='Группы CSS-свойств '> Группы CSS-свойств </a></td></tr><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-05.gif'></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><a href='/proc.html?id=33768.32701&action=open'><img src='/_images/treeview/m-02.gif'></a></td></tr><tr><td height=48%></td></tr></table></td><td width='99%' nowrap><img src='/_images/menu/folder.gif'><a href='/articles/article32701.html' alt='Селекторы'> Селекторы</a></td></tr><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-05.gif'></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><a href='/proc.html?id=33768.32733&action=open'><img src='/_images/treeview/m-02.gif'></a></td></tr><tr><td height=48%></td></tr></table></td><td width='99%' nowrap><img src='/_images/menu/folder.gif'><a href='/articles/article32733.html' alt='Устройства'> Устройства</a></td></tr><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-05.gif'></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><a href='/proc.html?id=33768.32743&action=open'><img src='/_images/treeview/m-02.gif'></a></td></tr><tr><td height=48%></td></tr></table></td><td width='99%' nowrap><img src='/_images/menu/folder.gif'><a href='/articles/article32743.html' alt='Типы значений'> Типы значений</a></td></tr><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-04.gif'></td></tr><tr><td height=48%></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><img src='/_images/treeview/m-01.gif'></td></tr><tr><td height=48%></td></tr></table></td><td width='99%' nowrap><a href='/articles/article32755.html' alt='E-Book'>E-Book</a></td></tr></table></td></tr><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-05.gif'></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><a href='/proc.html?id=33768.32757&action=open'><img src='/_images/treeview/m-02.gif'></a></td></tr><tr><td height=48%></td></tr></table></td><td width='99%' nowrap><img src='/_images/menu/folder.gif'><a href='/articles/article32757.html' alt='Поведения'> Поведения</a></td></tr><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-05.gif'></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><a href='/proc.html?id=33768.32831&action=open'><img src='/_images/treeview/m-02.gif'></a></td></tr><tr><td height=48%></td></tr></table></td><td width='99%' nowrap><img src='/_images/menu/folder.gif'><a href='/articles/article32831.html' alt='VBScript'> VBScript</a></td></tr><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-05.gif'></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><a href='/proc.html?id=33768.33059&action=open'><img src='/_images/treeview/m-02.gif'></a></td></tr><tr><td height=48%></td></tr></table></td><td width='99%' nowrap><img src='/_images/menu/folder.gif'><a href='/articles/article33059.html' alt='Разное'> Разное</a></td></tr><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-05.gif'></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><a href='/proc.html?id=33768.33073&action=open'><img src='/_images/treeview/m-02.gif'></a></td></tr><tr><td height=48%></td></tr></table></td><td width='99%' nowrap><img src='/_images/menu/folder.gif'><a href='/articles/article33073.html' alt='Internet Explorer'> Internet Explorer</a></td></tr><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-05.gif'></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><a href='/proc.html?id=33768.33089&action=open'><img src='/_images/treeview/m-02.gif'></a></td></tr><tr><td height=48%></td></tr></table></td><td width='99%' nowrap><img src='/_images/menu/folder.gif'><a href='/articles/article33089.html' alt='Flash'> Flash</a></td></tr><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-05.gif'></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><a href='/proc.html?id=33768.33215&action=open'><img src='/_images/treeview/m-02.gif'></a></td></tr><tr><td height=48%></td></tr></table></td><td width='99%' nowrap><img src='/_images/menu/folder.gif'><a href='/articles/article33215.html' alt='Протоколы'> Протоколы</a></td></tr><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-05.gif'></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><a href='/proc.html?id=33768.33241&action=open'><img src='/_images/treeview/m-02.gif'></a></td></tr><tr><td height=48%></td></tr></table></td><td width='99%' nowrap><img src='/_images/menu/folder.gif'><a href='/articles/article33241.html' alt='P3P'> P3P</a></td></tr><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-04.gif'></td></tr><tr><td height=48%></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><a href='/proc.html?id=33768.33261&action=open'><img src='/_images/treeview/m-02.gif'></a></td></tr><tr><td height=48%></td></tr></table></td><td width='99%' nowrap><img src='/_images/menu/folder.gif'><a href='/articles/article33261.html' alt='mySQL'> mySQL</a></td></tr></table></td></tr><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-05.gif'></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><a href='/proc.html?id=33768.33423&action=open'><img src='/_images/treeview/m-02.gif'></a></td></tr><tr><td height=48%></td></tr></table></td><td width='99%' nowrap><img src='/_images/menu/folder.gif'><a href='/articles/article33423.html' alt='Статьи'> Статьи</a></td></tr><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-05.gif'></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><a href='/proc.html?id=33768.33693&action=close'><img src='/_images/treeview/m-03.gif'></a></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td width='99%' nowrap><img src='/_images/menu/folder.gif'><a href='/articles/article33693.html' alt='Файлотека'> Файлотека</a></td></tr><tr><td background='/_images/treeview/m-07.gif'></td><td colspan=2><table cellpadding=0px cellspacing=0px><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-04.gif'></td></tr><tr><td height=48%></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><a href='/proc.html?id=33768.33695&action=open'><img src='/_images/treeview/m-02.gif'></a></td></tr><tr><td height=48%></td></tr></table></td><td width='99%' nowrap><img src='/_images/menu/folder.gif'><a href='/articles/article33695.html' alt='Поведения'> Поведения</a></td></tr></table></td></tr><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-05.gif'></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><a href='/proc.html?id=33768.33351&action=open'><img src='/_images/treeview/m-02.gif'></a></td></tr><tr><td height=48%></td></tr></table></td><td width='99%' nowrap><img src='/_images/menu/folder.gif'><a href='/articles/article33351.html' alt='Cсылки'> Cсылки</a></td></tr><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-05.gif'></td></tr><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><a href='/proc.html?id=33768.32407&action=open'><img src='/_images/treeview/m-02.gif'></a></td></tr><tr><td height=48%></td></tr></table></td><td width='99%' nowrap><img src='/_images/menu/folder.gif'><a href='/articles/article32407.html' alt='Рассылки'> Рассылки</a></td></tr><tr><td><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48% background='/_images/treeview/m-07.gif'></td></tr><tr><td height=1%><img src='/_images/treeview/m-04.gif'></td></tr><tr><td height=48%></td></tr></table></td><td height=100%><table width=9px height=100% cellpadding=0px cellspacing=0px><tr><td height=48%></td></tr><tr><td height=1%><img src='/_images/treeview/m-01.gif'></td></tr><tr><td height=48%></td></tr></table></td><td width='99%' nowrap><a href='/articles/map.html'>карта сайта</a></td></tr></table>
Ссылка на комментарий
Поделиться на другие сайты

И как теперь в таком коде разбираться?

Для ясности - мне нужно реализовать менюшку как на этом сайте - http://www.gelezka.kiev.ua/

Ссылка на комментарий
Поделиться на другие сайты

Вот нашел кажись то что надо…

Содержимое поместите между <HEAD> и </HEAD>

<script language="JavaScript">function clickHandler() { var targetId, srcElement, targetElement; srcElement = window.event.srcElement; if (srcElement.className == "Outline") { targetId = srcElement.id + "details"; targetElement = document.all(targetId); if (targetElement.style.display == "none") { targetElement.style.display = ""; } else { targetElement.style.display = "none"; } }} document.onclick = clickHandler;</script>

Содержимое поместите между <BODY> и </BODY>

<BR><a id="Out0" class="Outline" style="cursor: hand; color: #000000; font-weight: bold">► ГЛАВНОЕ МЕНЮ</a><div id=Out0details style="display:None; position:relative; left:9;"><a href="home.htm" target="_self" style="font-family: Courier; font-size: 8pt; text-decoration: none">►Home</a><br><a href="DT1.htm" target="_self" style="font-family: Courier; font-size: 8pt; text-decoration: none">►Дата и Время</a><br><a href="clocks1.htm" target="_self" style="font-size: 8pt; font-family: Courier; text-decoration: none">►Часы</a><br><a href="Sc2.htm" target="_self" style="font-size: 8pt; font-family: Courier; text-decoration: none">►Прокрутки (Scrollers)</a><br><a href="another.htm" target="_self" style="font-size: 8pt; font-family: Courier; text-decoration: none">►Другая страница</a><br><a href="MD2.htm" target="_self" style="font-size: 8pt; font-family: Courier; text-decoration: none">►Дата Обновления</a><br><a href="Link.htm" target="_self" style="font-size: 8pt; font-family: Courier; text-decoration: none">►Линки</a></div><BR><a id="Out1" class="Outline" style="cursor: hand; color: #000000; font-weight: bold">► ЕЩЕ ОДНО МЕНЮ</a><div id=Out1details style="display:None; position:relative; left:9;"><a href="home.htm" target="_self" style="font-family: Courier; font-size: 8pt; text-decoration: none">►Home</a><br><a href="DT1.htm" target="_self" style="font-family: Courier; font-size: 8pt; text-decoration: none">►Дата и Время</a><br><a href="clocks1.htm" target="_self" style="font-size: 8pt; font-family: Courier; text-decoration: none">►Часы</a><br><a href="Sc2.htm" target="_self" style="font-size: 8pt; font-family: Courier; text-decoration: none">►Прокрутки (Scrollers)</a><br><a href="another.htm" target="_self" style="font-size: 8pt; font-family: Courier; text-decoration: none">►Другая страница</a><br><a href="MD2.htm" target="_self" style="font-size: 8pt; font-family: Courier; text-decoration: none">►Дата Обновления</a><br><a href="Link.htm" target="_self" style="font-size: 8pt; font-family: Courier; text-decoration: none">►Линки</a></div><BR><a id="Out2" class="Outline" style="cursor: hand; color: #000000; font-weight: bold">► И ЕЩЕ ОДНО МЕНЮ</a><div id=Out2details style="display:None; position:relative; left:9;"><a href="home.htm" target="_self" style="font-family: Courier; font-size: 8pt; text-decoration: none">►Home</a><br><a href="DT1.htm" target="_self" style="font-family: Courier; font-size: 8pt; text-decoration: none">►Дата и Время</a><br><a href="clocks1.htm" target="_self" style="font-size: 8pt; font-family: Courier; text-decoration: none">►Часы</a><br><a href="Sc2.htm" target="_self" style="font-size: 8pt; font-family: Courier; text-decoration: none">►Прокрутки (Scrollers)</a><br><a href="another.htm" target="_self" style="font-size: 8pt; font-family: Courier; text-decoration: none">►Другая страница</a><br><a href="MD2.htm" target="_self" style="font-size: 8pt; font-family: Courier; text-decoration: none">►Дата Обновления</a><br><a href="Link.htm" target="_self" style="font-size: 8pt; font-family: Courier; text-decoration: none">►Линки</a></div>

Правда под Mozill’ой у меня не работало... (Opera & IE - OK) :)

Ссылка на комментарий
Поделиться на другие сайты

А как доработать это меню, чтобы при нажатии на "Главное меню" меню раскрывалось, но страница не переходила по ссылке "#" , то есть в начало страницы?

Ссылка на комментарий
Поделиться на другие сайты

При нажатии на ссылку просто открывается меню, странице НЕ переходит ни по какому адресу…. Или я чего-то не понял? :)

Ссылка на комментарий
Поделиться на другие сайты

Только теперь посмотрел на страницу сайта…

<a id="Out0" class="Outline" style="cursor: hand; color: #000000; "href="#">Альбомы</a>

Не нужно указывать href="#", его вообще не надо!!

Тогда все ОК

Ссылка на комментарий
Поделиться на другие сайты

Вот, что я сейчас имею - http://www.fricom.com.ua/new/1.html#

2 Strange_V:

А как сделать чтобы при нажатии на один из пунктов меню, при загрузке страницы, меню осталось в таком же положении и не закрывалось.

Знаю, что можно через фреймы, но слышал, что с ними лучше не связываться. Как-то ещё можно реализовать?

Ссылка на комментарий
Поделиться на другие сайты

Теоретически это можно сделать например передав на другую страницу переменную которая указывала б что такое-то меню открыто… но я не сильно дружу с JavaScript-ом (3-и дня как учу его :blush2: )

так что :(

Ссылка на комментарий
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...