X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> "всплывающее" меню
Aniki
Aniki
Topic Starter сообщение 25.5.2008, 9:49; Ответить: Aniki
Сообщение #1


подскажите, пожалуйста, как сделать "всплывающее" меню? я не знаю, как оно правильно называется, но могу привести пример:
1) почтовик rambler.ru, там где пункт "все папки"...
2) сайт zaoproxy.ru...
3) даже на вашем форуме, пункты "Поиск" и "Навигация"...
я просто не знаю, что вбивать в поисковиках, чтобы найти этот скрипт (обычно всякую фигню нахожу), поэтому обращаюсь к вам за помощью!
заранее большое спасибо!
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
01es
01es
сообщение 25.5.2008, 10:04; Ответить: 01es
Сообщение #2


http://www.google.com.ua/search?hl=ru&...D0%BA&meta=
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Aniki
Aniki
Topic Starter сообщение 25.5.2008, 12:30; Ответить: Aniki
Сообщение #3


01es, спасибо, не знал, что оно выпадающим называется... :)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 25.5.2008, 13:09; Ответить: Exterior
Сообщение #4


Aniki, между прочим, тема Выпадающего меню обсуждалась, и даже есть неплохие примеры.

Мораль: активнее пользуемся поиском по форуму!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Aniki
Aniki
Topic Starter сообщение 25.5.2008, 14:50; Ответить: Aniki
Сообщение #5


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
Exterior
сообщение 25.5.2008, 16:17; Ответить: Exterior
Сообщение #6


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
Aniki
Topic Starter сообщение 25.5.2008, 16:28; Ответить: Aniki
Сообщение #7


(Exterior @ 1.1.1970, 07:00)
left: 200; - расстояние от левого края окна браузера;

большое спасибо! а-то я думал, что это расстояние от начала кнопки а не от окна браузера, теперь субменю работает нормально! *YAHOO* :)
а поменять ширину "Меню 1" так и не удалось... хотя все делаю правильно, как мне кажется... :(
+ а как мне расчитать откуда пойдет мое субменю, если у меня ширина таблицы 70% + 200px ширина кнопки "Меню 1" Каким образом сложить длины в пикселях и в процентах?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 25.5.2008, 17:02; Ответить: Exterior
Сообщение #8


(' post='6984 @ 25.5.2008, 19:28)
поменять ширину "Меню 1" так и не удалось... хотя все делаю правильно, как мне кажется... :(

ммм... не заметил сразу ошибочку... Написано:
<!-- Первый пункт меню -->
<td  class="menu" width="200[COLOR="Red"]px[/COLOR]" id="menu0"....

здесь не надо указывать единицы измерения, они указываются только в стилях, просто указывайте цифру (50, 100, 200, 300 и т.д.) и все.

(' post='6984 @ 25.5.2008, 19:28)
а как мне расчитать откуда пойдет мое субменю, если у меня ширина таблицы 70% + 200px ширина кнопки "Меню 1" Каким образом сложить длины в пикселях и в процентах?

зависит от ситуации, например, если это 3-х колоночный сайт и меню будет в крайней правой колонке, то лучше в стиле подменю поменять позицию с левой на правую:
table.submenu {position:absolute; right:300px;}

тогда перерасчет будет от правого края окна браузера.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Aniki
Aniki
Topic Starter сообщение 25.5.2008, 20:17; Ответить: Aniki
Сообщение #9


Exterior, спасибо! ширину поменял! :)
не, вот смотрите, у меня сначала идет отступ 15%, потом сама кнопка меню (допустим, 200 px), а потом уже подменю! так как мне рассчитать какое значение мне ставить
table.submenu {position:absolute; left:[COLOR="Red"]тут[/COLOR];}

? как "складывать" проценты и пиксели?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
biffpart
biffpart
сообщение 6.3.2009, 10:08; Ответить: biffpart
Сообщение #10


А как обеспечить один стиль на всех страницах сайта всплывающего меню?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Google "перестраивает" переиндексацию страниц
GoogleSearchConsole – На этой странице пока нельзя выполнять действия
7 kstnews 494 Вчера, 20:29
автор: Freedo
Горячая тема (нет новых ответов) Как начать "в криптовалюты" с нуля?
77 Starpony 3046 30.11.2020, 20:08
автор: EvilGomel
Открытая тема (нет новых ответов) Спецпредложение "Коробка Битрикс24 в облаке: как перенести и сколько это стоит"
9 Tucha 855 25.11.2020, 11:47
автор: Tucha
Открытая тема (нет новых ответов) "Porn" в названии домена/сайта
12 Eserador 503 21.11.2020, 18:43
автор: AnimeMen
Горячая тема (нет новых ответов) Разработаю одностраничник за "Спасибо"
Пополняю портфолио, набиваю руку
74 PostBrigada 19067 17.11.2020, 14:05
автор: PostBrigada


 



RSS Текстовая версия Сейчас: 3.12.2020, 1:02
Дизайн