Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.07.2011, 22:59
Аватар для Барин
Новичок на форуме
Отправить личное сообщение для Барин Посмотреть профиль Найти все сообщения от Барин
 
Регистрация: 21.03.2010
Сообщений: 9

Всплывающее меню (проблемы)
Приветствую всех!
Сделал контекстное меню, но есть неполадки в работе. Так как разбираюсь в Яваскрипте я слабо, то, возможно, мой способ покажется страшным. Однако, если есть советы, я с удовольствием приму их к сведению.
Проблема: Меню возникает по клику и исчезает по уведению мыши, однако, после выбора пункта меню, хочу, чтобы оно закрывалось, но не могу сделать этого. Промучавшись некоторе время замудрил существующий вариант ещё больше. Скрипт стал ПОЧТИ идеален: меню открывается по клику, закрывается по уведению или после выбора, однако, если оно закрылось по выбору пункта, то потом оно откроется нормально, а если оно закрылось по уведению, то потом открывается только со второго раза.
Код (оба варианта меню):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Меню</title>
<script>
function mark(id)
{
	 document.getElementById(id).className = 'hover';
}
/*Сделать не выделенным*/
function not_mark(id)
{
	 document.getElementById(id).className = 'not_hover';
}
/*Показывать если не виден, скрывать если виден*/
function show_hide(id)
{
	 if (document.getElementById(id).className=="")
	 {
		 document.getElementById(id).className="invisible";
	 }
	 else
	 {
		 document.getElementById(id).className="";
	 }
}
/*показать элемент, назначив ему определённный класс*/
function show2(id,classN)
{
	 document.getElementById(id).className=classN;	
 }
/*Сарятать элемент*/
function hide(id)
{
	 document.getElementById(id).className='invisible';
}
function hide2(id)
{
	 if (document.getElementById(id).style.display == 'none')
	 {
		 document.getElementById(id).style.display = '';	
	 }
	 else
	 {
		 document.getElementById(id).style.display = 'none';	
	 }
}
/*Из одного элемента вставить текст в другой*/
function move(id,id2)
{
	 document.getElementById(id).innerHTML = document.getElementById(id2).innerHTML;
}
</script>
<style>
/*Для всех контекстных меню*/
div.context_menu{
position:absolute;
padding-top:4px; padding-bottom:4px; padding-left:3px; padding-right:5px;
border: 1px solid #999999;
border-right: 2px solid #999999;
border-bottom: 2px solid #999999;
background-color:#fcfcfc;
}
/*Стиль пунктов меню*/
div.context_menu div.not_hover{
font-size:12px; color:333333;
text-indent:8px;
height:12px;
cursor:default;
margin-left:2px;
}
div.context_menu div.hover{
font-size:12px; color:333333;
text-indent:8px;
height:12px;
cursor:default;
text-decoration:underline;
padding-left:2px;
}
/*Убрать подчёркивание стрелки*/
img.context_menu_bullet{
float:left;
padding-top:4px;
padding-left:1px;
}
.invisible{
display:none;
}
</style>
</head>
<body>	

 <div style='float:left;margin-top:54px; margin-left:20px; width:130px; text-align:left; margin-right:15px;color:#000000;'>
	 <div id='vibor2_menu_place' onClick=show2('vibor2_menu','context_menu') onMouseOut=hide('vibor2_menu')>
		 <div id='vibor2_menu_current' style='float:left;text-decoration:underline; cursor:default;font-size:11px;'>Выбор 1</div>
		 <img class='context_menu_bullet' src='bullet_mini_bottom.png'>
						
		 <div id='vibor2_menu' onMouseOver=show2('vibor2_menu','context_menu') class='invisible' style='margin-top:10px; margin-left:-14px; width:130px;text-align:left;color:#333333;'>
			 <div id='vibor2_menu_punkt_1' class='not_hover' onMouseOver='mark(this.id)'  onMouseOut='not_mark(this.id)' onClick=move('vibor2_menu_current','vibor2_menu_punkt_1')>Выбор 1</div>
			 <div id='vibor2_menu_punkt_2' class='not_hover' onMouseOver='mark(this.id)'  onMouseOut='not_mark(this.id)' onClick=move('vibor2_menu_current','vibor2_menu_punkt_2')>Выбор 2</div>	
			 <div id='vibor2_menu_punkt_3' class='not_hover' onMouseOver='mark(this.id)'  onMouseOut='not_mark(this.id)' onClick=move('vibor2_menu_current','vibor2_menu_punkt_3')>Выбор 3</div>
		 </div>
	 </div>

<div style='float:left;margin-top:54px; margin-left:20px; width:130px; text-align:left; margin-right:15px;color:#000000;'>
	 <div id='vibor_menu_place' onClick=show2('vibor_menu','context_menu'),hide2('vibor_menu') onMouseOut=hide('vibor_menu')>
		 <div id='vibor_menu_current' style='float:left;text-decoration:underline; cursor:default;font-size:11px;'>Выбор 1</div>
		 <img class='context_menu_bullet' src='bullet_mini_bottom.png'>
						
		 <div id='vibor_menu' onMouseOver=show2('vibor_menu','context_menu') class='invisible' style='margin-top:10px; margin-left:-14px; width:130px;text-align:left;color:#333333;display:none;'>
			 <div id='vibor_menu_punkt_1' class='not_hover' onMouseOver='mark(this.id)'  onMouseOut='not_mark(this.id)' onClick=move('vibor_menu_current','vibor_menu_punkt_1')>Выбор 1</div>
			 <div id='vibor_menu_punkt_2' class='not_hover' onMouseOver='mark(this.id)'  onMouseOut='not_mark(this.id)' onClick=move('vibor_menu_current','vibor_menu_punkt_2')>Выбор 2</div>	
			 <div id='vibor_menu_punkt_3' class='not_hover' onMouseOver='mark(this.id)'  onMouseOut='not_mark(this.id)' onClick=move('vibor_menu_current','vibor_menu_punkt_3')>Выбор 3</div>
		 </div>
	 </div>

</body>
</html>

Для удобства, выкладываю файлом.
Помогите разобраться.
Вложения:
Тип файла: zip Меню.zip (1.8 Кб, 0 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 04.07.2011, 09:18
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,134

Сообщение от Барин
Помогите разобраться.
Для начала проверь количество открытых и закрытых ДИВов... Напомню что есть прекрасные конструкции

<ul>
   <li>Item</li>
</ul>


Они ооочень хорошо используются для создания меню. Да и разметка с ними смотрится гораздо приятнее...
Ответить с цитированием
  #3 (permalink)  
Старый 04.07.2011, 18:28
Аватар для Барин
Новичок на форуме
Отправить личное сообщение для Барин Посмотреть профиль Найти все сообщения от Барин
 
Регистрация: 21.03.2010
Сообщений: 9

С дивами всё хорошо.
Ответить с цитированием
  #4 (permalink)  
Старый 05.07.2011, 08:27
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,134

Сообщение от Барин
С дивами всё хорошо.
В твоём примере не закрыто как минимум два ДИВа...
Ответить с цитированием
  #5 (permalink)  
Старый 05.07.2011, 10:03
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,134

Барин, даже после добавления недостающих деталей потестить твой пример не предоставляется возможным...
Вот можешь попробовать сам.

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
/*Для всех контекстных меню*/
div.context_menu {
	position:absolute;
	padding-top:4px; padding-bottom:4px; padding-left:3px; padding-right:5px;
	border: 1px solid #999999;
	border-right: 2px solid #999999;
	border-bottom: 2px solid #999999;
	background-color:#fcfcfc;
}
/*Стиль пунктов меню*/
div.context_menu div.not_hover {
	font-size:12px; color:333333;
	text-indent:8px;
	height:12px;
	cursor:default;
	margin-left:2px;
}
div.context_menu div.hover {
	font-size:12px; color:333333;
	text-indent:8px;
	height:12px;
	cursor:default;
	text-decoration:underline;
	padding-left:2px;
}
/*Убрать подчёркивание стрелки*/
img.context_menu_bullet {
	float:left;
	padding-top:4px;
	padding-left:1px;
}
.invisible {
	display:none;
}
</style>
<script type="text/javascript">
function mark(id) {
	document.getElementById(id).className = 'hover';
}
/*Сделать не выделенным*/
function not_mark(id) {
	document.getElementById(id).className = 'not_hover';
}
/*Показывать если не виден, скрывать если виден*/
function show_hide(id) {
	if (document.getElementById(id).className=="") {
		document.getElementById(id).className="invisible";
	} else {
		document.getElementById(id).className="";
	}
}
/*показать элемент, назначив ему определённный класс*/
function show2(id,classN) {
	document.getElementById(id).className=classN;	
 }
/*Сарятать элемент*/
function hide(id) {
	document.getElementById(id).className='invisible';
}
function hide2(id) {
	if (document.getElementById(id).style.display == 'none') {
		document.getElementById(id).style.display = '';	
	} else {
		document.getElementById(id).style.display = 'none';	
	}
}
/*Из одного элемента вставить текст в другой*/
function move(id,id2) {
	document.getElementById(id).innerHTML = document.getElementById(id2).innerHTML;
}
</script>
</head>
<body>
<div style='float:left;margin-top:54px; margin-left:20px; width:130px; text-align:left; margin-right:15px;color:#000000;'>
	<div id='vibor2_menu_place' onClick=show2('vibor2_menu','context_menu') onMouseOut=hide('vibor2_menu')>
		<div id='vibor2_menu_current' style='float:left;text-decoration:underline; cursor:default;font-size:11px;'>Выбор 1</div>
		<img class='context_menu_bullet' src='bullet_mini_bottom.png'>
		<div id='vibor2_menu' onMouseOver=show2('vibor2_menu','context_menu') class='invisible' style='margin-top:10px; margin-left:-14px; width:130px;text-align:left;color:#333333;'>
			<div id='vibor2_menu_punkt_1' class='not_hover' onMouseOver='mark(this.id)'  onMouseOut='not_mark(this.id)' onClick=move('vibor2_menu_current','vibor2_menu_punkt_1')>Выбор 1</div>
			<div id='vibor2_menu_punkt_2' class='not_hover' onMouseOver='mark(this.id)'  onMouseOut='not_mark(this.id)' onClick=move('vibor2_menu_current','vibor2_menu_punkt_2')>Выбор 2</div>	
			<div id='vibor2_menu_punkt_3' class='not_hover' onMouseOver='mark(this.id)'  onMouseOut='not_mark(this.id)' onClick=move('vibor2_menu_current','vibor2_menu_punkt_3')>Выбор 3</div>
		</div>
	</div>
</div>
<div style='float:left;margin-top:54px; margin-left:20px; width:130px; text-align:left; margin-right:15px;color:#000000;'>
	<div id='vibor_menu_place' onClick=show2('vibor_menu','context_menu'),hide2('vibor_menu') onMouseOut=hide('vibor_menu')>
		<div id='vibor_menu_current' style='float:left;text-decoration:underline; cursor:default;font-size:11px;'>Выбор 1</div>
		<img class='context_menu_bullet' src='bullet_mini_bottom.png'>
		<div id='vibor_menu' onMouseOver=show2('vibor_menu','context_menu') class='invisible' style='margin-top:10px; margin-left:-14px; width:130px;text-align:left;color:#333333;display:none;'>
			<div id='vibor_menu_punkt_1' class='not_hover' onMouseOver='mark(this.id)'  onMouseOut='not_mark(this.id)' onClick=move('vibor_menu_current','vibor_menu_punkt_1')>Выбор 1</div>
			<div id='vibor_menu_punkt_2' class='not_hover' onMouseOver='mark(this.id)'  onMouseOut='not_mark(this.id)' onClick=move('vibor_menu_current','vibor_menu_punkt_2')>Выбор 2</div>	
			<div id='vibor_menu_punkt_3' class='not_hover' onMouseOver='mark(this.id)'  onMouseOut='not_mark(this.id)' onClick=move('vibor_menu_current','vibor_menu_punkt_3')>Выбор 3</div>
		</div>
	</div>
</div>
</body>
</html>
Ответить с цитированием
  #6 (permalink)  
Старый 05.07.2011, 10:06
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,134

Хотя в Опере потестить можно. Изначально смотрел в ИЕ7, так там даже на выпадающее меню не попасть.
Ответить с цитированием
  #7 (permalink)  
Старый 05.07.2011, 10:12
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,134

Барин, если вместо
this.id

использовать просто
this

то и функции заметно "облегчатся"...
function mark(Obj) {
	Obj.className = 'hover';
}
/*Сделать не выделенным*/
function not_mark(Obj) {
	Obj.className = 'not_hover';
}
Ответить с цитированием
  #8 (permalink)  
Старый 05.07.2011, 10:54
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,134

Барин, пример у тебя конечно из серии "как делать не нужно"... Но вот вроде то, что ты хотел.

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
/*Для всех контекстных меню*/
div.context_menu {
	position:absolute;
	padding-top:4px; padding-bottom:4px; padding-left:3px; padding-right:5px;
	border: 1px solid #999999;
	border-right: 2px solid #999999;
	border-bottom: 2px solid #999999;
	background-color:#fcfcfc;
}
/*Стиль пунктов меню*/
div.context_menu div.not_hover {
	font-size:12px; color:333333;
	text-indent:8px;
	height:12px;
	cursor:default;
	margin-left:2px;
}
div.context_menu div.hover {
	font-size:12px; color:333333;
	text-indent:8px;
	height:12px;
	cursor:default;
	text-decoration:underline;
	padding-left:2px;
}
/*Убрать подчёркивание стрелки*/
img.context_menu_bullet {
	float:left;
	padding-top:4px;
	padding-left:1px;
}
.invisible {
	display: none;
}
.item {
	float:left;
	text-decoration:underline; 
	cursor:default;
	font-size:11px;
}
</style>
<script type="text/javascript">
function mark(Obj) {
	Obj.className = 'hover';
}
/*Сделать не выделенным*/
function not_mark(Obj) {
	Obj.className = 'not_hover';
}
/*Показывать если не виден, скрывать если виден*/
function show_hide(Obj) {
	Obj.className=(document.getElementById(id).className=="")? 'invisible': ''
}
/*показать элемент, назначив ему определённный класс*/
function show2(id,classN) {
	document.getElementById(id).className=classN;	
 }
/*Сарятать элемент*/
function hide(id) {
	document.getElementById(id).className='invisible';
}
/*Из одного элемента вставить текст в другой*/
function move(id,Obj) {
	document.getElementById(id).innerHTML = Obj.innerHTML;
	Obj.parentNode.className='invisible'
}
</script>
</head>
<body>
<div style='float:left;margin-top:54px; margin-left:20px; width:130px; text-align:left; margin-right:15px;color:#000000;'>
	<div id='vibor2_menu_place' onmouseout="hide('vibor2_menu')">
		<div id='vibor2_menu_current' onclick="show2('vibor2_menu','context_menu')" class='item' style=''>Выбор 1</div>
		<img class='context_menu_bullet' src='bullet_mini_bottom.png'>
		<div id='vibor2_menu' onmouseover=show2('vibor2_menu','context_menu') class='invisible' style='margin-top:10px; margin-left:-14px; width:130px;text-align:left;color:#333333;'>
			<div id='vibor2_menu_punkt_1' class='not_hover' onmouseover='mark(this)'  onmouseout='not_mark(this)' onclick="move('vibor2_menu_current',this)">Выбор 1</div>
			<div id='vibor2_menu_punkt_2' class='not_hover' onmouseover='mark(this)'  onmouseout='not_mark(this)' onclick="move('vibor2_menu_current',this)">Выбор 2</div>	
			<div id='vibor2_menu_punkt_3' class='not_hover' onmouseover='mark(this)'  onmouseout='not_mark(this)' onclick="move('vibor2_menu_current',this)">Выбор 3</div>
		</div>
	</div>
</div>
<div style='float:left;margin-top:54px; margin-left:20px; width:130px; text-align:left; margin-right:15px;color:#000000;'>
	<div id='vibor_menu_place' onmouseout="hide('vibor_menu')">
		<div id='vibor_menu_current' onclick="show2('vibor_menu','context_menu')" class='item' style=''>Выбор 1</div>
		<img class='context_menu_bullet' src='bullet_mini_bottom.png'>
		<div id='vibor_menu' onmouseover=show2('vibor_menu','context_menu') class='invisible' style='margin-top:10px; margin-left:-14px; width:130px;text-align:left;color:#333333;'>
			<div id='vibor_menu_punkt_1' class='not_hover' onmouseover='mark(this)'  onmouseout='not_mark(this)' onclick="move('vibor_menu_current',this)">Выбор 1</div>
			<div id='vibor_menu_punkt_2' class='not_hover' onmouseover='mark(this)'  onmouseout='not_mark(this)' onclick="move('vibor_menu_current',this)">Выбор 2</div>	
			<div id='vibor_menu_punkt_3' class='not_hover' onmouseover='mark(this)'  onmouseout='not_mark(this)' onclick="move('vibor_menu_current',this)">Выбор 3</div>
		</div>
	</div>
</div>
</body>
</html>


В ИЕ7 не потестить конечно...
Ответить с цитированием
  #9 (permalink)  
Старый 07.07.2011, 09:22
Аватар для Барин
Новичок на форуме
Отправить личное сообщение для Барин Посмотреть профиль Найти все сообщения от Барин
 
Регистрация: 21.03.2010
Сообщений: 9

Спасибо, всё отлично работает!
А на IE 7 я и не расчитывал, на мой сайт вообще опасно заходить с этого браузера. Буду делать определение, если ИЕ ниже 8 версии, то буду перекидывать пользователя на страницу с загрузкой браузеров
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
События и всплывающее меню Zhazhah jQuery 4 10.03.2011 23:48
Всплывающее меню от <area> greatilya Элементы интерфейса 0 27.10.2009 15:05
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 14:37
всплывающее Javascript меню Dekker8 Events/DOM/Window 0 21.11.2008 21:45
Проблемы с меню на JS SeeD Общие вопросы Javascript 5 21.11.2008 19:44