Can someone please explain to how the navigation works on these sites – specifically the highlighting of the anchor links on scroll?
www.brizk.com
www.crushlovely.com
The length requirement for posts cut down what I could post so I wanted to explain that I understand everything with ScrollTo and how the navigation is created. I specifically wanted to know how the navs are highlighted when you click them/when the page scrolls....which is what I think you were attempting to answer in the first paragraph. How is the anchor tag given an id instead of a URL? Is that with Javascript? I'm mainly a HTML/CSS guy so if you could supply some code that would be great.
Here's the code pulled directly from the Brizk site.
Anchor Link
<a name="blog"></a>
Nav when highlighted:
<li class="current"><a title="" href="#blog" style="color: Rgb(255, 255, 255); background-color: Rgb(48, 62, 63);">Blog</a></li>
Nav when not highlighted:
<li><a title="" href="#blog" style="color: Rgb(255, 255, 255); background-color: Rgb(48, 62, 63);">Blog</a></li>
CSS:
#nav ul li.current a {background:none repeat scroll 0 0 #303E3F; color:#FFFFFF;}
#nav ul li a {-moz-border-radius:5px 5px 5px 5px; color:#717C7D; display:block; line-height:1; padding:10px; text-align:right; text-decoration:none; width:70px;}
Here's the code pulled directly from the Brizk site.
Anchor Link
<a name="blog"></a>
Nav when highlighted:
<li class="current"><a title="" href="#blog" style="color: Rgb(255, 255, 255); background-color: Rgb(48, 62, 63);">Blog</a></li>
Nav when not highlighted:
<li><a title="" href="#blog" style="color: Rgb(255, 255, 255); background-color: Rgb(48, 62, 63);">Blog</a></li>
CSS:
#nav ul li.current a {background:none repeat scroll 0 0 #303E3F; color:#FFFFFF;}
#nav ul li a {-moz-border-radius:5px 5px 5px 5px; color:#717C7D; display:block; line-height:1; padding:10px; text-align:right; text-decoration:none; width:70px;}
Also, I'm not really sure where you are seeing sprites. There's no sprites being used on this site. Easily seen with firebug.
The anchor tag in the navigation is given an id instead of a URL location. The location that is to be linked to is then assigned that id. Now, when the link is clicked it will navigate to the div with the corresponding ID.
The hovers are taken care of with CSS :hover pseudo class.
These also use CSS Sprite based navigation. See this article for an explanation: stylemeltdown.com or www.ehousestudio.com
JQuery is then used to animate the scrolling. See jQuery ScrollTo and LocalScroll
The hovers are taken care of with CSS :hover pseudo class.
These also use CSS Sprite based navigation. See this article for an explanation: stylemeltdown.com or www.ehousestudio.com
JQuery is then used to animate the scrolling. See jQuery ScrollTo and LocalScroll