www.webdeveloper.com
Results 1 to 6 of 6

Thread: active link for horizontal one page scrolling website

  1. #1
    Join Date
    Jul 2013
    Posts
    57

    active link for horizontal one page scrolling website

    hello,

    i'm develop a website using scrollTo, make it scroll horizontally. and it is one page navigation website. my problem is, the active link. when i click link in navbar, it will highlighted. or automatically highlight. and if i click any links in content also highlighted. meaning, in content i put link to properties (that in navbar), then the properties link highlighted. how to do this?

  2. #2
    Join Date
    Mar 2012
    Posts
    1,511
    I'm sorry, I do not understand your question. Why does a one page web site need a nav bar??? What is the nav bar supposed to do? The nav item changing color when you click it is the default behavior for visited links.

    Please clarify what you are seeking to ahieve.

  3. #3
    Join Date
    Jul 2013
    Posts
    57
    it is something like this. http://s3.sitepoint.com/examples/sidescroll/demo4.html

    but i want when the page active, the link in navbar, will have border on top and bottom. how?

  4. #4
    Join Date
    Mar 2012
    Posts
    1,511
    Right, I see what you are seeking to achieve. Selections from the nav bar side-scroll the body to display the relevant content. The nav bar is actually implemented in a div called "banner":

    Code:
    		<div id="banner">
    				<h1>
    					Uncle Tex's <span>Friendly Sneaker Shop</span>
    				</h1>
    				<ul>
    			d		<li>
    						<a href="#home">Home</a>
    					</li>  
    					<li>   
    						<a href="#newsletter">Newsletter</a>
    					</li>  
    					<li>   
    						<a href="#directions">Directions &amp; Opening Hours</a>
    					</li>  
    					<li>   
    						<a href="#contact">Contact us</a>
    					</li>
    				</ul>
    		</div>
    To add a border top and bottom to the nav bar, you need to amend the relevant code in the css file "styles.css":

    Code:
    #banner {
    	position: fixed;
    	width: 100%;
    	padding: 0 30px;
    	line-height: 45px;
    	background-color: #000;
    	background-color: rgba(0,0,0,0.5);
    	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#00000000', EndColorStr='#00000000');
    	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00000000, endColorstr=#00000000)";
    }
    add something like:

    border-top: 5px solid red;
    border-bottom: 5px solid red;

    I've not tested this, so you may need to tweak it a bit, but that is the general idea...

  5. #5
    Join Date
    Jul 2013
    Posts
    57
    this for banner border right? i need for active link / current link only. how?

  6. #6
    Join Date
    Mar 2012
    Posts
    1,511
    That will need changes to the JavaScript. You need assistance from someone more familiar with JScript. I'll move the thread to the relevant section...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles