Добро пожаловать!
Здесь вы можете найти ответ на интересующий вас вопрос в отрасли сайтостроения, познакомится ближе с web технологиями и web стандартами.

Горизонтальное всплывающее меню на JavaScript.

Создание любого сайта обычно начинается с главной страницы, а ещё точнее с главного меню. Поначалу, если сайт состоит из нескольких страниц, то можно обойтись простым одноуровневым меню. Но постепенно число страниц сайта может достигнуть нескольких десятков и более, тогда приходится создавать подменю, т.е. группировать страницы по темам и помещать их в отдельные разделы. При создании таких меню часто используют JavaScript, позволяющий создавать компактные и оригинальные меню.

В этой статье будет рассмотрено создание простейшего меню при помощи JavaScript. Собственно само меню выглядит следующим образом:

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

<html>
<head>
<title>MENU</title>
<style>
.smenu
    {
    position: absolute;
    padding: 5px;
    width: 100px;
    visibility: hidden;
    background-color: #EEEEEE;
    border: 1px solid gray;
    }
</style>
<script language="JavaScript">
<!--
over_header = new Array();
over_menu = new Array();

for(i=1;i<=3;i++)
{
  over_header[i] = 0;
  over_menu[i] = 0;
}

function Turn(id, mode)
{
  if(mode)
    eval("setTimeout(\"On(" + id + ");\",200)");
  else
    eval("setTimeout(\"Off(" + id + ");\",200)");
}

function On(id)
{
  eval("document.getElementById('smenu" + id + "')").style.visibility =
  "visible";
}

function Off(id)
{
  if(!over_menu[id] && !over_header[id])
    {
    eval("document.getElementById('smenu" + id + "')").style.visibility =
    "hidden";
    }
}
-->
</script>
</head>
<body style="padding:0; margin:0">

<div style="position:absolute; top:0; left:0; width:80px">
<a href="point1.html" onmouseout="Turn(1,0); over_header[1]=0;"
onmouseover="Turn(1,1); over_header[1]=1;">POINT 1</a>
</div>
<div style="position:absolute; top:0; left:80px; width:80px">
<a href="point2.html" onmouseout="Turn(2,0); over_header[2]=0;"
onmouseover="Turn(2,1); over_header[2]=1;">POINT 2</a>
</div>
<div style="position:absolute; top:0; left:160px; width:80px">
<a href="point3.html" onmouseout="Turn(3,0); over_header[3]=0;"
onmouseover="Turn(3,1); over_header[3]=1;">POINT 3</a>
</div>

<div id="smenu1" class="smenu" style="top: 20px; left:0"
onmouseover="over_menu[1]=1;" onmouseout="Turn(1,0); over_menu[1]=0;">
<a href="point11.html">point 11</a><br>
<a href="point12.html">point 12</a><br>
<a href="point13.html">point 13</a><br>
<a href="point14.html">point 14</a><br>
<a href="point15.html">point 15</a>
</div>

<div id="smenu2" class="smenu" style="top: 20px; left:80px"
onmouseover="over_menu[2]=1;" onmouseout="Turn(2,0); over_menu[2]=0;">
<a href="point21.html">point 21</a><br>
<a href="point22.html">point 22</a><br>
<a href="point23.html">point 23</a><br>
<a href="point24.html">point 24</a><br>
<a href="point25.html">point 25</a>
</div>

<div id="smenu3" class="smenu" style="top: 20px; left:160px"
onmouseover="over_menu[3]=1;" onmouseout="Turn(3,0); over_menu[3]=0;">
<a href="point31.html">point 31</a><br>
<a href="point32.html">point 32</a><br>
<a href="point33.html">point 33</a><br>
<a href="point34.html">point 34</a><br>
<a href="point35.html">point 35</a>
</div>

</body>
</html>