Помощник
|
"всплывающее" меню |
Aniki
|
Сообщение
#1
|
||
|
|
||
|
|||
01es |
25.5.2008, 10:04;
Ответить: 01es
Сообщение
#2
|
|
|
|
|
Aniki
|
Сообщение
#3
|
|
01es, спасибо, не знал, что оно выпадающим называется... :)
|
|
|
Exterior |
25.5.2008, 13:09;
Ответить: Exterior
Сообщение
#4
|
|
Aniki, между прочим, тема Выпадающего меню обсуждалась, и даже есть неплохие примеры.
Мораль: активнее пользуемся поиском по форуму! |
|
|
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 |
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
|
Сообщение
#7
|
|
(Exterior @ 1.1.1970, 07:00) left: 200; - расстояние от левого края окна браузера; большое спасибо! а-то я думал, что это расстояние от начала кнопки а не от окна браузера, теперь субменю работает нормально! *YAHOO* :) а поменять ширину "Меню 1" так и не удалось... хотя все делаю правильно, как мне кажется... :( + а как мне расчитать откуда пойдет мое субменю, если у меня ширина таблицы 70% + 200px ширина кнопки "Меню 1" Каким образом сложить длины в пикселях и в процентах? |
|
|
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
|
Сообщение
#9
|
|
Exterior, спасибо! ширину поменял! :)
не, вот смотрите, у меня сначала идет отступ 15%, потом сама кнопка меню (допустим, 200 px), а потом уже подменю! так как мне рассчитать какое значение мне ставить table.submenu {position:absolute; left:[COLOR="Red"]тут[/COLOR];} ? как "складывать" проценты и пиксели? |
|
|
biffpart |
6.3.2009, 10:08;
Ответить: biffpart
Сообщение
#10
|
|
А как обеспечить один стиль на всех страницах сайта всплывающего меню?
|
|
|
|
Похожие темы
Тема | Ответов | Автор | Просмотров | Последний ответ | |
---|---|---|---|---|---|
Требуется помощь по сайту на "ВордПресс" Закрылся доступ в панель администратора |
16 | Tia2 | 2550 | Вчера, 21:34 автор: Arsenwenger |
|
Хостинг "Hostland" - качественный хостинг по разумным ценам и со своей Панелью Управления | 0 | artmeteor | 595 | 18.4.2024, 22:46 автор: artmeteor |
|
⭐⭐⭐ Google Voice | Gmail - OLD аккаунты "SMS и звонки" ⭐⭐⭐ | 15 | Chekon | 4470 | 18.4.2024, 12:00 автор: Chekon |
|
✅ sms.chekons.com - ⭐ Сервис для получения SMS на реальные номера USA "Non-VoIP, безлим SMS, API" ⭐ Сервис для получения SMS на реальные номера USA |
13 | Chekon | 4100 | 18.4.2024, 11:48 автор: Chekon |
|
Опрос: Результаты в упражнении "Жим лёжа" у вэбмастеров | 35 | Room | 4534 | 13.3.2024, 13:10 автор: Room |
Текстовая версия | Сейчас: 26.4.2024, 7:16 |