PDA

View Full Version : Javascript and CSS menu.

papashu
01-11-2006, 08:33 PM
Hi, I am having trouble with my navigation bar. It works in Firefox but not IE . Any ideas? I am not good at Javascript and I think thats where my problem is. Any ideas?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function IEHoverPseudo() {

var navItems = document.getElementById("primary-nav").getElementsByTagName("li");

for (var i=0; i<navItems.length; i++) {
if(navItems[i].className == "menuparent") {
navItems[i].onmouseover=function() { this.className += " over"; }
navItems[i].onmouseout=function() { this.className = "menuparent"; }
}
}

}
window.onload = IEHoverPseudo;
</script>

<style type="text/css">

body {}

ul#primary-nav,
ul#primary-nav ul {
width: 100%;
margin: 0;
padding: 0;
background: #EE2E24; /* IE6 Bug */
font: normal 10% verdana;font-weight: bold;
font-size: 10%;
}

ul#primary-nav {
float: left;
width: 69%;
position: absolute;
top: 75px;
height: 25px;
background: #EE2E24;}

ul#primary-nav:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

ul#primary-nav li {
position: relative;
list-style: none;
float: left;
width: 24.75%; /* Width of Menu Items */
postion:left:10px;
}
ul#primary-nav li.text {
position: relative;
list-style: none;
float: left;
width: 100%; /* Width of Menu Items */
}
ul#primary-nav li.text a:hover { color: #ffffff; }

ul#primary-nav li a,
ul#primary-nav li li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 5px;
}

/* Fix IE. Hide from IE Mac \*/
* html ul#primary-nav li { float: left; height: 1%; }
* html ul#primary-nav li a { height: 1%; }
/* End */

ul#primary-nav ul {
position: absolute;
display: none;
}

ul#primary-nav ul ul {
left: 140px;
top: 0;
}

ul#primary-nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

ul#primary-nav li:hover ul ul,
ul#primary-nav li:hover ul ul ul,
ul#primary-nav li.over ul ul,
ul#primary-nav li.over ul ul ul { display: none; } /* Hide sub-menus initially */

ul#primary-nav li:hover ul,
ul#primary-nav li li:hover ul,
ul#primary-nav li li li:hover ul,
ul#primary-nav li.over ul,
ul#primary-nav li li.over ul,
ul#primary-nav li li li.over ul { display: block; } /* The magic */

ul#primary-nav li.menuparent { background: transparent url(arrow-down.gif) right center no-repeat; }
ul#primary-nav li li.menuparent { background: transparent url(arrow-right.gif) right center no-repeat; }

ul#primary-nav li.menuparent:hover,
ul#primary-nav li.over { background-color: #ffffff!important; }

ul#primary-nav li a:hover { color: #5E5F60; }


ul#primary-nav2,
ul#primary-nav2 ul {
width: 100%;
margin: 0;
padding: 0;
background: #FDB812; /* IE6 Bug */
font: normal 10% verdana;font-weight: bold;
font-size: 10%;
}

ul#primary-nav2 {
float: left;
width: 31%;
position:absolute;
top: 75px;
right:0px;
background: #FDB812;
height: 25px;}

ul#primary-nav2:after {
content:
height: 3".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

ul#primary-nav2 li {
position: relative;
list-style: none;
float: left;
width: 49%; /* Width of Menu Items */
text-align:center;
}
ul#primary-nav2 li.text {
position: relative;
list-style: none;
float: left;
width: 100%; /* Width of Menu Items */
}

ul#primary-nav2 li a,
ul#primary-nav2 li li a {
display: block;
text-decoration: none;
color: #5E5F60;
padding: 5px;
}

/* Fix IE. Hide from IE Mac \*/
* html ul#primary-nav2 li { float: left; height: 1%; }
* html ul#primary-nav2 li a { height: 1%; }
/* End */

ul#primary-nav2 ul {
position: absolute;
display: none;
}

ul#primary-nav2 ul ul {
left: 140px;
top: 0;
}

ul#primary-nav2 li ul li a { padding: 2px 5px; } /* Sub Menu Styles */

ul#primary-nav2 li:hover ul ul,
ul#primary-nav2 li:hover ul ul ul,
ul#primary-nav2 li.over ul ul,
ul#primary-nav2 li.over ul ul ul { display: none; } /* Hide sub-menus initially */

ul#primary-nav2 li:hover ul,
ul#primary-nav2 li li:hover ul,
ul#primary-nav2 li li li:hover ul,
ul#primary-nav2 li.over ul,
ul#primary-nav2 li li.over ul,
ul#primary-nav2 li li li.over ul { display: block; } /* The magic */

ul#primary-nav2 li.menuparent { background: transparent url(arrow-down.gif) right center no-repeat; }
ul#primary-nav2 li li.menuparent { background: transparent url(arrow-right.gif) right center no-repeat; }

ul#primary-nav2 li.menuparent:hover,
ul#primary-nav2 li.over { background-color: #ffffff !important; }

ul#primary-nav2 li a:hover { color: #5E5F60; }

</style>
</head>
<body>
<ul id="primary-nav">
<li class="menuparent"><a href="http://www.mentoring.org/mentors/index.php">&nbsp;&nbsp;&nbsp;&nbsp;MENTORS</a>
<ul>
<li class="text"><a href="http://www.mentoring.org/mentors/index.php">I would like to become a mentor.</a></li>
</ul>
</li>
<li class="menuparent"><a href="http://www.mentoring.org/leaders/index.php">&nbsp;&nbsp;&nbsp;&nbsp;LEADERS</a>
<ul>
<li class="text"><a href="http://www.mentoring.org/leaders/index.php">I would like to get my organization involved in mentoring.</a></li>
</ul>
</li>
<li class="menuparent"><a href="#">CARING ADULTS</a>
<ul>
<li class="text"><a href="#">I am interested in finding a mentor for a child.</a></li>
</ul>
</li>
<li class="menuparent"><a href="#">PROGRAM STAFF</a>
<ul>
<li class="text"><a href="#">I am interested in starting a mentoring program.</a></li>
</ul>
</li>
</ul>

<ul id="primary-nav2">
<li class="menuparent"><a href="#">TAKE ACTION</a>
<ul>
<li class="text"><a href="#">I would like to become a mentor</a></li>
</ul>
</li>
<li class="menuparent"><a href="#">RESEARCH </a>
<ul>
<li class="text"><a href="#">I would like to get my organizaation involved in mentoring</a></li>
</ul>
</li>
</ul>
</ul
>
</body>
</html>
Beagle
01-13-2006, 08:06 PM
Off the top of my head, I'm pretty sure the className property is different between FF and IE. One uses cssClassName, or cssClass, or something, and the other uses className.

I could be dead wrong, but try it out.
Pyth007
01-13-2006, 08:35 PM
Actually in js, className is the correct attribute to use for both... The problem is trying to use class instead (I believe that IE allows you to set the class attribute using class, but FF does not).

Your pseudo-hover function for IE only targets primary-nav but not primary-nav2 (although the CSS has :hover for both classes). I'm guessing that this is your problem since IE doesn't handle the :hover pseudo-class for elements other than <a>-links.

If this is not your problem, describe what you mean by it not working in IE.

(Edit: I thought I had posted an answer before, but I must've forgot to send it...)