PDA

Просмотр полной версии : "всплывающее" меню



Aniki
25.05.2008, 08:49
подскажите, пожалуйста, как сделать "всплывающее" меню? я не знаю, как оно правильно называется, но могу привести пример:
1) почтовик rambler.ru, там где пункт "все папки"...
2) сайт zaoproxy.ru...
3) даже на вашем форуме, пункты "Поиск" и "Навигация"...
я просто не знаю, что вбивать в поисковиках, чтобы найти этот скрипт (обычно всякую фигню нахожу), поэтому обращаюсь к вам за помощью!
заранее большое спасибо!

01es
25.05.2008, 09:04
http://www.google.com.ua/search?hl=ru&newwindow=1&safe=off&q=java+%D0%B2%D1%8B%D0%BF%D0%B0%D0%B4%D0%B0%D1%8E% D1%89%D0%B5%D0%B5+%D0%BC%D0%B5%D0%BD%D1%8E&btnG=%D0%9F%D0%BE%D0%B8%D1%81%D0%BA&meta=

Aniki
25.05.2008, 11:30
01es, спасибо, не знал, что оно выпадающим называется... :)

Exterior
25.05.2008, 12:09
Aniki, между прочим, тема Выпадающего меню (http://html.by/showthread.php?t=425) обсуждалась, и даже есть неплохие примеры.

Мораль: активнее пользуемся поиском (http://html.by/search.php) по форуму!

Aniki
25.05.2008, 13:50
Exterior, я не знал, что оно называется выпадающем... а тему уже прочел, когда мне 01es название дал... :)

а можно вопрос на эту тему (поиском форума пользовался - не нашел ответа, да и google не помог):

<html>

<head>
<title>Двухуровневое меню</title>
</head>

<body>

<style>
td.menu {background-color: #FBC8C5; text-align: center}
td.menu a, table.submenu a {color: #990000; text-decoration: none}
table.submenu {border: 1px #440000 solid; background-color: #FEC883; width: 200px; visibility: hidden; position: absolute; left: 200; text-align: center}
</style>

<script language="JavaScript">
var oldId, oldBgColor;
function hiddenLayer(elem) {
document.getElementById(elem).style.visibility = 'hidden';
lightOff();}
function showLayer(elem) {
document.getElementById(elem).style.visibility = 'visible';}
function lightOn(elem) {
oldId = elem;
oldBgColor = document.getElementById(elem).style.background;
document.getElementById(elem).style.background = 'red';}
function lightOff() {
document.getElementById(oldId).style.background = oldBgColor;}
</script>

<table cellspacing=2>
<tr>
<!-- Первый пункт меню -->
<td class="menu" width="200px" id="menu0" onMouseOver="showLayer('menu0_list'); lightOn('menu0')" onMouseOut="hiddenLayer('menu0_list')" onClick="document.location = 'menu1.php'">
<a href="menu1.php">Меню 1</a>
</td>
<!-- Подменю первого пункта меню -->
<td width="0px" valign="top">
<table id="menu0_list" class="submenu" onMouseOver="showLayer('menu0_list')" onMouseOut="hiddenLayer('menu0_list')">
<tr>
<td id="menu0-0" onMouseOver="lightOn('menu0-0')" onMouseOut="lightOff()" onClick="document.location = 'point11.php'"><a href="point11.php">Пункт 1-1</a></td>
</tr>
<tr>
<td id="menu0-1" onMouseOver="lightOn('menu0-1')" onMouseOut="lightOff()" onClick="document.location = 'point12.php'"><a href="point12.php">Пункт 1-2</a></td>
</tr>
<tr>
<td id="menu0-2" onMouseOver="lightOn('menu0-2')" onMouseOut="lightOff()" onClick="document.location = 'point13.php'"><a href="point13.php">Пункт 1-3</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<!-- Второй пункт меню -->
<td class="menu" id="menu1" onMouseOver="showLayer('menu1_list'); lightOn('menu1')" onMouseOut="hiddenLayer('menu1_list')" onClick="document.location = 'menu2.php'">
<a href="menu2.php">Меню 2</a>
</td>
<!-- Подменю второго пункта меню -->
<td width="0px" valign="top">
<table id="menu1_list" class="submenu" onMouseOver="showLayer('menu1_list')" onMouseOut="hiddenLayer('menu1_list')">
<tr>
<td id="menu1-0" onMouseOver="lightOn('menu1-0')" onMouseOut="lightOff()" onClick="document.location = 'point21.php'"><a href="point21.php">Пункт 2-1</a></td>
</tr>
<tr>
<td id="menu1-1" onMouseOver="lightOn('menu1-1')" onMouseOut="lightOff()" onClick="document.location = 'point22.php'"><a href="point22.php">Пункт 2-2</a></td>
</tr>
<tr>
<td id="menu1-2" onMouseOver="lightOn('menu1-2')" onMouseOut="lightOff()" onClick="document.location = 'point23.php'"><a href="point23.php">Пункт 2-3</a></td>
</tr>
</table>
</td>
</tr>
</table>

</body>

</html>
чтобы изменить ширину ячейки "Меню 1", нужно просто поменять width="200px" на 100px, это ясно...
но почему-то когда я вставляю эти строчки в мою страницу (sorry, что коряво изъясняюсь), то размер ставится 200px и не коим образом не меняется... можете подсказать почему так?
и еще, если я вставляю этот код в ячейку таблицы, то субменю вылезает налево, загораживая половину самого меню, а если поставить right, то субменю выкидывает далеко направо, за следующую ячейку... подскажите, как правильно сделать?

Exterior
25.05.2008, 15:17
Aniki, в вашем примере для субменю определен стиль:

table.submenu {border: 1px #440000 solid; background-color: #FEC883; width: 200px; visibility: hidden; position: absolute; left: 200; text-align: center}
где width: 200px; определяет ширину;
left: 200; - расстояние от левого края окна браузера;
таким образом, достаточно поменять значения этих инструкций для получения необходимого результата.

Aniki
25.05.2008, 15:28
left: 200; - расстояние от левого края окна браузера;
большое спасибо! а-то я думал, что это расстояние от начала кнопки а не от окна браузера, теперь субменю работает нормально! *YAHOO* :)
а поменять ширину "Меню 1" так и не удалось... хотя все делаю правильно, как мне кажется... :(
+ а как мне расчитать откуда пойдет мое субменю, если у меня ширина таблицы 70% + 200px ширина кнопки "Меню 1" Каким образом сложить длины в пикселях и в процентах?

Exterior
25.05.2008, 16:02
поменять ширину "Меню 1" так и не удалось... хотя все делаю правильно, как мне кажется... :(
ммм... не заметил сразу ошибочку... Написано:

<!-- Первый пункт меню -->
<td class="menu" width="200px" id="menu0"....
здесь не надо указывать единицы измерения, они указываются только в стилях, просто указывайте цифру (50, 100, 200, 300 и т.д.) и все.


а как мне расчитать откуда пойдет мое субменю, если у меня ширина таблицы 70% + 200px ширина кнопки "Меню 1" Каким образом сложить длины в пикселях и в процентах?
зависит от ситуации, например, если это 3-х колоночный сайт и меню будет в крайней правой колонке, то лучше в стиле подменю поменять позицию с левой на правую:

table.submenu {position:absolute; right:300px;}
тогда перерасчет будет от правого края окна браузера.

Aniki
25.05.2008, 19:17
Exterior, спасибо! ширину поменял! :)
не, вот смотрите, у меня сначала идет отступ 15%, потом сама кнопка меню (допустим, 200 px), а потом уже подменю! так как мне рассчитать какое значение мне ставить

table.submenu {position:absolute; left:тут;}
? как "складывать" проценты и пиксели?

biffpart
06.03.2009, 08:08
А как обеспечить один стиль на всех страницах сайта всплывающего меню?

Webmaster
06.03.2009, 11:25
А как обеспечить один стиль на всех страницах сайта всплывающего меню?
использовать одну и туже таблицу стилей на каждой странице

zeus_god
08.05.2013, 18:40
я понимаю что тема уже закрыта и в архиве, но мне нужно знать как в приведенном выше примере сделать чтобы подменю открывалось не в низ, а вверх? надеюсь что меня кто-то услышит и поможет. Спасибо.

Html-форум Рейтинг@Mail.ru