Jump to content

[SOLVED] Javascript menu


bftwofreak

Recommended Posts

I've tried nearly a hundred times to get this to work. This is what I have now and what I thought would work.

<script language="text/javascript">
function Home(){
var myLayer = document.getElementById("Home");
if(myLayer.style.display=="none" || myLayer.style.display==""){
myLayer.style.display="block";
} else {
myLayer.style.display="none";
}
}

function Information(){
var myLayer = document.getElementById("Information");
if(myLayer.style.display=="none" || myLayer.style.display==""){
myLayer.style.display="block";
} else {
myLayer.style.display="none";
}
}

function Members(){
var myLayer = document.getElementById("Members");
if(myLayer.style.display=="none" || myLayer.style.display==""){
myLayer.style.display="block";
} else {
myLayer.style.display="none";
}
}

function News(){
var myLayer = document.getElementById("News");
if(myLayer.style.display=="none" || myLayer.style.display==""){
myLayer.style.display="block";
} else {
myLayer.style.display="none";
}
}

function Schedule(){
var myLayer = document.getElementById("Schedule");
if(myLayer.style.display=="none" || myLayer.style.display==""){
myLayer.style.display="block";
} else {
myLayer.style.display="none";
}
}

function User(){
var myLayer = document.getElementById("User");
if(myLayer.style.display=="none" || myLayer.style.display==""){
myLayer.style.display="block";
} else {
myLayer.style.display="none";
}
}
</script>

<div id="navigation">
	<a class="link" style="top:8px;" href="?pg=Home" onmouseover="javascript:Home()" onmouseout="javascript:Home()">Home</a>
<a class="link" style="top:58px;" href="?pg=Information" onmouseover="javascript:Information()" onmouseout="javascript:Information()">Information</a>
<a class="link" style="top:108px;" href="?pg=Members" onmouseover="javascript:Members()" onmouseout="javascript:Members()">Members</a>
<a class="link" style="top:158px;" href="?pg=News" onmouseover="javascript:News()" onmouseout="javascript:News()">News</a>
<a class="link" style="top:208px;" href="?pg=Schedule" onmouseover="javascript:Schedule()" onmouseout="javascript:Schedule()">Schedule</a>

<a class="link" style="top:258px;" href="?pg=User" onmouseover="javascript:User()" onmouseout="javascript:User()">User</a>
	</div>
<!-- End Navigation -->
<!-- Begin Content -->
<div id="content">
	Welcome Mark.	</div>
<table id="Members" class="sub_container" style="top: 200px; display: none;" onmouseover="javascript:Members()" onmouseout="javascript:Members()">
	<tr><td><a href="?pg=Members&sub=List">List</a></td></tr>

		<tr><td><a href="?pg=Members&sub=Edit">Edit</a></td></tr>
		</table><table id="News" class="sub_container" style="top: 229px; display: none;" onmouseover="javascript:News()" onmouseout="javascript:News()">
	<tr><td><a href="?pg=News&sub=All">All</a></td></tr>
		<tr><td><a href="?pg=News&sub=Week">Week</a></td></tr>
		<tr><td><a href="?pg=News&sub=Month">Month</a></td></tr>
		<tr><td><a href="?pg=News&sub=Create">Create</a></td></tr>

		</table><table id="Schedule" class="sub_container" style="top: 258px; display: none;" onmouseover="javascript:Schedule()" onmouseout="javascript:Schedule()">
	<tr><td><a href="?pg=Schedule&sub=Week">Week</a></td></tr>
		<tr><td><a href="?pg=Schedule&sub=Month">Month</a></td></tr>
		<tr><td><a href="?pg=Schedule&sub=Create">Create</a></td></tr>
		</table><table id="User" class="sub_container" style="top: 287px; display: none;" onmouseover="javascript:User()" onmouseout="javascript:User()">
	<tr><td><a href="?pg=User&sub=Edit">Edit</a></td></tr>
		<tr><td><a href="?pg=User&sub=Logout">Logout</a></td></tr>

		</table>

 

I only have the necessary js code and html coding. I'm no veteran when it comes to js and the only reason that there are so many js functions is because a new one is generated by php code for each link in my navigation bar. The issue is that the submenus for each link will not appear at all until I change the initial visibility to "block". is there some error in my code?

Link to comment
https://forums.phpfreaks.com/topic/172647-solved-javascript-menu/
Share on other sites

If anyone wants to take a look into this issue go to http://65.6.138.219/church. This is a home hosted test location in which I have no url yet. At the homepage, run your mouse over any of the bottom 3 navigation links. There should be a small sub-menu that appears just a slight bit to the right of each. I'm not sure as to why they won't execute properly, but feel free to take a look at the source and tell me if you notice anything.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.