• 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

    • Intel's next-gen desktop processors leak with a whopping number of cores

      By leonsk29 · Posted

      I don't get why this company needs to change sockets every 2 generations, I really don't. If AMD can deliver a superior product both in terms of performance and energy consumption on the same socket for multiple generations, why can't Intel. I don't like to wear the tinfoil hat, but come on, this stinks of backroom deals with motherboard manufacturers? New socket, new motherboards, more sales.
    • Trump announces a gold smartphone for $499 and new "T1 Mobile" 5G wireless service

      By neufuse · Posted

      unlimited internet, not unlimited data lol sure you can go anywhere on there but it's gonna cost you to do it!
    • Intel's next-gen desktop processors leak with a whopping number of cores

      By TarasBuria · Posted

      Intel's next-gen desktop processors leak with a whopping number of cores by Taras Buria Intel's third-generation Core Ultra processors for desktop computers are on the way. If the latest leak is true, we are up for some significant updates in the Core Ultra 300 Series. @g01d3nm4ng0 on X posted a list of Intel's upcoming desktop processors, which includes seven SKUs ranging from entry-level Core Ultra 3 models to the flagship Core Ultra 9 with a rather whopping number of cores. According to the leak, the top-end model will feature 52 cores without hyperthreading. However, those cores are not like "classic" cores found in HEDT chips like AMD's Threadrippers. Instead, those 52 cores are divided into three categories: performance, efficiency, and low-power. The upcoming Core Ultra 9 reportedly features 16 performance cores, 32 efficiency cores, and 4 low-power cores. The cheapest Core Ultra 3 has four of each, 12 cores in total. Low-power cores are new to Intel's desktop processors. The current Core Ultra 200 chips feature the same hybrid configuration that was introduced with the 12th-gen Alder Lake chips: performance cores for demanding tasks and efficiency cores for lightweight tasks (up to 24 cores). Now, Intel wants to improve the efficiency of its chips further by adding another set of low-power cores, which were first introduced in the first-gen Core Ultra mobile chips (Meteor Lake). @jaykihn0 adds that Intel Nova Lake-S will support 8000 MT/s memory speed by default and 32 PCIe Gen 5 lanes and 16 PCIe Gen 4 lanes, totalling 48 lanes in CPU + chipset configuration. SKU P Cores E Cores LP Cores TDP Core Ultra 9 16 32 4 150W Core Ultra 7 14 24 4 150W Core Ultra 5 8 16 4 125W Core Ultra 5 8 12 4 125W Core Ultra 5 6 8 4 125W Core Ultra 3 4 8 4 65W Core Ultra 3 4 4 4 65W Today's leak aligns with previous reports about the upcoming Intel Nova Lake-S processors. However, Intel enthusiasts should probably get ready to switch platforms again, as the Nova Lake-S generation is rumored to require a brand-new LGA1954 socket.
    • Politically funny images of the World

      By snowy owl · Posted

    • It's been four years, and I still don't have a strong enough reason to upgrade to Windows 11

      By Jaybonaut · Posted

      That lasted all of 5 minutes and like I said wasn't bad.

  • Recent Achievements

    • Explorer
      treker_ed went up a rank
      Explorer
    • Apprentice
      CHUNWEI went up a rank
      Apprentice
    • Veteran
      1337ish went up a rank
      Veteran
    • Rookie
      john.al went up a rank
      Rookie
    • Week One Done
      patrickft456 earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      656
    2. 2
      ATLien_0
      272
    3. 3
      +FloatingFatMan
      176
    4. 4
      Michael Scrip
      157
    5. 5
      Steven P.
      136
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!