Что то никак не пойму я логику
есть два пункта меню, первый:
<a href="" onMouseOver="focus_menu('news');" onMouseOut="mokus_menu('news');">НОВОСТИ</a>
второй:
<div class="sub_menu">
<div id="news" class="sub" onMouseOver="focus('news');" onMouseOut="mokus('news');">
<a href="">Основные новости</a><br>
<a href="">Новости погоды</a><br>
</div>
написал код js:
var bool=false;
function focus_menu (id)
{
document.getElementById(id).style.display='block';
}
function mokus_menu (id)
{
function vis()
{ if(bool==false)document.getElementById(id).style.display='none'; alert("aaaaa");
}
setTimeout(vis,1000);
}
function focus (id)
{
bool=true; alert("bbbb");
}
function mokus (id)
{
bool=false; document.getElementById(id).style.display='none';
}
|
не пойму что он мне делает, по логике вроде правильно, поставил алерты так alert("bbbb"); вообще не выводится, мало того, если с первого пункта меню навести на второй то никакой задержки не видно, хотя и устанавлен
setTimeout(vis,1000); задержка работает только если с первого пункта перевести курсор на остальное содержимое страницы |
в чем ошибся?:(
|
может дело в том что две функции выполняются одновременно?
|
Цитата:
|
так все же вставил, мне css еще вставить что ли, код же понятен, наводя на первый элемент, делаю видимым второй через свойство стиля document.getElementById(id).style.display='block'; и т.д.
|
отделил меню, html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Ps</title>
<style type="text/css">
@import url(css3.css);
</style>
<script type="text/javascript" src="js/library.js"></script>
</head>
<body>
<div id="vse">
<div class="menu">
<div style="padding: 0px 12px 0px 12px;">
<a href="" onMouseOver="focus_menu('news');" onMouseOut="mokus_menu('news');">НОВОСТИ</a>
<a href="" onmouseover="focus_menu('sport')" onmouseout="mokus_menu('sport')">СПОРТ</a>
<a href="" onmouseover="focus_menu('kult')" onmouseout="mokus_menu('kult')">КУЛЬТУРА</a>
<a href="" onmouseover="focus_menu('nauka')" onmouseout="mokus_menu('nauka')">НАУКА</a>
<a href="" onmouseover="focus_menu('nagr')" onmouseout="mokus_menu('nagr')">НАГРАДЫ</a>
<div class="clear" onfocus=""></div>
</div>
</div>
<div class="clear"></div>
<div class="sub_menu">
<div id="news" class="sub" onMouseOver="focus('news');" onMouseOut="mokus('news');">
<a href="">Основные новости</a><br>
<a href="">Новости погоды</a><br>
</div>
<div id="sport" class="sub">
2
</div>
<div id="kult" class="sub">
3
</div>
<div id="nauka" class="sub">
4
</div>
<div id="nagr" class="sub">
5
</div>
</div>
</div>
</body>
</html>
|
css:
body{
padding:0;
margin:0;
background: #efefef;
text-align:center;}
#vse{
margin:0 auto 0 auto;
width:1000px; background: #fff;
position: relative;}
.menu {
background: url('images/menu.jpg') #86a262 repeat-x;
width: 100%;
float: left;
}
.menu a {
background: url('images/menu.jpg') #86a262 repeat-x;
display: block;
float: left;
width: 165px;
color: #ffffff;
font-size: 20px;
text-decoration: none;
padding: 8px 0px 9px 0px;
text-align: center;
}
.menu a:hover {
background:#648040;
}
.sub_menu {
background: #123;
position: absolute;
left: 0px;
}
.sub_menu .sub {
width: 200px;
background: #ffffff;
border: 1px solid #000;
position: absolute;
}
.sub_menu #news {
display: none;
float: left;
left: 12px;
}
.sub_menu #sport {
display: none;
float: left;
left: 177px;
}
.sub_menu #kult {
display: none;
float: left;
left: 342px;
}
.sub_menu #nauka {
display: none;
float: left;
left: 507px;
}
.sub_menu #nagr {
display: none;
float: left;
left: 672px;
}
div.clear {
clear: both;
}
|
javascript:
var bool=false;
function focus_menu (id)
{
document.getElementById(id).style.display='block';
}
function mokus_menu (id)
{
function vis()
{ if(bool==false)document.getElementById(id).style.display='none'; alert("aaaaa");
}
setTimeout(vis,1000);
}
function focus (id)
{
bool=true; alert("bbbb");
}
function mokus (id)
{
bool=false; document.getElementById(id).style.display='none';
}
|
ну я думаю итак понятно было.....
|
| Часовой пояс GMT +3, время: 22:21. |