Hi all,
I am using the code below for my expanding menu. It works fine in IE. But not in firefox. Is there any way to fix this? i appreciate any help.
CODE:
<html>
<head>
<title></title>
<style type="text/css">
ul#menu1{list-style-type: none;}
ul#menu1 li{
font-family:Impact, Arial, Georgia, sans-serif;
font-size:18pt;
color:#CCCCCC;
}
ul#menu1 a:link {
color: #CCCCCC;
text-decoration:none;
}
ul#menu1 a:visited {
text-decoration: none;
color: #CCCCCC;
}
ul#menu1 a:hover {
text-decoration: none;
color: #FF0000;
}
ul#menu{list-style-type: none;}
ul#menu ol {
display: block;
text-align: left;
list-style-type: none;
}
ul#menu li{
font-family:Impact, Arial, Georgia, sans-serif;
font-size: 18pt;
color:#CCCCCC;
text-decoration:none;
}
ul#menu a:link {
color: #CCCCCC;
text-decoration:none;
}
ul#menu a:visited {
text-decoration: none;
color: #CCCCCC;
}
ul#menu a:hover {
text-decoration: none;
color: #FF0000;
}
.style9 {
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;}
body {
background-image: url();
background-repeat :no-repeat;
background-color: #000000;
}
.style10 {
color: #FF0000;
font-weight: bold;
}
a:link {
color: #CCCCCC;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCCCCC;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
</style>
<script language="JavaScript" type="text/JavaScript">
// Node Functions
if(!window.Node){
var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
function checkNode(node, filter){
return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}
function getChildren(node, filter){
var result = new Array();
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
if(checkNode(children, filter)) result[result.length] = children;
}
return result;
}
function getChildrenByElement(node){
return getChildren(node, "ELEMENT_NODE");
}
function getFirstChild(node, filter){
var child;
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
child = children;
if(checkNode(child, filter)) return child;
}
return null;
}
function getFirstChildByText(node){
return getFirstChild(node, "TEXT_NODE");
}
function getNextSibling(node, filter){
for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
if(checkNode(sibling, filter)) return sibling;
}
return null;
}
function getNextSiblingByElement(node){
return getNextSibling(node, "ELEMENT_NODE");
}
// Menu Functions & Properties
var activeMenu = null;
function showMenu() {
if(activeMenu){
activeMenu.className = "";
getNextSiblingByElement(activeMenu).style.display = "none";
}
if(this == activeMenu){
activeMenu = null;
} else {
this.className = "active";
getNextSiblingByElement(this).style.display = "block";
activeMenu = this;
}
return false;
}
function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++){
menu = menus;
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
}
}
if(document.createElement) window.onload = initMenu;
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="Layer1" style="position:absolute; left:-5px; top:199px; width:277px; height:153px; z-index:auto; filter: shadow(strength=4);">
<ul id="menu">
<li >Excerpts</li>
<ol>
<li class="style9"><span class="style9"><a href="Excerpt1.htm">Excerpt<br>
</a></span><span class="style9"><a href="Excerpt2.htm">Excerpt<br>
</a></span><span class="style9"><a href="Excerpt3.htm">Excerpt<br>
</a></span><span class="style9"><a href="Excerpt4.htm">Excerpt<br>
</a></span><span class="style9"><a href="Excerpt5.htm">Excerpt<br>
</a></span><span class="style9"><a href="Excerpt6.htm">Excerpt
</a></span>
</ol>
<li ><a href="Quotes.htm">Quotes</a></li>
</ul>
</div>
<div id="Layer2" style="position:absolute; left:-5px; top:86px; width:166px; height:122px; z-index:2; filter: shadow(strength=4);">
<ul id="menu1">
<li><a class="style10">Home</a></li>
<li><a href="About.htm">About</a></li>
<li><a href="Author.htm">Author</a></li>
<li><a href="Contents.htm">Contents</a></li>
</ul>
</div>
</body>
</html>
I am using the code below for my expanding menu. It works fine in IE. But not in firefox. Is there any way to fix this? i appreciate any help.
CODE:
<html>
<head>
<title></title>
<style type="text/css">
ul#menu1{list-style-type: none;}
ul#menu1 li{
font-family:Impact, Arial, Georgia, sans-serif;
font-size:18pt;
color:#CCCCCC;
}
ul#menu1 a:link {
color: #CCCCCC;
text-decoration:none;
}
ul#menu1 a:visited {
text-decoration: none;
color: #CCCCCC;
}
ul#menu1 a:hover {
text-decoration: none;
color: #FF0000;
}
ul#menu{list-style-type: none;}
ul#menu ol {
display: block;
text-align: left;
list-style-type: none;
}
ul#menu li{
font-family:Impact, Arial, Georgia, sans-serif;
font-size: 18pt;
color:#CCCCCC;
text-decoration:none;
}
ul#menu a:link {
color: #CCCCCC;
text-decoration:none;
}
ul#menu a:visited {
text-decoration: none;
color: #CCCCCC;
}
ul#menu a:hover {
text-decoration: none;
color: #FF0000;
}
.style9 {
font-size: 10pt;
font-family: Arial, Helvetica, sans-serif;
font-weight:bold;}
body {
background-image: url();
background-repeat :no-repeat;
background-color: #000000;
}
.style10 {
color: #FF0000;
font-weight: bold;
}
a:link {
color: #CCCCCC;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #CCCCCC;
}
a:hover {
text-decoration: none;
color: #FF0000;
}
</style>
<script language="JavaScript" type="text/JavaScript">
// Node Functions
if(!window.Node){
var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}
function checkNode(node, filter){
return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
}
function getChildren(node, filter){
var result = new Array();
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
if(checkNode(children, filter)) result[result.length] = children;
}
return result;
}
function getChildrenByElement(node){
return getChildren(node, "ELEMENT_NODE");
}
function getFirstChild(node, filter){
var child;
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
child = children;
if(checkNode(child, filter)) return child;
}
return null;
}
function getFirstChildByText(node){
return getFirstChild(node, "TEXT_NODE");
}
function getNextSibling(node, filter){
for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
if(checkNode(sibling, filter)) return sibling;
}
return null;
}
function getNextSiblingByElement(node){
return getNextSibling(node, "ELEMENT_NODE");
}
// Menu Functions & Properties
var activeMenu = null;
function showMenu() {
if(activeMenu){
activeMenu.className = "";
getNextSiblingByElement(activeMenu).style.display = "none";
}
if(this == activeMenu){
activeMenu = null;
} else {
this.className = "active";
getNextSiblingByElement(this).style.display = "block";
activeMenu = this;
}
return false;
}
function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++){
menu = menus;
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
}
}
if(document.createElement) window.onload = initMenu;
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div id="Layer1" style="position:absolute; left:-5px; top:199px; width:277px; height:153px; z-index:auto; filter: shadow(strength=4);">
<ul id="menu">
<li >Excerpts</li>
<ol>
<li class="style9"><span class="style9"><a href="Excerpt1.htm">Excerpt<br>
</a></span><span class="style9"><a href="Excerpt2.htm">Excerpt<br>
</a></span><span class="style9"><a href="Excerpt3.htm">Excerpt<br>
</a></span><span class="style9"><a href="Excerpt4.htm">Excerpt<br>
</a></span><span class="style9"><a href="Excerpt5.htm">Excerpt<br>
</a></span><span class="style9"><a href="Excerpt6.htm">Excerpt
</a></span>
</ol>
<li ><a href="Quotes.htm">Quotes</a></li>
</ul>
</div>
<div id="Layer2" style="position:absolute; left:-5px; top:86px; width:166px; height:122px; z-index:2; filter: shadow(strength=4);">
<ul id="menu1">
<li><a class="style10">Home</a></li>
<li><a href="About.htm">About</a></li>
<li><a href="Author.htm">Author</a></li>
<li><a href="Contents.htm">Contents</a></li>
</ul>
</div>
</body>
</html>
