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

  • Popular Now

  • Posts

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

      By +sphbecker · Posted

      There is a lot of truth to that, but also, a lot of those issues were due to 3rd parties being slow to support Vista. That doesn't explain all users, but a lot of them. Win7 didn't have better support for XP-era hardware and software, it simply didn't have to deal with it as much because Vista has already blazed the way and forced that stuff to be updated or replaced.
    • Meta says you'll soon be getting ads on WhatsApp

      By Arceles · Posted

      MIght as well go back to good old SMS. Or switch to other services.
    • The $80 video game - A new frontier of cost, or a bridge too far?

      By freedonX · Posted

      Nintendo 64 games were $60-$70 Playstation 1 were $50-$60 28 years ago. Heck I remember paying $70 for Final Fantasy IV (2) in 1991 for SNES. Salarys have gone up, both for the consumer's salary and the developer's salary. So I think it's pretty reasonable for $80games today. Not that I pay for new games, I don't have the time to play games as much as before. So I tend to buy them 2 years after release.
    • It's been four years, and I still don't have a strong enough reason to upgrade to Windows 11

      By +sphbecker · Posted

      I hear you on that, and if that is happening, then its bad. Could you give an example please? People make these comments all the time but rarely provide an example.
    • Firefox gets new way to pin and unpin tabs

      By TarasBuria · Posted

      Firefox gets new way to pin and unpin tabs by Taras Buria Mozilla Firefox recently received a long-anticipated feature: vertical tabs. It arrived in March 2025 as part of the Firefox 136 update. Now, Mozilla is introducing another welcome improvement to tab management in its browser, making it easier for users to pin and unpin tabs in Firefox. With the latest Firefox Nightly update, Mozilla implemented a new way to pin or unpin tabs: you can simply drag the current page to another pinned tab to pin or drag it out to unpin it. As simple as that. The new logic works with both vertical and horizontal tab views, and it eliminates the need to use context menus. The only prerequisite is that you need to have at least one pinned tab for the dragging to work. Otherwise, you will simply move the tab across the strip. It is nice to see Firefox implementing this small convenience for customers. However, some argue that there is still room for improvement. Dragging tabs is cool, but a dedicated shortcut could be an even better and quicker way to pin or unpin your tabs. That said, other mainstream browsers lack this feature as well. The improved tab pinning is now available in Firefox Nightly, the least stable update channel. Mozilla uses it to test early changes and big platform changes, which could be buggy, unstable, or feature-breaking. Therefore, it is probably not a very good idea to use Nightly builds as your main browser. Still, you can run Firefox Nightly side-by-side with other channels for testing purposes. If you are curious, get it from the official website using this link.

  • Recent Achievements

    • Week One Done
      patrickft456 earned a badge
      Week One Done
    • One Month Later
      patrickft456 earned a badge
      One Month Later
    • One Month Later
      Jdoe25 earned a badge
      One Month Later
    • Explorer
      Legend20 went up a rank
      Explorer
    • One Month Later
      jezzzy earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      636
    2. 2
      ATLien_0
      278
    3. 3
      +FloatingFatMan
      171
    4. 4
      Michael Scrip
      156
    5. 5
      Steven P.
      128
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!