Горизонтальное всплывающее меню на 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> |
||