Форум

IIIgun · #1 (**permalink**) 16.05.2011, 00:17

есть два пункта меню, первый:

<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';
}

IIIgun · #2 (**permalink**) 16.05.2011, 00:22

не пойму что он мне делает, по логике вроде правильно, поставил алерты так alert("bbbb"); вообще не выводится, мало того, если с первого пункта меню навести на второй то никакой задержки не видно, хотя и устанавлен
setTimeout(vis,1000); задержка работает только если с первого пункта перевести курсор на остальное содержимое страницы

IIIgun · #3 (**permalink**) 16.05.2011, 00:23

в чем ошибся?

IIIgun · #4 (**permalink**) 16.05.2011, 00:25

может дело в том что две функции выполняются одновременно?

ksa · #5 (**permalink**) 16.05.2011, 09:20

Сообщение от IIIgun

в чем ошибся?

Начни уже делать полные тестовые примеры, а не огрызки...

IIIgun · #6 (**permalink**) 16.05.2011, 14:47

так все же вставил, мне css еще вставить что ли, код же понятен, наводя на первый элемент, делаю видимым второй через свойство стиля document.getElementById(id).style.display='block'; и т.д.

IIIgun · #7 (**permalink**) 16.05.2011, 14:57

отделил меню, 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>

IIIgun · #8 (**permalink**) 16.05.2011, 14:58

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;
}

IIIgun · #9 (**permalink**) 16.05.2011, 14:59

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';
}

IIIgun · #10 (**permalink**) 16.05.2011, 15:00

ну я думаю итак понятно было.....

Форум

Справочник

Discord чат

Курсы javascript