Полезная информация

Пользователи не любят читать документацию. Станьте оригинальным, будьте не как все. Ознакомьтесь с нашей базой знаний.

№108-11-2006 03:43:30

Vega
Участник
 
Группа: Members
Откуда: Амурская область
Зарегистрирован: 08-11-2006
Сообщений: 15

Динамическое меню

Подскажите!

Наваял код.
В IE работает прекрасно, меню выпадают, ячейки меняют цвет, ссылки работают.
В FF меню выпадает, а все остальное не работает.

Выделить код

Код:

<SCRIPT language=Javascript>
<!--
function showSubMenu(subMenuId) {
  document.all[subMenuId].style.visibility = 'visible';
        return true;
}
function hideSubMenu(subMenuId) {
  document.all[subMenuId].style.visibility = 'hidden';
        return true;
}
//-->
</SCRIPT>

<STYLE type="text/css">
.subMenuStyle {
        POSITION: absolute; VISIBILITY: hidden; Z-INDEX: 20; MARGIN-TOP: -1px; MARGIN-LEFT: -1px;
		CURSOR: auto;
}
.subMenuStyle2 {
        POSITION: absolute; VISIBILITY: hidden; Z-INDEX: 20; MARGIN-TOP: -9px;  MARGIN-LEFT: -1px;
		CURSOR: auto;
}
.subMenuItemStyle_1 {
        COLOR: #ffffff; CURSOR: pointer; FONT-WEIGHT: bold; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 20px; PADDING-TOP: 3px; TEXT-DECORATION: none; FONT-SIZE: 11px; FONT-FAMILY: Tahoma; FONT-WEIGHT: bold; BACKGROUND-COLOR: #51A4D8;
}
.subMenuItemStyle_2 {
        COLOR: #ffffff; CURSOR: pointer; FONT-WEIGHT: bold; PADDING-BOTTOM: 3px; PADDING-LEFT: 3px; PADDING-RIGHT: 20px; PADDING-TOP: 3px; TEXT-DECORATION: none; FONT-SIZE: 11px; FONT-FAMILY: Tahoma; FONT-WEIGHT: bold; BACKGROUND-COLOR: #A1C448;
}
.menu_1 {
         COLOR: #ffffff; FONT-SIZE: 12px; FONT-FAMILY: Arial; TEXT-ALIGN: center; FONT-WEIGHT: bold; PADDING-TOP: 35px; 
		 CURSOR: default;
		 BACKGROUND-COLOR: #51A4D8;
}
.menu_2 {
         COLOR: #ffffff; FONT-SIZE: 12px; FONT-FAMILY: Arial; TEXT-ALIGN: center; FONT-WEIGHT: bold; PADDING-TOP: 35px; 
		 CURSOR: default;
		 BACKGROUND-COLOR: #A1C448;
}
</STYLE>

 <table cellspacing="1" cellpadding="0" border="0">
   <tr align="center">
     <a Href="#" onmouseover="main_menu_1.className='menu_2'" 
       onmouseout="main_menu_1.className='menu_1'">
     <td class=menu_1 onmouseout="hideSubMenu('subMenu1'); "onmouseover="showSubMenu('subMenu1');"
       width="57" height="64" name="main_menu_1" id="main_menu_1" bgColor=#51A4D8>
       About</td></a>
    </tr>
	   
    <TR>
     <TD>
      <TABLE bgColor=#ffffff border=0 cellPadding=0 cellSpacing=1
        class=subMenuStyle id=subMenu1 onmouseout="hideSubMenu('subMenu1');"
        onmouseover="showSubMenu('subMenu1');">
       <TBODY>
              
        <TR>
         <A href="#" onmouseover="menu1_1.className='subMenuItemStyle_2'" 
           onmouseout="menu1_1.className='subMenuItemStyle_1'">
         <TD bgColor=#51A4D8 class="subMenuItemStyle_1" name="menu1_1" id="menu1_1" noWrap>News</TD>
         </A></TR>
              
        <TR>
         <A href="arhiv.html" onmouseover="menu1_2.className='subMenuItemStyle_2'" 
           onmouseout="menu1_2.className='subMenuItemStyle_1'">
         <TD bgColor=#51A4D8 class="subMenuItemStyle_1" name="menu1_2" id="menu1_2" noWrap>Personal</TD>
         </A></TR>

       <TR>
        <A href="press/" onmouseover="menu1_3.className='subMenuItemStyle_2'" 
          onmouseout="menu1_3.className='subMenuItemStyle_1'">
        <TD bgColor=#51A4D8 class="subMenuItemStyle_1" name="menu1_3" id="menu1_3" noWrap>History</TD>
        </A></TR></TBODY></TABLE></TD></TR></TBODY></TABLE>

Отредактировано Vega (08-11-2006 03:44:06)

Отсутствует

 

№208-11-2006 06:50:20

Vega
Участник
 
Группа: Members
Откуда: Амурская область
Зарегистрирован: 08-11-2006
Сообщений: 15

Re: Динамическое меню

Почитал на сайте, оказывается document.all не канает.
Поменял.

Выделить код

Код:

function showSubMenu() {
  document.getElementById('subMenu1').style.visibility = "visible";
        return true;
}
function hideSubMenu() {
  document.getElementById('subMenu1').style.visibility = "hidden";
        return true;
}

Работает также.
Правда FF больше не ругается.

Господа подскажите!

У меня мысль такая, что обработчики событий в FF должны быть другие.

Выделить код

Код:

onmouseover="main_menu_1.className='menu_2'" 
onmouseout="main_menu_1.className='menu_1'"

Данное событие в IE меняет цвет ячейки.
В FF ноль эмоций.

Ссылки также не работают.
:dumb:

Добавлено Срд 08 Ноя 2006 06:53:34 :
Да и еще вопрос.
Как пральна сделать.
У меня 5 менюшек
Каждая под своим номером.

Выделить код

Код:

document.getElementById('subMenu' + num).style.visibility = "visible";

Так не работает:(

Отредактировано Vega (08-11-2006 07:01:55)

Отсутствует

 

№308-11-2006 10:13:19

Vega
Участник
 
Группа: Members
Откуда: Амурская область
Зарегистрирован: 08-11-2006
Сообщений: 15

Re: Динамическое меню

Нашел на каком-то сайте.
Верно ли это?
Первый раз такое вижу

Категорически не рекомендуется пользоваться скриптами типа
<td onMouseOver="...">

В CSS2 псевдокласс :hover может быть применен не только к ссылке, но и
к любому другому элементу.  о, к сожалению, IE не поддерживает эту
возможность. Поэтому поступаем так - пишем в стилях:

td{...styles...;behavior:url('td.htc');} /* работает в IE4+ */
td:hover{background-color:#RRGGBB;} /* стандарт CSS2, работает в NN6/Mozilla */

И создаем файл td.htc, в котором пишем:

<public:attach event="onmouseover" onevent="color()"/>
<public:attach event="onmouseout" onevent="restore()"/>
<script language="JavaScript" type="text/javascript"><!--
function color() {runtimeStyle.backgroundColor='#RRGGBB';}
function restore() {runtimeStyle.backgroundColor='';}

Теперь все ячейки таблиц при наведении мышки будут подсвечиваться.

Разумеется, можно использовать td.className:hover и td#idName:hover
для подсветки ячеек определенного стиля или конкретной ячейки.

Попробуем.

Ну хоть кто нибудь подскажет.
Все просматривают, но никто не поможет:o

Отсутствует

 

№408-11-2006 16:05:49

Lynn
Кофеман
 
Группа: Members
Откуда: Россия
Зарегистрирован: 16-02-2005
Сообщений: 1721
Веб-сайт

Re: Динамическое меню

Ну хоть кто нибудь подскажет.
Все просматривают, но никто не поможет

Честно говоря, просто надоедает объяснять одно и тоже. По этому поводу в инете есть уйма текста.
http://www.google.com/search?q=css+drop+down+menu
http://pepelsbey.net/webdev/2006/04/26/inogda-oni-vyipadayut-snova/

Добавлено Срд 08 Ноя 2006 16:06:28 :
:offtopic:
А ваш код надо просто выкинуть. Весь.


Isn't it ironic... don't you think? — Alanis Morissette

Отсутствует

 

№509-11-2006 02:31:38

Vega
Участник
 
Группа: Members
Откуда: Амурская область
Зарегистрирован: 08-11-2006
Сообщений: 15

Re: Динамическое меню

Честно говоря, просто надоедает объяснять одно и тоже

Уважаемый Lynn c таким раскладом нада всех преподавателей уволить,
ведь они каждый год объясняют одно и то же.

Наличие уймы текста в интернете не значит что все становится понятно.

А ваш код надо просто выкинуть. Весь.

Чем код Вам не угодил.

За ссылки спасибо. :)

Отсутствует

 

№609-11-2006 05:50:08

Vega
Участник
 
Группа: Members
Откуда: Амурская область
Зарегистрирован: 08-11-2006
Сообщений: 15

Re: Динамическое меню

У меня мысль такая, что обработчики событий в FF должны быть другие.

Выделить код

Код:

onmouseover="main_menu_1.className='menu_2'" 
onmouseout="main_menu_1.className='menu_1'"

Данное событие в IE меняет цвет ячейки.
В FF ноль эмоций.

Все оказалось намного проще.

Выделить код

Код:

onmouseout="this.style.backgroundColor = '#51A4D8';"
onmouseover="this.style.backgroundColor = '#a1c448';"

Данное действо меняет цвет ячейки во всех броузерах. :rock:

Добавлено Чтв 09 Ноя 2006 05:53:06 :
Господа!
Как сделать, чтобы ячейка работала как ссылка.

В смысле так

Выделить код

Код:

<A href="arhiv.html">
<TD>Архив</TD>
</A>

В IE работает.
FF  и Opera отдыхают.

Отсутствует

 

№709-11-2006 06:15:29

Azathoth
Участник
 
Группа: Extensions
Откуда: Хабаровск
Зарегистрирован: 02-02-2005
Сообщений: 2692

Re: Динамическое меню

Vega

c таким раскладом нада всех преподавателей уволить, ведь они каждый год объясняют одно и то же.

Правильно. Именно так и надо поступить. Они изначально вводят студентов в заблуждение потому что сами неквалифицированы. И это касается не только JavaScript & DOM Model.

Этот код

Выделить код

Код:

<A href="arhiv.html">
<TD>Архив</TD>
</A>

просто не правильный. А IE не правильно его понимает. Точнее допускает его использование.
Достаточно посмотреть DTD HTML/XHTML чтобы понять почему он не верный.

Как сделать, чтобы ячейка работала как ссылка.

<td onclick="document.location='http://где-то/там/лежала/страничка'">

Мне на самом деле по рукам надо настучать что потакаю Вам в неправильном коде.
На самом деле даже таблицы я не советовал бы использовать. Не говоря уже об document.location.
Потом Вам захочется изменять курсор над ячейкой таблицы, чтобы был "ручкой", Вы используете стиль cursor для разных браузеров и полезут ошибки в консоли JavaScript =) Это я так, предвосхищаю дальнейшие вопросы =)

Самый лучший способ сделать ссылку, это написать:
<a href="где-то там">что-то там</a>
Лучше еще никто не придумал

Отредактировано Azathoth (09-11-2006 06:28:41)


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

Отсутствует

 

№809-11-2006 07:06:42

Vega
Участник
 
Группа: Members
Откуда: Амурская область
Зарегистрирован: 08-11-2006
Сообщений: 15

Re: Динамическое меню

Azathoth спасибо +1

Добавлено Чтв 09 Ноя 2006 07:08:40 :
Да и еще вопрос.
Как пральна сделать.
У меня 5 менюшек
Каждая под своим номером.

Выделить код

Код:

document.getElementById('subMenu' + num).style.visibility = "visible";

Так не работает

Отсутствует

 

№909-11-2006 07:18:11

Infant
   «»
 
Группа: Extensions
Откуда: Одесса
Зарегистрирован: 23-12-2004
Сообщений: 3671

Re: Динамическое меню

('subMenu' + num)

Круто! Строковое значение прибавить число!! Это прямо из серии: «Что получится если к двум метрам прибавить два литра?».


Благодарю алфавит за любезно предоставленные буквы.

Отсутствует

 

№1009-11-2006 08:02:16

Azathoth
Участник
 
Группа: Extensions
Откуда: Хабаровск
Зарегистрирован: 02-02-2005
Сообщений: 2692

Re: Динамическое меню

Vega

Так не работает

А что конкретно не работает? Если они должны пропадать, то вместо visibility следует использовать display. visibility просто скрывает элемент, но он остается в потоке и занимает место.

Infant

Круто! Строковое значение прибавить число!! Это прямо из серии: «Что получится если к двум метрам прибавить два литра?».

На самом деле тут работает автоматическое приведение типов. Перед сложением num приводится к строке и  сложение происходит верно.
var a = "" + 234;
Будет считаться строкой "234". Это можно найти в разделе 11.6.1 ECMAScript-262. Полагаю в иных спецификациях (например JavaScriprt) будет то же самое.


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

Отсутствует

 

№1109-11-2006 08:14:24

Vega
Участник
 
Группа: Members
Откуда: Амурская область
Зарегистрирован: 08-11-2006
Сообщений: 15

Re: Динамическое меню

Azathoth вопрос в том, что у меня 5 менюшек, которые имеют подменю (которые появляются при наведении мыши).
Эти пять меню пронумерованы:
subMenu1
subMenu2
subMenu3
subMenu4
subMenu5


Как пральна записать.

document.getElementById('subMenu').style.visibility = "visible";

Отсутствует

 

№1209-11-2006 08:28:33

Azathoth
Участник
 
Группа: Extensions
Откуда: Хабаровск
Зарегистрирован: 02-02-2005
Сообщений: 2692

Re: Динамическое меню

document.getElementById('subMenu' + num).style.display = "block";


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

Отсутствует

 

№1309-11-2006 09:05:39

Vega
Участник
 
Группа: Members
Откуда: Амурская область
Зарегистрирован: 08-11-2006
Сообщений: 15

Re: Динамическое меню

Error: num is not defined

Я каждому меню присвоил Id
id="subMenu1"
id="subMenu2"
id="subMenu3"

Вопчем FF ругается

Отсутствует

 

№1409-11-2006 09:11:14

Azathoth
Участник
 
Группа: Extensions
Откуда: Хабаровск
Зарегистрирован: 02-02-2005
Сообщений: 2692

Re: Динамическое меню

Vega

document.getElementById('subMenu' + num).style.visibility = "visible";

А это откуда в таком случае?


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

Отсутствует

 

№1509-11-2006 09:48:48

Vega
Участник
 
Группа: Members
Откуда: Амурская область
Зарегистрирован: 08-11-2006
Сообщений: 15

Re: Динамическое меню

Я в это деле чайник!!! :(
Этот вариант нашел на каком-то сайте.
Обсуждался вопрос выпадающих менюшек.

Выделить код

Код:

document.getElementById('subMenu' + num).style.visibility = "visible";

Кстати данная композиция 100% работает
Правда FF ругается

Выделить код

Код:

document.all[subMenuId].style.visibility = 'visible';

Отредактировано Vega (09-11-2006 09:51:07)

Отсутствует

 

№1609-11-2006 12:20:22

Azathoth
Участник
 
Группа: Extensions
Откуда: Хабаровск
Зарегистрирован: 02-02-2005
Сообщений: 2692

Re: Динамическое меню

Vega, а откуда берется subMenuId?


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

Отсутствует

 

№1709-11-2006 18:30:09

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Динамическое меню

onmouseover="main_menu_1.className='menu_2'"

Это некорректная конструкция, потому что Вы обращаетесь по Id, не указывая ссылку на объект. Корректно - через document.getElementById('main_menu_1').className='menu_2'
Через this работает, потому что правильная конструкция.

<A href="arhiv.html"> <TD>Архив</TD> </A>

Это абсолютно некорректный код, и не только с точки зрения стандартов. Внутри таблицы вообще могут находиться только строки (ну и tbody, col, colgroup и другие табличные элементы), в строках - только ячейки, и уже в ячейках - другие элементы.

Отсутствует

 

№1810-11-2006 03:37:21

Vega
Участник
 
Группа: Members
Откуда: Амурская область
Зарегистрирован: 08-11-2006
Сообщений: 15

Re: Динамическое меню

Azathoth

а откуда берется subMenuId?

Не понял вопроса. :(

document.all[subMenuId]
функция проверяет наличие в документе значения id="submenu"

Я каждому меню присвоил Id
id="subMenu1"
id="subMenu2"
id="subMenu3"


Al_H Спасибо за комментарий.
Я уже все исправил. Остался вопрос

Выделить код

Код:

document.all[subMenuId].style.visibility = 'visible';

Данная конструкция работает во всех броузерах.
Но она не корректна, так как document.all уже не применяется.

Отсутствует

 

№1910-11-2006 04:51:25

Azathoth
Участник
 
Группа: Extensions
Откуда: Хабаровск
Зарегистрирован: 02-02-2005
Сообщений: 2692

Re: Динамическое меню

Vega

Не понял вопроса.

Это все потому что вопрос был наводящим, а ответ предназначался не мне, а Вам. Просто нужно было чуток подумать.
Вы сказали что:

Vega пишет

Да и еще вопрос.
Как пральна сделать.
У меня 5 менюшек
Каждая под своим номером.
Код:
document.getElementById('subMenu' + num).style.visibility = "visible";

И я предполагал что Вы передаете функции showSubMenu номер элемента подменю. Иными словами функция должна была принимать вид:
showSubMenu(num) {
...
document.getElementById('subMenu' + num).style.visibility = "visible";
...
}
(IMHO лучше конечно использовать display вместо visibility)
Вот тогда num была бы определена. И вызов функции бы поменялся на onmouseout="hideSubMenu(1)".
Но раз num оказалась неопределена, я понял что Вы вернулись к изначальному определению функции:
showSubMenu(subMenuId) {
...
}

Тогда про num забываем и используем такую форму записи:
showSubMenu(subMenuId) {
...
document.getElementById(subMenuId).style.visibility = "visible";
...
}
И вызов функии становится: onmouseout="hideSubMenu('subMenu1')", т.е. возвращается к исходному состоянию.

Ответ на вопрос:

а откуда берется subMenuId?

очевиден. Эта переменная, равно как и предполагаемый num, берется из определения функции showSubMenu и является ее аргументом. Вот и всего-лишь навсего...

Добавлено Птн 10 Ноя 2006 04:56:54 :
Al_H

Это абсолютно некорректный код, и не только с точки зрения стандартов. Внутри таблицы вообще могут находиться только строки (ну и tbody, col, colgroup и другие табличные элементы)

Отвечаю на выделенное. Я сказал то же самое, но другими словами =)
DTD явно описывает что:

Выделить код

Код:

<!ELEMENT TABLE - -
     (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)>
<!ELEMENT CAPTION  - - (%inline;)*     -- table caption -->
<!ELEMENT THEAD    - O (TR)+           -- table header -->
<!ELEMENT TFOOT    - O (TR)+           -- table footer -->
<!ELEMENT TBODY    O O (TR)+           -- table body -->
<!ELEMENT COLGROUP - O (COL)*          -- table column group -->
<!ELEMENT COL      - O EMPTY           -- table column -->
<!ELEMENT TR       - O (TH|TD)+        -- table row -->
<!ELEMENT (TH|TD)  - O (%flow;)*       -- table header cell, table data cell-->

Т.е.:

Al_H пишет

Внутри таблицы вообще могут находиться только строки (ну и tbody, col, colgroup и другие табличные элементы)

Ну еще мы предполагаем что THEAD, TFOOT, TBODY обычно опускаются, но в модели DOM браузер их все же воспроизводит.

Отредактировано Azathoth (10-11-2006 09:10:23)


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

Отсутствует

 

№2010-11-2006 05:44:55

Vega
Участник
 
Группа: Members
Откуда: Амурская область
Зарегистрирован: 08-11-2006
Сообщений: 15

Re: Динамическое меню

Azathoth

Большое спасибо :D
Все работает. Вы мне очень помогли. +1

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2020 Mozilla Russia GitHub mark
Язык отображения форума: [Русский] [English]