Javascript-форум - Что то никак не пойму я логику

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Что то никак не пойму я логику (https://javascript.ru/forum/misc/17356-chto-nikak-ne-pojjmu-ya-logiku.html)

Что то никак не пойму я логику

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

<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); задержка работает только если с первого пункта перевести курсор на остальное содержимое страницы

в чем ошибся?:(

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

Цитата:

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

в чем ошибся?

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

так все же вставил, мне 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';
}

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

Цитата:

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

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

Тут дело не в понятии... Все должно быть четко проиллюстрировано. А то потом выяснится что есть еще какой-то фактор который ранее был не виден и всё такое...

Итого имеем вот такую страничку...

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/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;
}
</style>
<script type="text/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';
}
</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>

Что теперь с этим делать? Чего смотреть? Чего не так?

Поскольку организация меню вовсе колхозная и всё желательно делать совсем не так... :) Есть списки... Вложеные списки... Вот ими и делаются такого рода менюшки.

Вот эта связка вообще убийственная

var bool=false;
...
if(bool==false)

Вот примерчик с меню/подменю...

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
ul {
	list-style: none;
}
a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
#menu > li {
	position: relative;
	float: left;
	margin-right: 10px;
}
#menu > li:hover .sub_menu {
	display: block;
}}
.sub_menu {
	position: absolute;
	top: 100%;
	left: 0;
	display: none;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<ul id='menu'>
	<li><a href="#">НОВОСТИ</a>
		<ul class='sub_menu'>
			<li><a href="#">Основные новости</a></li>
			<li><a href="#">Новости погоды</a></li>
		</ul>
	</li>
	<li><a href="#">СПОРТ</a></li>
	<li><a href="#">КУЛЬТУРА</a></li>
	<li><a href="#">НАУКА</a></li>
	<li><a href="#">НАГРАДЫ</a></li>
<ul>
</body>
</html>

Цитата:

Сообщение от ksa (Сообщение 104913)

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

Цитата:

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

проблемы я описал выше и на примере они видны, я хотел бы узнать отчего они возникли

Из-за не верного подхода к хтмл-разметки...

Цитата:

Сообщение от ksa (Сообщение 105052)

Из-за не верного подхода к хтмл-разметки...

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