Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    One Page Website Navigation Menu Question

    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!

  • #2
    New Coder
    Join Date
    May 2011
    Posts
    79
    Thanks
    3
    Thanked 4 Times in 4 Posts
    Here you go:

    Code:
    <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.
    Last edited by xFinaLx; 07-22-2011 at 03:33 AM.
    Quote Originally Posted by bullant View Post
    Basically - Java is to Javascript as Ham is to Hampster.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •