VPF::Построение вёрстки меню - Форум программистов

ОнКофе

Дата 20.3.2006, 17:43 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет

Ciber SLasH, а разве у iframe есть onMouseOut или подобное свойство???

Попробовал сейчас и ничего!!! Не работает так!! Как-то по другому нужно!

Это сообщение отредактировал(а) ОнКофе - 20.3.2006, 17:46

Ciber SLasH

Дата 21.3.2006, 11:21 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

Цитата(ОнКофе @ 20.3.2006, 17:43

)

Ciber SLasH, а разве у iframe есть onMouseOut или подобное свойство???

Но ведь работает, я проверял в IE6, FireFox 1.5.0.1, Opera 7.54, Opera 8.51.

ОнКофе

Дата 21.3.2006, 13:25 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет

Ciber SLasH,
у меня OPERA вот это

Код


:    
<div style='background: red'><iframe src="1.htm"></iframe></div>

вообще не воспринемает... подводишь мышкой к пункту меню, потом пытаешься передти в это подменю которое iframe показывает, но как только двигаешь мышкой подменю сразу убирается... хотя в других браузерах нормально!!!

Попробовал вот так:

Код


:    
<div style='background: red'><iframe src="1.htm" onMouseOver=' this.style.display = "block" '></iframe></div>

- не помогло.... Opera - мозг парит Что можно придумать?

Это сообщение отредактировал(а) ОнКофе - 21.3.2006, 13:34

Ciber SLasH

Дата 22.3.2006, 03:37 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

Приведи весь код, который ты проверяешь. Я уже запутался в хронологии постов...

ОнКофе

Дата 22.3.2006, 11:55 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет

так работает везде:

Код


<html>    
<head>    
<title></title>    
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">    
 <Style>    
.menu_light{background-color:#000000;font-family:Verdana,Arial;font-size:10px;font-weight:bold;color:#ffffff;text-decoration:none;}    
.menu{background-color:#000000;border:1px solid #ffffff;border-bottom:0;padding:2px 5px;}    
 </Style>    
<script language="JavaScript">    
function showdiv(id, num) {    
document.getElementById(id).style.display = num ? "block" : "none";    
}    
 </SCRIPT>    
</head>    
<body topmargin="0" leftmargin="0">    
<table width="100" border="0" cellspacing="0" cellpadding="0">    
<tr onMouseOver="showdiv('1', 1)" onMouseOut="showdiv('1', 0)">    
<td width="100" class="menu"><a href="/ind.htm" class="menu_light">Новости</a></td>    
<td valign="top">    
 <table border=0 cellPadding=0 cellSpacing=0 width=150 class="table" id="1" style="display:none;position:absolute;width:150px;z-index:1;">    
   <tr><td class="menu"><a  class="menu_light" href="#">Пункт 1</a></td></tr>    
   <tr><td class="menu"><a  class="menu_light" href="#">Пункт 2</a></td></tr>    
</table>    
</td>    
</tr>    
<tr onMouseOver="showdiv('2', 1)" onMouseOut="showdiv('2', 0)">    
<td width="100" class="menu"><a href="/ind.htm" class="menu_light">Трудности</a></td>    
<td valign="top">    
 <table border=0 cellPadding=0 cellSpacing=0 width=150 class="table" id="2" style="display:none;position:absolute;width:150px;z-index:1;">    
   <tr><td class="menu"><a  class="menu_light" href="#">Пункт 1</a></td></tr>    
   <tr><td class="menu"><a  class="menu_light" href="#">Пункт 2</a></td></tr>    
</table>    
</td>    
</tr>    
</table>    
</body></html>

и все хорошо, кроме одного случая, когда выпадающее подменю попадает на элементы формы или flash-анимацию или applet, то подменю оказывается под ними... пробовал z-index - не помагает flash все равно сверху... попробовал сделать через iframe вот так:

Код


<html>    
<head>    
<title></title>    
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">    
 <Style>    
.menu_light{background-color:#000000;font-family:Verdana,Arial;font-size:10px;font-weight:bold;color:#ffffff;text-decoration:none;}    
.menu{background-color:#000000;border:1px solid #ffffff;border-bottom:0;padding:2px 5px;}    
 </Style>    
<script language="JavaScript">    
function showdiv(id, num) {    
document.getElementById(id).style.display = num ? "block" : "none";    
}    
 </SCRIPT>    
</head>    
<body topmargin="0" leftmargin="0">    
<table width="100" border="0" cellspacing="0" cellpadding="0">    
<tr onMouseOver="showdiv('1', 1)" onMouseOut="showdiv('1', 0)">    
<td width="100" class="menu"><a href="/ind.htm" class="menu_light">Новости</a></td>    
<td valign="top">    
 [B]<div id="1" style="display:none;position:absolute;width:150px;z-index:1;">    
<iframe src="1.htm"  frameborder="0" marginwidth="0" marginheight="0"scrolling="no"></iframe>
</div>[/B]    
</td>    
</tr>    
<tr onMouseOver="showdiv('2', 1)" onMouseOut="showdiv('2', 0)">    
<td width="100" class="menu"><a href="/ind.htm" class="menu_light">Трудности</a></td>    
<td valign="top">    
 [B]<div id="1" style="display:none;position:absolute;width:150px;z-index:1;">    
<iframe src="2.htm"  frameborder="0" marginwidth="0" marginheight="0"scrolling="no"></iframe>
</div>[/B]        
</td>    
</tr>    
</table>    
</body></html>

работает нормально везде, но вот в Opera работать не хочет, как только курсор попадает на слой срабатывает onMouseOut="showdiv('2', 0)".... Что делать? Главное что везде нормально все работает, только в Opera не хочет!!!

ОнКофе

Дата 22.3.2006, 16:17 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет

Ciber SLasH, слушай, я кажется кое что придумал!!! попробовал работает даже в опере! Мне вот только теперь одну вещь нужно выяснить...
суть такова:

в целом вся страница разбита на две области - правая область и левая область.
Можно сделать чтобы при наведении курсора подменю появлялось, но не убиралось, то есть onMouseOut="showdiv('1', 0) не писать!!! Вернее написать но уже не в ячейке а в <div> смотри:

Код


<table>
  <tr>
    <td>здесь левая область</td>

    <td>здесь правая область</td>
  </tr>
</table>

В левой находится меню, в правой контекст...

Код


<table>
  <tr>
    <td>
<!-- здесь меню -->
<table width="100" border="0" cellspacing="0" cellpadding="0">     
<tr onMouseOver="showdiv('1', 1)">     
<td width="100" class="menu"><a href="/ind.htm" class="menu_light">Новости</a></td>     
<td valign="top">     
 <div id="1" style="display:none;position:absolute;width:150px;z-index:1;" [B]onMouseOut="showdiv('1', 0)"[/B]>     
   <iframe src=""></iframe>     
</div>         
</td>     
</tr>     
<tr onMouseOver="showdiv('2', 1)">    
<td width="100" class="menu"><a href="/ind.htm" class="menu_light">Трудности</a></td>     
<td valign="top">     
 <div id="2" style="display:none;position:absolute;width:150px;z-index:1;" [B]onMouseOut="showdiv('2', 0)"[/B]>     
   <iframe src=""></iframe>     
</div>    
<!-- /здесь меню -->

    </td>

    <td>здесь правая область</td>
  </tr>
</table>

в этом случае все будет работать как и прежде только с одним отличием... в Opera слои не будут убираться, они будут показываться и оставатся на месте... тогда мы сможем перемещаться по сылкам которые находятся в IFRAME... а чтобы они убирались мы в правой области

Код


<table>
  <tr>
    <td>здесь левая область</td>

    <td [B]onMouseOver="showdiv('1',0);showdiv('2',0);"[/B]>[B]здесь правая область[/B]</td>
  </tr>
</table>

поставим событие onMouseOver="showdiv('1',0);showdiv('2',0);", тоесть когда в Opere курсор будут перемещаться с подменю, он будетпопадать в правую область где стоит обработчик события - "прятать слой"... В этом случае везде работает нормально, даже в этой самой Opera, теперь собственно мой вопрос....
Понимаешь у меня довольно много пунктов меню и их подменю, поэтому не удобно писать там где мне нужно onMouseOver="showdiv('1',0);showdiv('2',0); ................................ showdiv(' N ',0);" - чтобы все слои закрывались когда курсор уходит из области слоя (специально для Opera)... Можно ли эту запись сократить?
Как сделать чтобы вызвать одну функцию и она закрывала все эти <div>

Это сообщение отредактировал(а) ОнКофе - 22.3.2006, 16:30

ОнКофе

Дата 22.3.2006, 20:51 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет

Ciber SLasH, переделал я так как написал выше.... все стало тормозить.... из-за одной Opera столько проблем... Ты не нашел решения этой задачки?

Ciber SLasH

Дата 23.3.2006, 10:03 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

Можно ещё так выкрутиться:

Код


<html>
<head>
<title></title>
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <Style>
.menu_light{background-color:#000000;font-family:Verdana,Arial;font-size:10px;font-weight:bold;color:#ffffff;text-decoration:none;}
.menu{background-color:#000000;border:1px solid #ffffff;border-bottom:0;padding:2px 5px; width: 90px}
 </Style>
<script language="JavaScript">
function showdiv(id, num) {
document.getElementById(id).style.display = num ? "block" : "none";
}
 </SCRIPT>
</head>
<body topmargin="0" leftmargin="0">
<table width="100" border="0" cellspacing="0" cellpadding="0">
<tr onMouseOver="showdiv('1', 1)" onMouseOut="showdiv('1', 0)">
<td width="100"><div class="menu"><a href="/ind.htm" class="menu_light">Новости</a></div></td>
<td valign="top">
<div id="1" style="display:none;position:absolute;width:150px;z-index:1;left:90px">
<iframe src="1.htm" frameborder="1" marginwidth="0" marginheight="0" scrolling="no" width="100" height="20"></iframe>
</div>
</td>
</tr>
<tr onMouseOver="showdiv('2', 1)" onMouseOut="showdiv('2', 0)">
<td width="100"><div class="menu"><a href="/ind.htm" class="menu_light">Трудности</a></div></td>
<td valign="top">
<div id="2" style="display:none;position:absolute;width:150px;z-index:1;left:90px">
<iframe src="2.htm" frameborder="1" marginwidth="0" marginheight="0" scrolling="no" width="100" height="20"></iframe>
</div>
</td>
</tr>
</table>
</body></html>

Это сообщение отредактировал(а) Ciber SLasH - 23.3.2006, 12:27

ОнКофе

Дата 23.3.2006, 11:34 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет

Ciber SLasH, ты предлогаешь засунуть подменю на пункты меню? чтобы Opera не замечала уход курсора с ячейки что ли? А можно это сделать только для Opera а в остальных браузерах чтобы нормально было?

ну то есть вот тут

Код


<div id="1" style="display:none;position:absolute;width:150px;z-index:1;left:90px">

если пользователь зашел под Opera оставить left:90px, а если под любым другим сделать left:100px Можно так как-нибудь? Я пробовал у меня что-то не очень получилось..

Это сообщение отредактировал(а) ОнКофе - 23.3.2006, 11:38

Ciber SLasH

Дата 23.3.2006, 12:27 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

Смотри мой предыдущий код, я его исправил.

ОнКофе

Дата 23.3.2006, 12:43 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет

Ciber SLasH, просто сделал меню <div> !!!!!!!!!!! И ВСЕ???
Все гениальное просто??? :-)
смотри только я стал увеличивать меню и оно уже не работает... ты принцип то не рассказал

Код


<html>    
<head>    
<title></title>    
<META http-equiv="Content-Type" content="text/html; charset=windows-1251">    
 <Style>    
.menu_light{background-color:#000000;font-family:Verdana,Arial;font-size:10px;font-weight:bold;color:#ffffff;text-decoration:none;}    
.menu{background-color:#000000;border:1px solid #ffffff;border-bottom:0;padding:2px 5px; width: 200px}    
 </Style>    
<script language="JavaScript">    
function showdiv(id, num) {    
document.getElementById(id).style.display = num ? "block" : "none";    
}    
 </SCRIPT>    
</head>    
<body topmargin="0" leftmargin="0">
<table width="200" border="0" cellspacing="0" cellpadding="0">    
<tr onMouseOver="showdiv('1', 1)" onMouseOut="showdiv('1', 0)">    
<td width="200"><div class="menu"><a href="/ind.htm" class="menu_light">Новости</a></div></td>    
<td valign="top">    
<div id="1" style="display:none;position:absolute;width:150px;z-index:1;left:200px">    
<iframe src="1.htm" frameborder="1" marginwidth="0" marginheight="0" scrolling="no" width="200" height="120"></iframe>    
</div>    
</td>    
</tr>    
<tr onMouseOver="showdiv('2', 1)" onMouseOut="showdiv('2', 0)">    
<td width="200"><div class="menu"><a href="/ind.htm" class="menu_light">Трудности</a></div></td>    
<td valign="top">    
<div id="2" style="display:none;position:absolute;width:150px;z-index:1;left:200px">    
<iframe src="2.htm" frameborder="1" marginwidth="0" marginheight="0" scrolling="no" width="200" height="60"></iframe>    
</div>    
</td>    
</tr>    
</table>    
</body></html>

Добавлено @ 12:56
Ciber SLasH, все дошдо до меня!!! просто ширину ячейки нужно сделать больше ширины <div> и будет тогда мне счастье!!!

Ну что думаю вопрос решен!!!! МОЙ ТЕБЕ РЕСПЕКТ!!!!
Ты лучший!!!!! А ведь народ до сих пор думает как же сделать...а ты не стал думать, ты просто сделал!!!! Надеюсь что больше непредвиденных ситуаций не случится.... но пока не буду закрывать тему!!! А вдруг еще нужно будет что-нить по этому вопросу узнать...

Думаю этот топик можно добавить в учебное пошаговое пособие!!!

ОнКофе

Дата 23.3.2006, 13:51 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет

Ciber SLasH, вот что не получается... я бы хотел чтобы подменю немного (padding-left:2) отступало от основного меню.... попробовал - ничего не вышло... Opera снова начинает парить мозг... можно ли это как-нибудь сделать? Или хотя бы чтобы в Opera отступа не было а во всех других браузерах отступ был???

Код


<div id="1" style="display:none;position:absolute;width:150px;z-index:1;left:90px;padding-left:2">

Ciber SLasH

Дата 23.3.2006, 14:35 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

Поставь:
1) в классе menu: width: 198px
2) в DIV-ах: left:200px

ОнКофе

Дата 23.3.2006, 14:52 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет

Ciber SLasH, тогда Mozilla FireFox накладывает подменю на пункты меню и вообще никакого отступа не получается... а в Opera и IE нормально!
Добавлено @ 14:57
Ciber SLasH, вообще нужно просто отслеживать когда пользователь зашел с Opera и тогда просто накладывать подменю на меню..... и все!

Ciber SLasH

Дата 23.3.2006, 16:00 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type='text/javascript'>
function showdiv(id, num) {
document.getElementById(id).style.display = num ? "block" : "none";
}
</script>
<style type='text/css'>
body {margin: 0; padding: 0}
.menu_light{
    font: bold 10px Verdana,Arial;
    text-decoration: none;
    color: white;
    background-color: black;
}
.menu{
    width: 198px;
    border-bottom: 0;
    padding: 2px 5px;
    border: 1px solid white;
    background-color: black;
}
.submenu {
    position: absolute;
    left: 212px;
    width: 150px;
    display: none;
    z-index: 1;
    border: 1px solid black;
}
.submenu iframe {
    width: 100px;
    height: 20px;
    margin: 0;
}
</style>
</head>

<body>
<table cellspacing="0" cellpadding="0" border="0">
<tr onMouseOver="showdiv('s1', 1)" onMouseOut="showdiv('s1', 0)">
    <td width="220"><div class="menu"><a href="/ind.htm" class="menu_light">Новости</a></div></td>
    <td valign="top">
        <div id="s1" class='submenu'><iframe src="1.htm" scrolling="no"></iframe></div>
    </td>
</tr>
<tr onMouseOver="showdiv('s2', 1)" onMouseOut="showdiv('s2', 0)">
    <td width="220"><div class="menu"><a href="/ind.htm" class="menu_light">Трудности</a></div></td>
    <td valign="top">
        <div id="s2" class='submenu'><iframe src="2.htm" scrolling="no"></iframe></div>
    </td>
</tr>
</table>
</body>
</html>

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »