|
Меню навигации по сайтуМеню навигации по сайту
Ниже следует простой пример организации выпадающего меню навигации по сайту
<!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>Untitled Document</title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<script language="JavaScript" type="text/JavaScript">
function findObj(theObj, theDoc)
{
var p, i, foundObj;
if (!theDoc) theDoc = document;
if((p = theObj.indexOf("?")) > 0 && parent.frames.length )
{
theDoc = parent.frames[theObj.substring(p+1)].document;
theObj = theObj.substring(0,p);
}
if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];
for (i=0; !foundObj && i < theDoc.forms.length; i++)
foundObj = theDoc.forms[i][theObj];
for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
foundObj = findObj(theObj,theDoc.layers[i].document);
if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);
return foundObj;
}
function showHideLayers()
{
var i, visStr, obj, args = showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
{
if ((obj = findObj(args[i])) != null)
{
visStr = args[i+2];
if (obj.style)
{
obj = obj.style;
if(visStr == 'show') visStr = 'visible';
else if(visStr == 'hide') visStr = 'hidden';
}
obj.visibility = visStr;
}
}
}
</script>
<body>
<div id="Layer1" style="position:absolute; left:21px; top:32px; width:82px; height:103px; z-index:1; visibility: hidden;" onmouseover="showHideLayers('Layer1','','show')" onMouseOut="showHideLayers('Layer1','','hide')">
<p> <a href="#">sdfsdf</a><br>
<a href="#">sdfsdf1</a><br>
<a href="#">sdfsdf2</a>
</p>
</div>
<div id="Layer2" style="position:absolute; left:70px; top:29px; width:81px; height:103px; z-index:2; visibility: hidden;" onmouseover="showHideLayers('Layer2','','show')" onMouseOut="showHideLayers('Layer2','','hide')">
<table width="200" border="1">
<tr>
<td>hi1</td>
</tr>
<tr>
<td>hi2</td>
</tr>
<tr>
<td onmouseover="showHideLayers('Layer3','','show')" onMouseOut="showHideLayers('Layer3','','hide')"><a href="#">hi3</a></td>
</tr>
</table>
</div>
<div id="Layer3" style="position:absolute; left:264px; top:82px; width:143px; height:107px; z-index:3; visibility: hidden;" onmouseover="showHideLayers('Layer3','','show','Layer2','','show')" onMouseOut="showHideLayers('Layer3','','hide','Layer2','','hide')">
<table width="200" border="1">
<tr>
<td>hh1</td>
</tr>
<tr>
<td><a href="#">hh2</a></td>
</tr>
<tr>
<td>hh3</td>
</tr>
</table>
</div>
<p><a href="#" onmouseover="showHideLayers('Layer1','','show')" onMouseOut="showHideLayers('Layer1','','hide')">menu1</a> / <a href="#" onmouseover="showHideLayers('Layer2','','show')" onMouseOut="showHideLayers('Layer2','','hide')">menu2</a></p>
<p> </p>
</body>
</html>
Автор KAN
Статья Меню навигации по сайту раздела Прочее javascript в html может быть полезна для разработчиков на Delphi и FreePascal.
Комментарии и вопросы
:: Главная :: javascript в html ::
|
|
