Вертикальное выпадающее меню

Angela · March 7, 2009

Здравствуйте уважаемые мужчины!

Подскажите пожалуйста, что нужно добавить, чтобы меню оставалось когда курсор убирается с кнопки :lol:

<!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>
  <style type="text/css">
   #descr {
	position: relative; /* Относительное позиционирование */
	visibility: hidden; /* Прячем содержимое слоя */
	width: 150px;
   }
#navi {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#navi a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: Arial, Helvetica;
color: #000099;
padding: 3px;
margin-top: 0px;
border-bottom: 1px dashed #cccccc;
width: 150px;
}
#navi a:hover {
color: #000;
background-color: #99CCFF;
margin: 0px;
}
#navi li {
display: inline;
}
  </style> 
  <script type="text/javascript">
   function hiddenLayer() {
	document.getElementById("descr").style.visibility = "hidden";
   } 
   function showLayer() {
	document.getElementById("descr").style.visibility = "visible";
   }
  </script>
 </head> 
 <body>
  <a href="#" onMouseOver="showLayer()" onMouseOut="hiddenLayer()">
  <img src="button.gif" width="98" height="33" border="0" alt="Кнопка"></a>  
	 <div id="descr">
	  <ul id="navi">
<li id="navi"><a href="#" id="navi">Первый пункт</a></li>
<li id="navi"><a href="#" id="navi">Второй пункт</a></li>
<li id="navi"><a href="#" id="navi">Третий пункт</a></li>
</ul>
</div>

 </body>
</html>

Павел Билькис · March 7, 2009

<!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>
  <style type="text/css">
   #descr {
	position: relative; /* Относительное позиционирование */
	visibility: hidden; /* Прячем содержимое слоя */
	width: 150px;
   }
#navi {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#navi a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: Arial, Helvetica;
color: #000099;
padding: 3px;
margin-top: 0px;
border-bottom: 1px dashed #cccccc;
width: 150px;
}
#navi a:hover {
color: #000;
background-color: #99CCFF;
margin: 0px;
}
#navi li {
display: inline;
}
  </style> 
  <script type="text/javascript">
   function hiddenLayer() {
	document.getElementById("descr").style.visibility = "hidden";
   } 
   function showLayer() {
	document.getElementById("descr").style.visibility = "visible";
   }
  </script>
</head> 
<body>
  <a href="#" onMouseOver="showLayer()" onClick="hiddenLayer()">
  <img src="button.gif" width="98" height="33" border="0" alt="Кнопка"></a>  
	 <div id="descr">
	  <ul id="navi">
<li id="navi"><a href="#" id="navi">Первый пункт</a></li>
<li id="navi"><a href="#" id="navi">Второй пункт</a></li>
<li id="navi"><a href="#" id="navi">Третий пункт</a></li>
</ul>
</div>

</body>
</html>

меню закроется при щелчке.

но это не очень удобно

Victor Ananiev · March 7, 2009

может setTimeout(); или onblur?

Angela · March 7, 2009

может setTimeout(); или onblur?

Victor, а куда time out() ? :huh:

=PSU=, Подходит вполне, только другие кнопки "поехали"

Вот:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Nav</title>
  <style type="text/css">
   #descr {
	position: relative; /* Относительное позиционирование */
	visibility: hidden; /* Прячем содержимое слоя */
	width: 150px;
	clear: both;
   }
#navi {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#navi a {
display: block;
text-decoration: none;
font-size: 14px;
font-family: Arial, Helvetica;
color: #000099;
padding: 3px;
margin-top: 0px;
border-bottom: 1px dashed #cccccc;
width: 150px;
}
#navi a:hover {
color: #000;
background-color: #99CCFF;
margin: 0px;
}
#navi li {
display: inline;
}
  </style>
  <script type="text/javascript">
   function hiddenLayer() {
	document.getElementById("descr").style.visibility = "hidden";
   }
   function showLayer() {
	document.getElementById("descr").style.visibility = "visible";
   }
  </script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="500" height="30" border="0" cellpadding="0" cellspacing="0">
	<tr>
		<td>
			<a href="#" onMouseOver="showLayer()" onClick="hiddenLayer()"><img src="images/navbar_01.gif" width="125" height="30" alt=""></a><div id="descr">
	  <ul id="navi">
<li id="navi"><a href="#" id="navi">Первый пункт</a></li>
<li id="navi"><a href="#" id="navi">Второй пункт</a></li>
<li id="navi"><a href="#" id="navi">Третий пункт</a></li>
</ul>
</div></td>
		<td>
			<img src="images/navbar_02.gif" width="125" height="30" alt=""></td>
		<td>
			<img src="images/navbar_03.gif" width="125" height="30" alt=""></td>
		<td>
			<img src="images/navbar_04.gif" width="125" height="30" alt=""></td>
	</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Что тут использовать? z-index или float? или вообще не то ни другое :lol:

Victor Ananiev · March 7, 2009

setTimeout('hiddenLayer();', 1000); в onmouseout="" но там фокус, я не знаю как его обнулять при наводе)

Angela · March 7, 2009

setTimeout('hiddenLayer();', 1000); в onmouseout="" но там фокус, я не знаю как его обнулять при наводе)

Соколов Жаба скрипт в примерах :huh: Где это можно взять? :lol:

BadBoy · June 15, 2009

а подскажите пожалуйста как сделать тоже самое только что бы меню открывалось и закрывалось по счелчку.

спасибо

Sign In

Вертикальное выпадающее меню

Question

Angela

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

Павел Билькис

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

Angela

Link to comment

Share on other sites

Victor Ananiev

Link to comment

Share on other sites

Angela

Link to comment

Share on other sites

BadBoy

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information