...

View Full Version : One Page Website Navigation Menu Question



seanlim27
07-20-2011, 09:37 PM
Hi!

I have searched the internet far and wide for an answer to my question, but it has proven quite difficult thinking of an accurate search query so I'm going to attempt to explain myself here. Thank you in advance for reading about my issue.

I have four links reading "home", "info", "contact", and "links" positioned at the top of a page. On hover each link changes to "HOME", "INFO", "CONTACT", and "LINKS", respectively. The each link is anchored to a section somewhere else on the page. I'm hoping to create a one page website.

Is it possible to make it so that when you click "home" it links you to a certain part of the page and changes to "HOME" leaving the other links "info", "contact", and "links"? If you click "info" I'm hoping that "HOME" will go back to "home", "info" will change to "INFO" and then direct you to the info anchor on the page.

Does this make sense?

Thanks again for your time!

xFinaLx
07-20-2011, 10:15 PM
Here you go:



<script type="text/javascript">
function homeSelect(){
document.getElementById("homeLower").style.display="none";
document.getElementById("homeUpper").style.display="block";
document.getElementById("infoLower").style.display="block";
document.getElementById("infoUpper").style.display="none";
document.getElementById("contactLower").style.display="block";
document.getElementById("contactUpper").style.display="none";
document.getElementById("linksLower").style.display="block";
document.getElementById("linksUpper").style.display="none";

}
function infoSelect(){
document.getElementById("homeLower").style.display="block";
document.getElementById("homeUpper").style.display="none";
document.getElementById("infoLower").style.display="none";
document.getElementById("infoUpper").style.display="block";
document.getElementById("contactLower").style.display="block";
document.getElementById("contactUpper").style.display="none";
document.getElementById("linksLower").style.display="block";
document.getElementById("linksUpper").style.display="none";

}
function contactSelect(){
document.getElementById("homeLower").style.display="block";
document.getElementById("homeUpper").style.display="none";
document.getElementById("infoLower").style.display="block";
document.getElementById("infoUpper").style.display="none";
document.getElementById("contactLower").style.display="none";
document.getElementById("contactUpper").style.display="block";
document.getElementById("linksLower").style.display="block";
document.getElementById("linksUpper").style.display="none";

}
function linksSelect(){
document.getElementById("homeLower").style.display="block";
document.getElementById("homeUpper").style.display="none";
document.getElementById("infoLower").style.display="block";
document.getElementById("infoUpper").style.display="none";
document.getElementById("contactLower").style.display="block";
document.getElementById("contactUpper").style.display="none";
document.getElementById("linksLower").style.display="none";
document.getElementById("linksUpper").style.display="block";

}


</script>
<style type="text/css">
#homeLower{
display:block;
}
#homeUpper{
display:none;
}
#infoLower{
display:block;
}
#infoUpper{
display:none;
}
#contactLower{
display:block;
}
#contactUpper{
display:none;
}
#linksLower{
display:block;
}
#linksUpper{
display:none;
}


</style>

<a href="#" id="homeLower" onclick="homeSelect();">home</a>
<a href="#" id="homeUpper" onclick="homeSelect();">HOME</a>
<a href="#info" id="infoLower" onclick="infoSelect();">info</a>
<a href="#info" id="infoUpper" onclick="infoSelect();">INFO</a>
<a href="#contact" id="contactLower" onclick="contactSelect();">contact</a>
<a href="#contact" id="contactUpper" onclick="contactSelect();">CONTACT</a>
<a href="#links" id="linksLower" onclick="linksSelect();">links</a>
<a href="#links" id="linksUpper" onclick="linksSelect();">LINKS</a>


This is probably a bad way to do it, but it works and might give you ideas on a better way.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum