• 0

help fixing dhtml + css menu

Asked by wing.,

 Share

Question

Grand Master

wing.

Posted
Posted

made this menu with some help from my dhtml book am afraid i have some errors if its not to much to as can some one help me (it aint working in firefox or ie would like it to work on most browsers as well)

tia :D 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript"
type"text/javascript">
	var objNavMenu = null;
	var prevObjNavMenu = null;
	var prevObjDropMenu =3;
	//////link styles
	var bgLinkColor = '#cccccc';
	var bgLinkHover = '#ffffff';
	var bgLinkActive = '#000000';
	var LinkHover = '#000000';
	var LinkActive = '#ffffff';
	var isIE =null;
	if (navigator.appName.indexOf ('Microsoft Internet Explorer')
	!= -1) isIE=1;
	function initDropMenu () {
  document.onclick = hide DropMenu; 
  for (i=1; i<=numDropmenu; i++){
  MenuName = 'dropMenu' + i;
  navName = '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=link linkHover;
  hoverObjNavMenu.style.backgroundColor =
  bgLinkHover;
  }
	}
	function menuOut (e) {
	document.onclick = hideDropMenu;
	outObjNavMenu = document.getElementById(this.id);
	if (out0bjNavMenu !=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! = objNavMenu ) | | (prevObjDropMenu == null)) {
	objNavMenu.style.color = linkActive;
	objNavMenu.style.backgroundColor = bgLinkActive;
	}
	if (objDropMenu) {
  xPos = objNav.offsetParent.offsetLeft + objNavMenu.offsetLeft;
  yPOS = objNavMenu.offsetParent.offsetTop + objnavmenu.offsetheight:
  if (isIE) {
  yPos -=1;
  xPos -=6;
  }
  objDropMenu.style.left= xPos = 'px';
  objDropMenu.style.visibility = 'visible';
  prevObjDropMenu = objDropMenu;
  prevObjNavMenu = ObjNavMenu;
 	 }
  }
  function hide dropmenu() {
  document.onclick = null;
  if (prevObjDropMenu) { 
  prevObjDropMenu.style.visibility = 'hidden';
 	 prevObjDropMenu = null;
 	 prevObjNavMenu.style.color =link color;
 	 prevObjNavMenu.style.backgroundColor = bglinkColor;
 	 }
 	 objNavMenu = Null;
 	 }  
</script>

<style type="text/css" media="screen">   <!--
body {
	margin: 0px;
	padding: opx;
}
#page{margin 10px;
}
#menuBar {
  color:#999999;
  font-size: 12px;
  font-family: arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: left;
  text-transform: capitalize;
  display: block;
  margin-bottom: 5px;
  position: realative;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 99%;
  overflow: hidden;
  vertical-align: middle;
  border: solid 1px #000000;
  background-color: #cccccc;
}
.menuHeader{
	color: #000000;
	tex-decoration: none;
	white-space: nowrap;
	curor: 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;
	text-decoration: none;
	background-colour:#000000;
}
a.menuLink:active {
	color: #ffffff
	text-decoration: none;
	background-color: #cc0000;
}
.menuDrop {
	color: #999999;
	font-size: 10px;
	font-family: arial, Helvetica, sans-serif;
	background-reapeat: repeat;
	visibility: hidden;
	margin: 0;
	padding: 0:
	position: absolute;
	z-index: 1000;
	top: 60px;
	left: 0;
	width: 175px;
	height: auto;
	border-style: solid;
	border-width: 0 1px 1px;
	borrder-color:#003365
}
	--!>
	</style>

</head>	
<body bgcolor="#ffffff" onLoad="initDropMenu()">
<div id="menuBar"> </div><div id="Navmenu1" class"menuheader">Menu 1</div>
<div id="navMenu2" class="menuHeader"> menu 2</div>
<div div id="navMenu3" class="menuHeader">menu 3</div>

<div id="dropMenu1" class="menuDrop">
	&lt;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();">link1</a>t;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();">link2</a>t;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();">link3</a>t;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();">link4</a>t;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();">link5</a>;div id="dropMenu2" class="menuDrop"&gt;
	&lt;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();">link1</a>t;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();">link2</a>t;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();">link3</a>t;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();">link4</a>t;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();">link5</a>;div id="dropMenu3" class="menuDrop"&gt;
	&lt;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();">link1</a>t;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();">link2</a>t;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();">link3</a>t;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();">link4</a>t;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();">link5</a>;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Link to comment
https://www.neowin.net/forum/topic/168855-help-fixing-dhtml-css-menu/
Share on other sites

10 answers to this question

Recommended Posts

  • 0
Mentor

mimeryme

Posted
Posted

wing, there are too many syntax errors. You should try to be more careful when typing this out. There were mistakes in the html, css, and javascript. I fixed it up and it's more readable now, but I couldn't get the initializing method to work. It still doesn't work in IE and still a little bit flaky in Firefox anyway.

  • 0
Mentor

mimeryme

Posted
Posted (edited)

edit: closing divs

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;script language="JavaScript" type="text/javascript"&gt;
&lt;!--
var objNavMenu = null;
var prevObjNavMenu = null;
var prevObjDropMenu = null;
var numDropMenu = 3;

// link styles

var bgLinkColor  = '#cccccc';
var bgLinkHover  = '#ffffff';
var bgLinkActive = '#000000';
var linkColor    = '#ff0000';
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 &lt;= numDropMenu; i++){
   menuName = 'dropMenu' + i;
   navName  = 'navMenu'  + i;
   objDropMenu = document.getElementById(menuName);
   objNavMenu  = document.getElementById(navName);
   objDropMenu.style.visibility = 'hidden';
   objNavMenu.onMouseOver = MenuHover(objNavMenu);
   objNavMenu.onMouseOut = MenuOut(objNavMenu);
   objNavMenu.onClick = ShowDropMenu(objNavMenu);
 }

 objNavMenu = null;
 return;

}

function MenuHover(e) {
  document.onClick = null;
  hoverObjNavMenu = document.getElementById(e.id);

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

function MenuOut(e) {
//  document.onClick = HideDropMenu();
  outObjNavMenu = document.getElementById(e.id);

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

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

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

  if (prevObjDropMenu != null) {
    HideDropMenu();
    return;
  }

  objNavMenu = document.getElementById(e.id);

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

  if (objDropMenu) {
    xPos = objNavMenu.offsetParent.offsetLeft + objNavMenu.offsetLeft;
    yPoS = objNavMenu.offsetParent.offsetTop + objNavMenu.offsetheight;

    if (isIE) {
      yPos -=1;
      xPos -=6;
    }

    objDropMenu.style.left= xPos;
    objDropMenu.style.visibility = 'visible';
    prevObjDropMenu = objDropMenu;
    prevObjNavMenu = objNavMenu;
  }
}

function HideDropMenu() {
  document.onClick = null;

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

//  objNavMenu = null;
}
// --&gt;
&lt;/script&gt;

&lt;style type="text/css" media="screen"&gt;
body {
  margin: 0px;
  padding: opx;
  }

#page{ margin 10px; }

#menuBar {
  color:#999999;
  font-size: 12px;
  font-family: arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: left;
  text-transform: capitalize;
  display: block;
  margin-bottom: 5px;
  position: realative;
  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;
  cursor: 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;
  text-decoration: none;
  background-color:#000000;
  }

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

.menuDrop {
  color: #999999;
  font-size: 10px;
  font-family: arial, Helvetica, sans-serif;
  background-reapeat: repeat;
  visibility: hidden;
  margin: 0;
  padding: 0:
  position: absolute;
  z-index: 1000;
  top: 60px;
  left: 0;
  width: 175px;
  height: auto;
  border-style: solid;
  border-width: 0 1px 1px;
  border-color:#003365
  }
&lt;/style&gt;

&lt;/head&gt;
&lt;body bgcolor="#ffffff" onLoad=""&gt;
&lt;div id="menuBar"&gt;
  &lt;div id="navMenu1" class="menuheader" onClick="ShowDropMenu(this);" onMouseOver="MenuHover(this);" onMouseOut="MenuOut(this);"&gt;Menu 1&lt;/div&gt;
  &lt;div id="navMenu2" class="menuHeader" onClick="ShowDropMenu(this);" onMouseOver="MenuHover(this);" onMouseOut="MenuOut(this);"&gt;menu 2&lt;/div&gt;
  &lt;div id="navMenu3" class="menuHeader" onClick="ShowDropMenu(this);" onMouseOver="MenuHover(this);" onMouseOut="MenuOut(this);"&gt;menu 3&lt;/div&gt;
&lt;/div&gt;

&lt;div id="dropMenu1" class="menuDrop"&gt;
&lt;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();" onClick="HideDropMenu();"&gt;link1&lt;/a&gt;
&lt;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();" onClick="HideDropMenu();"&gt;link2&lt;/a&gt;
&lt;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();" onClick="HideDropMenu();"&gt;link3&lt;/a&gt;
&lt;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();" onClick="HideDropMenu();"&gt;link4&lt;/a&gt;
&lt;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();" onClick="HideDropMenu();"&gt;link5&lt;/a&gt;&lt;/div&gt;
&lt;div id="dropMenu2" class="menuDrop"&gt;
&lt;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();" onClick="HideDropMenu();"&gt;link6&lt;/a&gt;
&lt;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();" onClick="HideDropMenu();"&gt;link7&lt;/a&gt;
&lt;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();" onClick="HideDropMenu();"&gt;link8&lt;/a&gt;
&lt;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();" onClick="HideDropMenu();"&gt;link9&lt;/a&gt;
&lt;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();" onClick="HideDropMenu();"&gt;link10&lt;/a&gt;&lt;/div&gt;
&lt;div id="dropMenu3" class="menuDrop"&gt;
&lt;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();" onClick="HideDropMenu();"&gt;link11&lt;/a&gt;
&lt;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();" onClick="HideDropMenu();"&gt;link12&lt;/a&gt;
&lt;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();" onClick="HideDropMenu();"&gt;link13&lt;/a&gt;
&lt;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();" onClick="HideDropMenu();"&gt;link14&lt;/a&gt;
&lt;a class="menuLink" href="#" onFocus="if(this.blur)this.blur();" onClick="HideDropMenu();"&gt;link15&lt;/a&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Edited by mimeryme
This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.