• 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.

  • Posts

    • Bill Gates says he'll donate 99 percent of his wealth to Africa

      By Skwerl · Posted

      That's wonderful. A shame that a few fringe nutjobs will somehow concoct a story to make this something nefarious. I do wish he'd committed to using more of the foundation's funds for scientific/medical research here at home, though. It looks like the U.S. is suddenly poised to become a backwoods nation in research.
    • Scientists explain how water could have actually made Mars the red planet it is today

      By hellowalkman · Posted

      Scientists explain how water could have actually made Mars the red planet it is today by Sayan Sen For centuries, scientists have wondered why Mars is red. The long-standing theory was that the planet’s rusty color came from hematite, an iron-rich mineral formed in dry conditions. But new research suggests something else might be responsible: ferrihydrite, an iron oxide-hydroxide mineral that forms in wet environments. A study published in Nature Communications by researchers from Brown University and the University of Bern suggests that ferrihydrite (Fe5O8H · nH2O) is the dominant iron-containing mineral in Martian dust. Their findings—based on orbital observations, rover data, and lab experiments—challenge previous ideas about Mars' surface composition. “The fundamental question of why Mars is red has been thought of for hundreds if not thousands of years,” said Adomas Valantinas, a postdoctoral fellow at Brown University. “From our analysis, we believe ferrihydrite is everywhere in the dust and also probably in the rock formations, as well.” Ferrihydrite is formed when iron reacts with oxygen and water. On Earth, it’s commonly found in volcanic rock and ash. Its presence on Mars suggests that the planet was once much wetter, with conditions that could have supported liquid water. This contrasts with hematite, which forms in drier environments. To test their theory, the researchers recreated Martian conditions in a lab. They ground minerals into tiny particles—about 1/100th the width of a human hair—matching the size of real Martian dust. They then studied how light reflected off these particles. The results showed that ferrihydrite remains stable in Mars’ current dry, cold climate, but its structure still holds signs that it formed when the planet had water. “What we know from this study is the evidence points to ferrihydrite forming, and for that to happen there must have been conditions where oxygen and water could react with iron,” Valantinas explained. “Those conditions were very different from today’s dry, cold environment.” To confirm ferrihydrite’s presence, the team studied data from NASA’s Mars Reconnaissance Orbiter and ESA’s Mars Express and Trace Gas Orbiter. They also used spectral readings from rovers like Curiosity, Pathfinder, and Opportunity. Combining all of these sources, they found that the mineral appears widespread on the Martian surface. This discovery challenges previous theories that Mars gradually oxidized in dry conditions. Instead, it suggests that ancient Mars went through a wetter phase before drying out. That shift from a water-rich past to the dry, dusty planet we see today is key to understanding Mars’ climate history—and possibly its ability to support life. “The study is a door-opening opportunity,” said Jack Mustard, senior author of the study. “It gives us a better chance to apply principles of mineral formation and conditions to tap back in time.” While the findings provide strong evidence for ferrihydrite’s role in Mars’ red dust, definitive proof will have to wait until Mars samples—currently being collected by NASA’s Perseverance rover—are brought back to Earth. Scientists hope these samples will confirm the theory and shed more light on the planet’s environmental history. Source: Brown University, University of Bren, Nature | Image via Depositphotos This article was generated with some help from AI and reviewed by an editor. Under Section 107 of the Copyright Act 1976, this material is used for the purpose of news reporting. Fair use is a use permitted by copyright statute that might otherwise be infringing.
    • As Windows 10 support winds down, KDE welcomes "Windows 10 exiles" to Linux

      By Good Bot, Bad Bot · Posted

      I would say 98% of people you can't figure out how to install Linux would never attempt to install Windows. It's not news non-tech savvy people can't install an PC OS.
    • As Windows 10 support winds down, KDE welcomes "Windows 10 exiles" to Linux

      By pmrd · Posted

      Do I really have to tell you that people generally don't make random posts about how Windows is running perfectly for them? Of course you're seeing more posts about people hating Windows, it's just a very loud minority as usual.
    • As Windows 10 support winds down, KDE welcomes "Windows 10 exiles" to Linux

      By Good Bot, Bad Bot · Posted

      ...and not really appropriate for most people for desktop usage.

  • Recent Achievements

    • Week One Done
      jrromero17 earned a badge
      Week One Done
    • One Month Later
      jrromero17 earned a badge
      One Month Later
    • Conversation Starter
      johnwin1 earned a badge
      Conversation Starter
    • One Month Later
      Marwin earned a badge
      One Month Later
    • One Year In
      fred8615 earned a badge
      One Year In

  • Popular Contributors

    1. 1
      +primortal
      237
    2. 2
      snowy owl
      156
    3. 3
      ATLien_0
      142
    4. 4
      +FloatingFatMan
      132
    5. 5
      Xenon
      131
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!