I want to do something like this - http://kiskolabs.com/#blog
Menu items highlight when scrolled to different positions. Can anyone point me in the direction of tutorials. Also, is there a name for this type of technique?
I haven't come across that before but it would be relatively easy to do assuming that each section is in a div with a different id (which it would need to have as the destination for the menu anyway).
Simply attach a mouseover to each of the divs that applys the appropriate style to the menu entry and a mouseout that restyles it back.
As a simple example using inline event handlers you would have something along the lines of:
<li id="menuservice"><a href="#service">Service</a></li>
<div id="service" onmouseover="document.getElementById('menuservice').style.backgroundColor = '#00c';"
onmouseout="document.getElementById('menuservice').style.backgroundColor = '#ccc';">
If I were adding this to a real web page I'd use unobtrusive event listeners and make use of the id on the div to attache them.
rpeg, I've seen something like this implemented using a jQuery plugin called "Waypoints" - if you don't mind using jQuery on your site, it might be worth taking a look at their demo page: http://imakewebthings.com/jquery-waypoints/
This topic is now closed. New replies are no longer allowed.