падащо меню

hellfire · 9 Юли 2007

здравейте
може ли да ми кажете каде е грешката и ако може да я поправите(не си падам по js)

Код:

<html>
<head>
<script language="Javascript" type="text/javascript">
var objNavMenu = null;
var prevObjNavMenu = null;
var prevObjDropMenu = null;
var numDropMenu = 3;

var bgLinkColor = '#cccccc';
var bgLinkHover = '#ffffff';
var bgLinkActive = '#000000';
var linkColor = '#000000';
var linkHover = '#000000';
var linkActive = '#ffffff';
var isIE = null;

if (navigator.appName.indexOf('Microsoft Internet Explorer') != -1) isIE=1;

function initDropMenu () {
 document.onclick = hideDropMenu;
 
 for (i=1; i<=numDropMenu; i++) {
  menuName = 'dropMenu' + i;
  navMenu = 'navMenu' + i;
  objDropMenu = document.getElementById(menuName);
  objNavMenu = document.getElementById(navName);
  objDropMenu.style.visibility = 'hidden';
  objNavMenu.onmouseover = menuHover;
  objNavMenu.onmouseout = menuOut;
  objNavMenu.onclick = showDropMenu;
 }

 objNavMenu = null;
 return;
}

function menuHover(e) {
 document.onclick = null;
 hoverObjNavMenu = document.getElementById(this.id);

 if(hoverObjNavMenu != objNavMenu) {
  hoverObjNavMenu.style.color = linkHover;
  hoverObjNavMenu.style.backgroundColor = bgLinkHover;
 }
}

function menuOut(e) {
 document.onclick = hideDropMenu;
 outObjNavMenu = document.getElementById(this.id);

 if (outObjNavMenu != objNavMenu) {
  outObjNavMenu.style.color = linkColor;
  outObjNavMenu.style.backgroundColor = bgLinkColor;
 }
}

function showDropMenu(e) {
 menuName = 'drop' + this.id.substring(3, this.id.length);
 objDropMenu = document.getElementById(menuName);

 if(prevObjDropMenu == objDropMenu) {
  hideDropMenu();
  return;
 }

 if(prevObjDropMenu != null)
 hideDropMenu();
 objNavMenu = document.getElementById(this.id);

 if((prevObjNavMenu != null) || (prevObjDropMenu == null)) {
  objNavMenu.style.color = linkActive;
  objNavMenu.style.backgroundColor = bgLinkActive;
 }

 if(objDropMenu) {
  xPos = objNavMenu.offsetParent.offsetLeft + objNavMenu.offsetLeft;
  yPos = objNavMenu.offsetParent.offsetTop +   objNavMenu.OffSetParent.offsetHeight;
  
  if(isIE) {
   yPos -= 1;
   xPos -= 6;
  }
  
  objDropMenu.style.left = xPos + 'px';
  objDropMenu.style.top = yPos + 'px';
  objDropMenu.style.visibility = 'visible';
  prevObjDropMenu = objDropMenu;
  precObjNavMenu = objNavMenu;
 }
}

function hideDropMenu() {
 document.onclick = null;

 if(prevObjDropMenu) {
  prevObjDropMenu.style.visibility = 'hidden';
  prevObjDropMenu = null;
  prevObjNavMenu.style.color = linkColor;
  prevObjNavMenu.style.backgroundColor = bgLinkColor;
 }

 objNavMenu = null;
}
</script>
<style type="text/css" media="screen">
body {
 margin: 0px;
 padding: 0px;
}

#page {
 margin: 10px;
}

#menuBar {
 color: #999999; 
 font-size: 12px;
 font-family: Arial, Helvetica, san-serif;
 font-weight: bold;
 text-align: left;
 text-transform: capitalize;
 display: block;
 margin-bottom: 5px;
 position: relative;
 top: 0px;
 left: 0px;
 right: 0px;
 width: 99%;
 overflow: hidden;
 vertical-align: middle;
 border: solid 1px #000000;
 background-color: #cccccc;
}

.menuHeader {
 color: #000000;
 text-decoration: none;
 white-space: nowrap;
 currsor: pointer;
 padding: 5px;
 margin: 0px;
 padding-right: 15px;
 display: inline;
 position: relative;
 border-right: 1px solid #000000;
}

a.menuLink {
 display: block;
 padding: 2px 5px;
 border-top: 1px solid #cccccc;
}

a.menuLink:link {
 color: #000000;
 text-decoration: none;
}

a.menuLink:visited {
 color: #000000;
 text-decoration: none;
}

a.menuLink:hover {
 color: #ffffff;
 background-color: #000000;
 text-decoration: none;
}

a.menuLink:active {
 color: #ffffff;
 text-decoration: none;
 background-color: #cc0000;
}

.menuDrop {
 color: #999999;
 font-size: 10px;
 font-family: Arial, Helvetica, sans-serif;
 background-color: #ffffff;
 bacground-repeat: repeat;
 visibility: hidden;
 margin: 0px;
 padding: 0px;
 position: absolute;
 z-index: 1000;
 top: 60px;
 left: 0px;
 width: 175px;
 height: auto;
 border-style: solid;
 border-width: 0 1px 1px;
 border-color: #003365;
}
</style>
</head>
<body onload="initDropMenu()">
<div id="menuBar">
<div id="navMenu1" class="menuHeader">Menu 1</div>
<div id="navMenu2" class="menuHeader">Menu 2</div>
<div id="navMenu3" class="menuHeader">Menu 3</div>

<div id="dropMenu1" class="menuDrop">
<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">link 1.1</a>
<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">link 1.2</a>
<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">link 1.3</a>
<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">link 1.4</a>
</div>

<div id="dropMenu2" class="menuDrop">
<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">link 2.1</a>
<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">link 2.2</a>
<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">link 2.3</a>
<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">link 2.4</a>
</div>

<div id="dropMenu3" class="menuDrop">
<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">link 3.1</a>
<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">link 3.2</a>
<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">link 3.3</a>
<a class="menuLink" href="#" onfocus="if(this.blur)this.blur();">link 3.4</a>
</div>
</div>
</body>
</html>
</div>

падащо меню

hellfire

Registered