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
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.

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.