Войти

Показать полную графическую версию : не получается скрыть меню при onmouseout

koresaram
27-02-2009, 17:32
всем привет.
скачал тут выпадающее меню на ксс. проблема в том, что при убирании курсора с менюшки менюшка не сворачивается. пробовал по аналогии со скриптами прописывать hide но не получается ничего. собственно хелп :)



<script type="text/javascript">
<!--
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>


<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
background: #CFAE79;
font: 90% Comic Sans MS, verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 250;
left: 50;
z-index:100;
width: 100%; /* precision for Opera */
}
#menu dl {
float: left;
width: 10em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #CFAE79;
border: 1px solid #CFAE79;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid #CFAE79;
}
#menu li {
text-align: center;
background: #CFAE79;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 1px none;
}
#menu li a:hover, #menu dt a:hover {
background: #BC9259;
}

#site {
position: absolute;
z-index: 1;
top : 50px;
left : 10px;
color: #CFAE79;
background-color: #CFAE79;
padding: 5px;
border: 1px solid #CFAE79;
}

.mentions {
position: absolute;
top : 300px;
left : 10px;
color: #CFAE79;
background-color: #CFAE79;
}
-->
</style>
<script charset="utf-8" id="injection_graph_func" src="injection_graph_func.js"></script>

</head>

<body bgcolor="#CFAE79">

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td width="25%" align="center">
<img border="0" src="img/004.jpg" width="120" height="180"></td>
<td width="25%" align="center">
<img border="0" src="img/003.jpg" width="120" height="180"></td>
<td width="25%" align="center">
<img border="0" src="img/001.jpg" width="120" height="180"></td>
<td width="25%" align="center">
<img border="0" src="img/002.jpg" width="120" height="180"></td>
<td width="25%" align="center">
<img border="0" src="img/logo.jpg" width="158" height="180"></td>
</tr>
</table>
<center>Добро пожаловать на наш сайт! <br>
Мы предоставляем услуги по ремонту любой сложности.<br>
Мы ориентируемся на желания и возможности наших клиентов, поэтому ищем индивидуальный подход к каждому.</center>
<div id="menu" align="center">
<dl>
<dt onmouseover="javascript:montre();"><a href="index.html">Главная</a></dt>

</dl>


<dl>
<dt onmouseover="javascript:montre('smenu1');">Цены</dt>
<dd style="display: block;" id="smenu1">
<ul>
<li><a href="priceelektro.html">Электрика</a></li>
<li><a href="pricesantehnika.html">Сантехника</a></li>
<li><a href="pricekrep.html">Крепежные, монтажные работыные, монтажные работы</a></li>
<li><a href="pricemebel.html">Мебель</a></li>
<li><a href="dveri.html">Двери</a></li>
<li><a href="dopwork.html">Дополнительные работы</a></li>
<li><a href="balkon.html">Балкон</a></li>
<li><a href="pol.html">Пол</a></li>
<li><a href="steny.html">Стены</a></li>
<li><a href="potolok.html">Потолок</a></li>
</ul>

</dd>
</dl>


<dl>
<dt onmouseover="javascript:montre('smenu3');">Фото работ</dt>
<dd style="display: none;" id="smenu3">
<ul>

<li><a href="fotomremont.html">Мелкий ремонт</a></li>
<li><a href="fotokosmremont.html">Косметический ремонт</a></li>
<li><a href="fotokapremont.html">Капитальный ремонт</a></li>
<li><a href="fotoofficeremont.html">Ремонт офисов</a></li>

</ul>

</dd>
</dl>

<dl>
<dt onmouseover="javascript:montre();"><a href="vacancy.html">Вакансии</a></dt>

</dl>

<dl>
<dt onmouseover="javascript:montre();"><a href="contacts.html">Контакты</a></dt>

</dl>
<dl>
<dt onmouseover="javascript:montre();"><a href="order.html">Оставить заявку</a></dt>

</dl>

</div>
Coutty
27-02-2009, 18:15
Так в коде и нет функции для сокрытия менюшки.
Добавим ещё одну функцию:
function montre2(id) {
document.getElementById(id).style.display='none';
}
и вызывать её надо по отведению курсора. Например, так:
<dt onmouseover="javascript:montre('smenu3');" onmouseout="montre2('smenu3');">Фото работ</dt>
Но проблема здесь в том, что меню будет скрываться по отведению курсора от надписи "Фото работ", т.ч. в самом меню выбрать ничего не получится. Попробуйте поэкспериментировать с положением этого onmouseout. Может быть если его поставить в другие места кода, то будет в нужный момент скрываться. Мне в голову идёт только изобретение велосипеда, но, быть может, есть и простой способ.
dmitryst
27-02-2009, 18:24
есть и простой способ. »
При наведении мыши на другой раздел меню все остальные скрывать :). То есть активным (развернутым) будет только один раздел меню со своими подразделами
Coutty
27-02-2009, 18:46
dmitryst, в этом скрипте так и сделано)
dmitryst
27-02-2009, 18:52
Coutty, а в чем тогда проблема? Пока мышь не наведена на другой пункт меню, можно выбрать из текущего. MouseOut вообще не применять :)
Coutty
27-02-2009, 18:58
Видимо, проблема в том, что если отвести курсор вниз на страницу, то висящее меню будет мешать, нэ?
koresaram
27-02-2009, 20:03
Видимо, проблема в том, что если отвести курсор вниз на страницу, то висящее меню будет мешать, нэ? »
именно так на даный момент и происходит :) после отвода курсора менюшка остается. чтоб ее убрать надо навести на менюшку которая не открывается. так поэкспериментирую с местоположением чтоб получилось.
koresaram
06-03-2009, 13:04
всем привет. это снова я и мы снова на передаче "Помогите балбесу" :)
попробовал повставлять указанный код в разные места, но дело кончается всегда одним - как только мышь уходит с "Фото работ" менюшка исчезает и выбрать ничего нельзя. собственно как и сказал

Но проблема здесь в том, что меню будет скрываться по отведению курсора от надписи "Фото работ", т.ч. в самом меню выбрать ничего не получится. Попробуйте поэкспериментировать с положением этого onmouseout. Может быть если его поставить в другие места кода, то будет в нужный момент скрываться. Мне в голову идёт только изобретение велосипеда, но, быть может, есть и простой способ. »

я так думаю, что надо скрытие привязать как-то к тегу <ul> чтоб когда мышь уходит с элемента этого списка то менюшка скрывалась.



<div id="menu" align="center">

<dl>
<dt onmouseover="javascript:montre('smenu1');">Цены</dt>
<dd style="display: block;" id="smenu1">
<ul>
<li><a href="priceelektro.html">Электрика</a></li>
<li><a href="pricesantehnika.html">Сантехника</a></li>
<li><a href="pricekrep.html">Крепежные, монтажные работыные, монтажные работы</a></li>
<li><a href="pricemebel.html">Мебель</a></li>
<li><a href="dveri.html">Двери</a></li>
<li><a href="dopwork.html">Дополнительные работы</a></li>
<li><a href="balkon.html">Балкон</a></li>
<li><a href="pol.html">Пол</a></li>
<li><a href="steny.html">Стены</a></li>
<li><a href="potolok.html">Потолок</a></li>
</ul>

</dd>
</dl>



пришла в голову идея. реализовал, вроде работает но с точки зрения программирования полный бред конечно :) добавил функцию раскрытия меню и скрытия к каждому пункту менюшки. типа при наводке на пункт надо отображать все меню и при убирании мышки скрывать. но пока не уберешь совсем за пределы менюшки, то скрыть не получится, потому что надо показывать всю менюшку :)))


<dt onmouseover="javascript:montre('smenu1');">Цены</dt>
<dd style="display: block;" id="smenu1">
<ul>
<li onmouseover="javascript:montre('smenu1');" onmouseout="montre2('smenu1');"><a href="priceelektro.html">Электрика</a></li>
<li onmouseover="javascript:montre('smenu1');" onmouseout="montre2('smenu1');"><a href="pricesantehnika.html">Сантехника</a></li>
<li onmouseover="javascript:montre('smenu1');" onmouseout="montre2('smenu1');"><a href="pricekrep.html">Крепежные, монтажные работыные, монтажные работы</a></li>
<li onmouseover="javascript:montre('smenu1');" onmouseout="montre2('smenu1');"><a href="pricemebel.html">Мебель</a></li>
<li onmouseover="javascript:montre('smenu1');" onmouseout="montre2('smenu1');"><a href="dveri.html">Двери</a></li>
<li onmouseover="javascript:montre('smenu1');" onmouseout="montre2('smenu1');"><a href="dopwork.html">Дополнительные работы</a></li>
<li onmouseover="javascript:montre('smenu1');" onmouseout="montre2('smenu1');"><a href="balkon.html">Балкон</a></li>
<li onmouseover="javascript:montre('smenu1');" onmouseout="montre2('smenu1');"><a href="pol.html">Пол</a></li>
<li onmouseover="javascript:montre('smenu1');" onmouseout="montre2('smenu1');"><a href="steny.html">Стены</a></li>
<li onmouseover="javascript:montre('smenu1');" onmouseout="montre2('smenu1');"><a href="potolok.html">Потолок</a></li>
</ul>

</dd>
dmitryst
06-03-2009, 18:40
koresaram, а навесить onMouseOver на dt и onMouseOut на ul :)
koresaram
07-03-2009, 10:29
а навесить onMouseOver на dt и onMouseOut на ul »
да я б навесил если б жаваскрипт знал :)
пока все решаю методом тыка :)))
dmitryst
07-03-2009, 10:46
koresaram, ну так делаем - к dt дописываем onmouseover - он открывает видимое меню, к ul дописываем onmouseout - он скрывает это меню.
Типа пример (http://design.originweb.info/dhtml/onmouseout.html)
koresaram
07-03-2009, 15:46
обнаружился "баг" менюшка в ИЕ6 не хочет работать :)
или у меня эксплорер гонит. люди, зайдите кто под ие6 на сайт www.remontvd.ru напишите менюшка выпадающая пашет или нет?



© OSzone.net 2001-2012