-
Вебмастеру
(
http://forum.oszone.net/forumdisplay.php?f=22)
не получается скрыть меню при onmouseout
всем привет.
скачал тут выпадающее меню на ксс. проблема в том, что при убирании курсора с менюшки менюшка не сворачивается. пробовал по аналогии со скриптами прописывать 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>
|
Так в коде и нет функции для сокрытия менюшки.
Добавим ещё одну функцию:
Код:
function montre2(id) {
document.getElementById(id).style.display='none';
}
и вызывать её надо по отведению курсора. Например, так:
Код:
<dt onmouseover="javascript:montre('smenu3');" onmouseout="montre2('smenu3');">Фото работ</dt>
Но проблема здесь в том, что меню будет скрываться по отведению курсора от надписи "Фото работ", т.ч. в самом меню выбрать ничего не получится. Попробуйте поэкспериментировать с положением этого onmouseout. Может быть если его поставить в другие места кода, то будет в нужный момент скрываться. Мне в голову идёт только изобретение велосипеда, но, быть может, есть и простой способ. |
При наведении мыши на другой раздел меню все остальные скрывать :). То есть активным (развернутым) будет только один раздел меню со своими подразделами |
dmitryst, в этом скрипте так и сделано)
|
Coutty, а в чем тогда проблема? Пока мышь не наведена на другой пункт меню, можно выбрать из текущего. MouseOut вообще не применять :)
|
Видимо, проблема в том, что если отвести курсор вниз на страницу, то висящее меню будет мешать, нэ?
|
Цитата:
Цитата Coutty
Видимо, проблема в том, что если отвести курсор вниз на страницу, то висящее меню будет мешать, нэ? »
|
именно так на даный момент и происходит :) после отвода курсора менюшка остается. чтоб ее убрать надо навести на менюшку которая не открывается. так поэкспериментирую с местоположением чтоб получилось. |
всем привет. это снова я и мы снова на передаче "Помогите балбесу" :)
попробовал повставлять указанный код в разные места, но дело кончается всегда одним - как только мышь уходит с "Фото работ" менюшка исчезает и выбрать ничего нельзя. собственно как и сказал
Цитата:
Цитата Coutty
Но проблема здесь в том, что меню будет скрываться по отведению курсора от надписи "Фото работ", т.ч. в самом меню выбрать ничего не получится. Попробуйте поэкспериментировать с положением этого 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>
|
koresaram, а навесить onMouseOver на dt и onMouseOut на ul :)
|
Цитата:
Цитата dmitryst
а навесить onMouseOver на dt и onMouseOut на ul »
|
да я б навесил если б жаваскрипт знал :)
пока все решаю методом тыка :))) |
koresaram, ну так делаем - к dt дописываем onmouseover - он открывает видимое меню, к ul дописываем onmouseout - он скрывает это меню.
Типа пример
|
обнаружился "баг" менюшка в ИЕ6 не хочет работать :)
или у меня эксплорер гонит. люди, зайдите кто под ие6 на сайт www.remontvd.ru напишите менюшка выпадающая пашет или нет? |
Время: 02:35.
© OSzone.net 2001-
