drop down menu problem

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 397,535 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,670 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

drop down menu problem

•

Join Date: Nov 2007

Posts: 40

Reputation: jay64 is an unknown quantity at this point

Rep Power: 1

Solved Threads: 0

jay64

Offline

Light Poster

drop down menu problem

Dec 24th, 2007

Hi, I 'think' this is a JavaScript problem, but I am not sure. I am trying to make a modified layout using one of Dreamweaver's preformed layouts. The original layout has a navigation bar across the top of the page, that has drop down menu items. In the original form, the layout works. When you mouse over one of the main menu items, a horizontal list of sub menu items drops down below the navigation bar. The original code had a side navigation bar on the left side of the content. I modified it to have a mirrored navigation bar on the right side of the content too. Now, when I mouse over one of the main menu items on the top navigation bar, the horizontal list of sub menus flashes open for a split second and immediately dissappears. Anyone have a problem like this before? Know of any possible solutions? As far as I know, I didn't change any code that was in relation to the top navigation bar.

Here is the modified code: (I shortened up the subglobal link lists to only one when I posted here to save space.)



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<!-- DW6 -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<title>Untitled Document</title>

<link rel="stylesheet" href="jpc_nav_both.css" type="text/css">

<script type="text/javascript">

<!--

var time = 3000;

var numofitems = 7;



//menu constructor

function menu(allitems,thisitem,startstate){ 

  callname= "gl"+thisitem;

  divname="subglobal"+thisitem;  

  this.numberofmenuitems = 7;

  this.caller = document.getElementById(callname);

  this.thediv = document.getElementById(divname);

  this.thediv.style.visibility = startstate;

}



//menu methods

function ehandler(event,theobj){

  for (var i=1; i<= theobj.numberofmenuitems; i++){

    var shutdiv =eval( "menuitem"+i+".thediv");

    shutdiv.style.visibility="hidden";

  }

  theobj.thediv.style.visibility="visible";

}

				

function closesubnav(event){

  if ((event.clientY <48)||(event.clientY > 107)){

    for (var i=1; i<= numofitems; i++){

      var shutdiv =eval('menuitem'+i+'.thediv');

      shutdiv.style.visibility='hidden';

    }

  }

}

// -->

</script>

</head>

<body onmousemove="closesubnav(event);"> 

<div class="skipLinks">skip to: <a href="#content">page content</a> | <a href="pageNav">links on this page</a> | <a href="#globalNav">site navigation</a> | <a href="#siteInfo">footer (site information)</a> </div>

<div id="masthead">  

  <div id="globalNav"> 

    <img alt="" src="gblnav_left.gif" height="32" width="4" id="gnl"> <img alt="" src="glbnav_right.gif" height="32" width="4" id="gnr"> 

    <div id="globalLink"> 

      <a href="#" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">global 

	  link</a><a href="#" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">global

      link</a><a href="#" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">global

      link</a><a href="#" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">global

      link</a><a href="#" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">global

      link</a><a href="#" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">global

      link</a><a href="#" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">global

      link</a> 

    </div> 

    <!--end globalLinks--> 

  </div> 

  <!-- end globalNav --> 

  <div id="subglobal1" class="subglobalNav"> 

    <a href="#">subglobal1 link</a> | 

  </div> 

  <div id="subglobal2" class="subglobalNav"> 

    <a href="#">subglobal2 link</a> | 

  </div> 

  <div id="subglobal3" class="subglobalNav"> 

    <a href="#">subglobal3 link</a> |  

  </div> 

  <div id="subglobal4" class="subglobalNav"> 

    <a href="#">subglobal4 link</a> |  

  </div> 

  <div id="subglobal5" class="subglobalNav"> 

    <a href="#">subglobal5 link</a> | 

  </div> 

  <div id="subglobal6" class="subglobalNav"> 

    <a href="#">subglobal6 link</a> | 

  </div> 

  <div id="subglobal7" class="subglobalNav"> 

    <a href="#">subglobal7 link</a> |  

  </div> 

  <div id="subglobal8" class="subglobalNav"> 

    <a href="#">subglobal8 link</a> |  

  </div> 

</div> 

<!-- end masthead --> 

<div id="pagecell1"> 

  <!--pagecell1--> 

  <img alt="" src="tl_curve_white.gif" height="6" width="6" id="tl"> <img alt="" src="tr_curve_white.gif" height="6" width="6" id="tr"> 

<div id="navBar"> 

  <div id="sectionLinks"> 

    <h3>Section Links</h3> 

    <ul> 

      <li><a href="#">Section Link</a></li> 

      <li><a href="#">Section Link</a></li> 

      <li><a href="#">Section Link</a></li> 

      <li><a href="#">Section Link</a></li> 

      <li><a href="#">Section Link</a></li> 

      <li><a href="#">Section Link</a></li> 

    </ul> 

  </div> 

  <div class="relatedLinks"> 

    <h3>Related Link Category</h3> 

    <ul> 

      <li><a href="#">Related Link</a></li> 

      <li><a href="#">Related Link</a></li> 

      <li><a href="#">Related Link</a></li> 

      <li><a href="#">Related Link</a></li> 

      <li><a href="#">Related Link</a></li> 

      <li><a href="#">Related Link</a></li> 

    </ul> 

  </div> 

  <div class="relatedLinks"> 

    <h3>Related Link Category</h3> 

    <ul> 

      <li><a href="#">Related Link</a></li> 

      <li><a href="#">Related Link</a></li> 

      <li><a href="#">Related Link</a></li> 

      <li><a href="#">Related Link</a></li> 

      <li><a href="#">Related Link</a></li> 

      <li><a href="#">Related Link</a></li> 

    </ul> 

  </div> 

</div> 

<!--end navBar div --> 

<div id="headlines"> 

    <div id="sectionLinks"> 

    <h3>Section Links</h3> 

    <ul> 

      <li><a href="#">Section Link</a></li> 

      <li><a href="#">Section Link</a></li> 

      <li><a href="#">Section Link</a></li> 

      <li><a href="#">Section Link</a></li> 

      <li><a href="#">Section Link</a></li> 

      <li><a href="#">Section Link</a></li> 

    </ul> 

  </div> 

  <div id="advert"> 

    <img src="" alt="" width="107" height="66"> Ad copy ad copy ad copy. Ad

  copy ad copy.</div> 

</div> 

<div id="content">

  <div class="feature">

    <p>Matsushim Suzuki Racing Team </p>

    <p>

     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.</p> 

  </div> 

  <div class="story"> 

    <h3>Story Title</h3> 

    <p>

     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.</p> 

    <p>&nbsp;

     </p> 

  </div> 

  <div class="story"> 

    <h3>Story Title</h3> 



    <p>

     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie. </p> 

    </div> 

</div> 

<!--end content --> 

<div id="siteInfo"> 

  <img src="" width="44" height="22"> <a href="#">About Us</a> | <a href="#">Site

  Map</a> | <a href="#">Privacy Policy</a> | <a href="#">Contact Us</a> | &copy;2003

  Company Name

</div> 

</div> 

<!--end pagecell1--> 

<br> 

<script type="text/javascript">

    <!--

      var menuitem1 = new menu(7,1,"hidden");

			var menuitem2 = new menu(7,2,"hidden");

			var menuitem3 = new menu(7,3,"hidden");

			var menuitem4 = new menu(7,4,"hidden");

			var menuitem5 = new menu(7,5,"hidden");

			var menuitem6 = new menu(7,6,"hidden");

			var menuitem7 = new menu(7,7,"hidden");

    // -->

    </script> 

</body>

</html>

DaniWeb Home > Forums > Web Development > JavaScript / DHTML / AJAX > drop down menu problem

drop down menu problem

drop down menu problem

drop down menu problem