HTML/CSS Nav Menu issue

Westyfield2 · 12 May 2009 at 16:41

Well I'm stuck

hehe

I've been playing around with navigation menus etc, and have got the navigation menu how I want it. Linky.
On that I've given items 1,2,3 & 6 sub navigation menus.
That works perfectly.

Once I've put it in an actual page with content it stops working. Linky. As soon as the cursor is moved off the mainmenu item to go to the submenu item it disappears :eek:

But it was working fine on the page without any content.....

HTML for the working standalone page:

Code:

<head>
<link rel="stylesheet" href="nav_works.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 = allitems;
  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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"></head>
<body onmousemove="closesubnav(event);">

<div id="masthead">
  <h1 id="siteName">Website Name</h1>
  <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="index.html" id="gl1" class="glink" onMouseOver="ehandler(event,menuitem1);">Home </a><a href="link1.html" id="gl2" class="glink" onMouseOver="ehandler(event,menuitem2);">Link 1 </a><a href="link2.html" id="gl3" class="glink" onMouseOver="ehandler(event,menuitem3);">Link 2</a><a href="link3.html" id="gl4" class="glink" onMouseOver="ehandler(event,menuitem4);">Link 3</a><a href="link4.html" id="gl5" class="glink" onMouseOver="ehandler(event,menuitem5);">Link 4</a><a href="link5.html" id="gl6" class="glink" onMouseOver="ehandler(event,menuitem6);">Link 5</a><a href="link6.html" id="gl7" class="glink" onMouseOver="ehandler(event,menuitem7);">Link 6</a> </div>
    <!--end globalLinks-->
    <form id="search" action="">
      <input name="searchFor" type="text" size="10" />
      <a href="">search</a>
    </form>
  </div>
  <!-- end globalNav -->
  <div id="subglobal1" class="subglobalNav"> <a href="#"></a>  <a href="#"></a>  <a href="#"></a>  <a href="#"></a>  <a href="#"></a>  <a href="#"></a>  <a href="#"></a> </div>
  <div id="subglobal2" class="subglobalNav"> <a href="sub1.html">Sub 1.1</a> | <a href="sub1-2.html">Sub 1.2</a> | <a href="sub1-3.html">Sub 1.3</a> | <a href="#"></a>  <a href="#"></a>  <a href="#"></a>  <a href="#"></a> </div>
  <div id="subglobal3" class="subglobalNav"> <a href="sub2.html">Sub 2.1</a> | <a href="sub2-2.html">Sub 2.2</a> </div>
  <div id="subglobal4" class="subglobalNav"> <a href="sub3.html">Sub 3.1</a> | <a href="sub3-2.html">Sub 3.2</a>  <a href="#"></a>  <a href="#"></a>  <a href="#"></a>  <a href="#"></a>  <a href="#"></a> </div>
  <div id="subglobal5" class="subglobalNav"> <a href="#"></a>  <a href="#"></a>  <a href="#"></a>  <a href="#"></a>  <a href="#"></a>  <a href="#"></a>  <a href="#"></a> </div>
  <div id="subglobal6" class="subglobalNav"> <a href="#"></a>  <a href="#"></a>  <a href="#"></a>  <a href="#"></a>  <a href="#"></a>  <a href="#"></a>  <a href="#"></a> </div>
  <div id="subglobal7" class="subglobalNav"> <a href="sub6.html">Sub 6.1</a> | <a href="sub6-2.html">Sub 6.2</a></div>
  <div id="subglobal8" class="subglobalNav"> <a href="#"></a>  <a href="#"></a>  <a href="#"></a>  <a href="#"></a>  <a href="#"></a>  <a href="#"></a>  <a href="#"></a> </div>
</div>
<!-- end masthead -->
<!--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>

CSS for the working standalone page:

Code:

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
	color: #005FA9;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}

/************** header tag styles **************/

h1{
 font: bold 120% Arial,sans-serif;
 color: #334d55;
 margin: 0px;
 padding: 0px;
}


/********* form and related tag styles *********/

form {
	margin: 0;
	padding: 0;
}

label{
 font: bold 1em Arial,sans-serif;
 color: #334d55;
}
				
input{
font-family: Arial,sans-serif;
}

/***********************************************/
/* Layout Divs                                 */
/***********************************************/


#masthead{
	position: absolute;
	top: 0px;
	left: 2%;
	right: 2%;
	width:95.6%;
	
}

#pageNav{
	float: left;
	width:178px;
	padding: 0px;
	background-color: #F5f7f7;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	font: small Verdana,sans-serif;
}




/***********************************************/
/* Component Divs                              */
/***********************************************/
#siteName{
	margin: 0px;
	padding: 16px 0px 8px 0px;
	color: #009900;
	font-weight: normal;
}


/************* globalNav styles ****************/

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url(glbnav_background.gif);
}

#globalNav img{
	margin-bottom: -4px;
 
}

#gnl {
	position: absolute;
	top: 0px;
	left:0px;
}

#gnr {
	position: absolute;
	top: 0px;
	right:0px;
}

#globalLink{
	position: absolute;
	top: 6px;
	height: 22px;
	min-width: 640px;
	padding: 0px;
	margin: 0px;
	left: 10px;
	z-index: 100;
}


a.glink, a.glink:visited{
  	font-size: small;
  	color: #000000;
	font-weight: bold;
	margin: 0px;
	padding: 2px 5px 4px 5px;
	border-right: 1px solid #8FB8BC;
}

a.glink:hover{
  	background-image: url(glblnav_selected.gif);
	text-decoration: none;
}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
	position: absolute;
	top: 84px;
	left: 0px;
	/*width: 100%;*/
	min-width: 640px;
	height: 20px;
	padding: 0px 0px 0px 10px;
	visibility: hidden;
	color: #FF0000;
}

.subglobalNav a:link, .subglobalNav a:visited {
	font-size: 80%;
	color: #FF00FF;
}

.subglobalNav a:hover{
	color: #0000FF;
}

/*************** search styles *****************/

#search{
	position: absolute;
	top: 5px;
	right: 10px;
	z-index: 101;
}

#search input{
  font-size: 70%;
  margin: 0px  0px 0px 10px;
 }
 
#search a:link, #search a:visited {
	font-size: 80%;
	font-weight: bold;
	
}

#search a:hover{
	margin: 0px;
}

HTML for the wholepage where it doesn't work:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link href="whole_page.css" rel="stylesheet" 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 = allitems;
  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 class="oneColLiqCtrHdr" onmousemove="closesubnav(event);">

<div id="container">
  <div id="header">
    <h1 class="h1"><a href="http://www.google.com/" title="Home page"><img src="images/logo.png" alt="logo" width="190" height="52" hspace="25" vspace="0" border="0" align="middle" /></a>Page Name    </h1>
</div>
  
  
    <div id="masthead">
      <h1 id="siteName"></h1>
      <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="index.html" id="gl1" class="glink" onmouseover="ehandler(event,menuitem1);">Home </a><a href="link1.html" id="gl2" class="glink" onmouseover="ehandler(event,menuitem2);">Link 1 </a><a href="link2.html" id="gl3" class="glink" onmouseover="ehandler(event,menuitem3);">Link 2</a><a href="link3.html" id="gl4" class="glink" onmouseover="ehandler(event,menuitem4);">Link 3</a><a href="link4.html" id="gl5" class="glink" onmouseover="ehandler(event,menuitem5);">Link 4</a><a href="link5.html" id="gl6" class="glink" onmouseover="ehandler(event,menuitem6);">Link 5</a><a href="link6.html" id="gl7" class="glink" onmouseover="ehandler(event,menuitem7);">Link 6</a> </div>
        <!--end globalLinks-->
          <form id="search" action="">
            <input name="searchFor" type="text" size="10" />
            <a href="">search</a>
          </form>
      </div>
      <!-- end globalNav -->
      <div id="subglobal1" class="subglobalNav"> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div>
      <div id="subglobal2" class="subglobalNav"> <a href="sub1.html">Sub 1.1</a> | <a href="sub1-2.html">Sub 1.2</a> | <a href="sub1-3.html">Sub 1.3</a> | <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div>
      <div id="subglobal3" class="subglobalNav"> <a href="sub2.html">Sub 2.1</a> | <a href="sub2-2.html">Sub 2.2</a> </div>
      <div id="subglobal4" class="subglobalNav"> <a href="sub3.html">Sub 3.1</a> | <a href="sub3-2.html">Sub 3.2</a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div>
      <div id="subglobal5" class="subglobalNav"> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div>
      <div id="subglobal6" class="subglobalNav"> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div>
      <div id="subglobal7" class="subglobalNav"> <a href="sub6.html">Sub 6.1</a> | <a href="sub6-2.html">Sub 6.2</a></div>
      <div id="subglobal8" class="subglobalNav"> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div>
    </div>
    <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>
  
  
  
  
  <div id="mainContent">
<h1 class="header1">Heading 1</h1>
    <p class="standardcontentfont">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. </p>
    <h2 class="header2">Heading 2 </h2>
    <p class="standardcontentfont">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
<h2 class="header2">Heading 3</h2>
<p><span class="standardcontentfont">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</span></p>
<h2 class="header2">Heading 4</h2>
    <p class="standardcontentfont">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.<br />
      <br />
Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    <h2 class="header2">Heading 5 </h2>
    <p class="standardcontentfont">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    <h2 class="header2">Heading 6</h2>
    <p class="standardcontentfont">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p>
    <h2 class="header2">Heading 7</h2>
    <p class="standardcontentfont">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis  ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.
      <!-- end #mainContent -->
  </p></div>
  <div id="footer">
    <p><span class="footer"><span class="SingleColFooter">&copy; Organization name</span></span><span class="SingleColFooter"><br />
      <span class="footer">Registered Charity Number</span>: <br />
      <span class="footer">
  <!-- end #footer -->
  Registered Charitable Company Number: </span></span></p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>

CSS for the wholepage where it doesn't work:

Code:

@charset "utf-8";
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0; 
	padding: 0;
	text-align: center; 
	color: #000000;
}
.oneColLiqCtrHdr #container {
	width: 80%;  
	background: #FFFFFF;
	margin: 0 auto; 
	border: 1px solid #000000;
	text-align: left; 
}
.oneColLiqCtrHdr #header {
	height: 140px;
	padding: 0 10px 0 20px;  
	background-image: url(bg_grad.jpg);
	background-repeat: repeat-x;
}

.oneColLiqCtrHdr #header h1 {
	margin: 0; 
	padding: 10px 0; 
}
.oneColLiqCtrHdr #mainContent {
	padding: 0 20px; 
	background: #FFFFFF;
}
.oneColLiqCtrHdr #footer {
	padding: 0 10px; 
	background:#DDDDDD;
	text-align: center;
} 
.oneColLiqCtrHdr #footer p {
	margin: 0; 
	padding: 10px 0; 
	font-size: small;
	color: #006;
	font-weight: bold;
}
.SingleColFooter {
	text-align: center;
}
.SingleColFooter {
	font-size: x-small;
}
.header1 {
	font-size: large;
}
.h1 {
	color: #FFFFFF;
}
.header2 {
	font-size: medium;
}
.standardcontentfont {
	font-size: small;
}
.oneColLiqCtrHdr #container #mainContent .standardcontentfont .standardcontentfont {

}
/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
	color: #005FA9;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}

/********* form and related tag styles *********/

form {
	margin: 0;
	padding: 0;
}

label{
 font: bold 1em Arial,sans-serif;
 color: #334d55;
}
				
input{
font-family: Arial,sans-serif;
}

/***********************************************/
/* Layout Divs                                 */
/***********************************************/


#masthead{
	position: absolute;
	top: 50px;
	width: 80%;
}

#pageNav{
	float: left;
	width:178px;
	padding: 0px;
	background-color: #F5f7f7;
	border-right: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
	font: small Verdana,sans-serif;
}




/***********************************************/
/* Component Divs                              */
/***********************************************/
#siteName{
	margin: 0px;
	padding: 16px 0px 8px 0px;
	color: #009900;
	font-weight: normal;
}


/************* globalNav styles ****************/

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url(glbnav_background.gif);
}

#globalNav img{
	margin-bottom: -4px;
 
}

#gnl {
	position: absolute;
	top: 0px;
	left:0px;
}

#gnr {
	position: absolute;
	top: 0px;
	right:0px;
}

#globalLink{
	position: absolute;
	top: 6px;
	height: 22px;
	min-width: 640px;
	padding: 0px;
	margin: 0px;
	left: 10px;
	z-index: 100;
}


a.glink, a.glink:visited{
  	font-size: small;
  	color: #000000;
	font-weight: bold;
	margin: 0px;
	padding: 2px 5px 4px 5px;
	border-right: 1px solid #8FB8BC;
}

a.glink:hover{
  	background-image: url(glblnav_selected.gif);
	text-decoration: none;
}

.skipLinks {display: none;}

/************ subglobalNav styles **************/

.subglobalNav{
	position: absolute;
	top: 55px;
	left: 0px;
	/*width: 100%;*/
	min-width: 640px;
	height: 20px;
	padding: 0px 0px 0px 10px;
	visibility: hidden;
	color: #ffffff;
}

.subglobalNav a:link, .subglobalNav a:visited {
	font-size: 80%;
	color: #ffffff;
}

.subglobalNav a:hover{
	color: #cccccc;
}

/*************** search styles *****************/

#search{
	position: absolute;
	top: 5px;
	right: 10px;
	z-index: 101;
}

#search input{
  font-size: 70%;
  margin: 0px  0px 0px 10px;
 }
 
#search a:link, #search a:visited {
	font-size: 80%;
	font-weight: bold;
	
}

#search a:hover{
	margin: 0px;
}

Any ideas anyone?

Tripnologist · 12 May 2009 at 17:13

I would just use superfish myself.

http://users.tpg.com.au/j_birch/plugins/superfish/

Westyfield2 · 12 May 2009 at 19:32

Tripnologist said:
I would just use superfish myself.

http://users.tpg.com.au/j_birch/plugins/superfish/

Yea, in the final site I might well end up using a jQuery one instead. It's just that as I've got the menu working alone the way it won't work on the page is bugging me!

HTML/CSS Nav Menu issue

Westyfield2

Westyfield2

Tripnologist

Tripnologist

Westyfield2

Westyfield2