• 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

    • OBS Studio 31.1.0 RC1

      By Copernic · Posted

      OBS Studio 31.1.0 RC1 by Razvan Serea OBS Studio is software designed for capturing, compositing, encoding, recording, and streaming video content, efficiently. It is the re-write of the widely used Open Broadcaster Software, to allow even more features and multi-platform support. OBS Studio supports multiple sources, including media files, games, web pages, application windows, webcams, your desktop, microphone and more. OBS Studio Features: High performance real time video/audio capturing and mixing, with unlimited scenes you can switch between seamlessly via custom transitions. Live streaming to Twitch, YouTube, Periscope, Mixer, GoodGame, DailyMotion, Hitbox, VK and any other RTMP server Filters for video sources such as image masking, color correction, chroma/color keying, and more. x264, H.264 and AAC for your live streams and video recordings Intel Quick Sync Video (QSV) and NVIDIA NVENC support Intuitive audio mixer with per-source filters such as noise gate, noise suppression, and gain. Take full control with VST plugin support. GPU-based game capture for high performance game streaming Unlimited number of scenes and sources Number of different and customizable transitions for when you switch between scenes Hotkeys for almost any action such as start or stop your stream or recording, push-to-talk, fast mute of any audio source, show or hide any video source, switch between scenes,and much more Live preview of any changes on your scenes and sources using Studio Mode before pushing them to your stream where your viewers will see those changes DirectShow capture device support (webcams, capture cards, etc) Powerful and easy to use configuration options. Add new Sources, duplicate existing ones, and adjust their properties effortlessly. Streamlined Settings panel for quickly configuring your broadcasts and recordings. Switch between different profiles with ease. Light and dark themes available to fit your environment. …and many other features. For free. At all. OBS Studio 31.1.0 RC1 changelog: Fixed an issue where a Browser Source or Browser Dock would crash OBS Studio on macOS 13 or older [jcm93/PatTheMav/RytoEX] Fixed an issue where browser error pages could not scroll [WizardCM] Fixed an issue on macOS where menu items would launch unintended actions when OBS was set to certain languages [gxalpha] Fixed an issue in Beta 1-2 where the group icon in the Sources list was not positioned correctly in the System theme [shiina424] Fixed an issue in Beta 2 where the preview zoom button tooltip translations were incorrect [shiina424] Download: OBS Studio 31.1.0 RC1 | Portable | ARM64 | ~200.0 MB (Open Source) View: OBS Studio Homepage | Other Operating Systems | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Firefox gets new way to pin and unpin tabs

      By TRS-80 · Posted

      Nice little improvement One improvement I would like to see. Being able to use a voice commands in Firefox "Firefox, 2FA (enter a 2FA code)". "Firefox, Close all tabs right" "Firefox, Pin tab" "Firefox, Bookmarks (name of Bookmark to open a Bookmark)" "Firefox, Settings, X" among others.
    • Microsoft Defender XDR gets TITAN-powered Security Copilot recommendations

      By zikalify · Posted

      Microsoft Defender XDR gets TITAN-powered Security Copilot recommendations by Paul Hill Guided Response, a Copilot-powered capability in Microsoft Defender XDR that guides analysts through step-by-step investigation and response flows, is getting a big upgrade with the introduction of TITAN recommendations. With TITAN, Microsoft wants to give security analysts real-time, threat-intel-driven recommendations so they can better prepare against attacks, before they even happen. TITAN is an adaptive threat intelligence graph that uses data from first and third-party telemetry and employs guilt-by-association techniques to warn analysts about unknown IP addresses that could pose a threat, due to their association with known malicious addresses. The primary benefit of TITAN is that security analysts get faster warnings about potential threats before they even have a chance to cause a problem. TITAN is an enhancement of Security Copilot Guided Response, rather than a replacement to it. With this extra tool, security analysts will be able to better keep up with evolving threats. Understanding TITAN's AI-powered threat intelligence The Redmond giant said that TITAN “represents a new wave of innovation” built upon its threat intelligence capabilities that introduces a real-time, adaptive threat intelligence graph. It takes telemetry from first and third-party sources such as Microsoft Defender for Threat Intelligence, Microsoft Defender for Experts, and customer feedback. The graph uses guilt-by-association techniques to mark unknown devices as threats, if they’re associated with known malicious entities. This gives security analysts a window of opportunity to take action and prevent harm. To identify potential threats, Microsoft uses a semi-supervised label propagation technique that assigns reputation scores to nodes based on the score of their neighbors. These reputation scores allow Microsoft’s unified security operation platform to implement containment and remediation actions via attack disruption. Practical impact and future outlook The new TITAN suggestion now appears within Guided Response as triage and containment recommendations. When a suspicious IP is detected, a Guided Response recommendation is automatically generated. These can help security analysts deal with various threats including IP addresses, IP ranges, and email senders. Microsoft said in early testing its TITAN recommendations have shown good results. TITAN boosted Guided Response triage accuracy by 8%, it reduced the time needed to investigate and respond to incidents, and its explainable recommendations gave analysts more confidence in the actions they take. As threats become more sophisticated, Microsoft’s TITAN will help to tackle threats before they even become an issue.
    • Taiwan hits Huawei and SMIC with new export restrictions

      By naap51stang · Posted

      China wants the tech... if they were to invade, TSMC would destroy it's fabs and other critical information first. Plus, you can bet they have backups stored NOT in Taiwan.
    • Nexus Mods owner steps down citing toll on personal wellbeing

      By TheGhostPhantom · Posted

      Malware website host in China in 3….2…1

  • Recent Achievements

    • Enthusiast
      Motoman26 went up a rank
      Enthusiast
    • Mentor
      M. Murcek went up a rank
      Mentor
    • Explorer
      treker_ed went up a rank
      Explorer
    • Apprentice
      CHUNWEI went up a rank
      Apprentice
    • Veteran
      1337ish went up a rank
      Veteran

  • Popular Contributors

    1. 1
      +primortal
      677
    2. 2
      ATLien_0
      267
    3. 3
      Michael Scrip
      177
    4. 4
      +FloatingFatMan
      176
    5. 5
      Steven P.
      139
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!