html - Side bar with Way points -
hey name kasper!
i'm making side bar on portfolio website, learned #way points day's ago.
and want add menu bar, can't seem right, code looks like:
<!-- /#sidebar-wrapper -----------------------------------------------------------------------> <div id="sidebar-wrapper"> <ul class="sidebar-nav"> <div class="menu-links scroll-me"> <li class="sidebar-brand"> <div href="#"> <a href="#header"> <img class="imagefixstyle" src="assets/img/logsmall.png" alt="sbnlogo" /></a> </div> </li> <hr /> <li><a href="#about"><i class="fa fa-archive fa-2x"></i></a></li> <hr /> <li><a href="#clients"><i class="fa fa-globe fa-spin fa-2x"></i></a></li> <hr /> <li><a href="#newsletter"><i class="fa fa-user-plus fa-2x"></i></a></li> <hr /> <li><a href="#contact"><i class="fa fa-mars-stroke fa-2x"></i></a></li> <hr /> <li><a href="#contactme"><i class="fa fa-envelope fa-2x"></i></a></li> <hr /> </div> </ul> </div> <!-- /#sidebar-wrapper ----------------------------------------------------------------------->
the code can seen in action on : http://kaslabdesign.dk/
now want happen each time come 1 of menu points menu point @ needs high lighted.
i have looked @ guides none of them have specific problem. hope can me solve problem since i'm bald because of this.
have nice day/evening & thank reading this. best regards kasper.
p.s hope can me ;)! , hope explain enought..
try using http://imakewebthings.com/waypoints/guides/jquery-zepto/ handle each block waypoint , when hit, highlight associated link in menu. association made href attribute.
$(function() { $('p').waypoint({ handler: function(direction) { $("a").css("color", ""); $("a[href='#" + this.element.id + "']").css("color", "red"); } }) });
ul { position:fixed; top:0; left:0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.js"></script> <ul> <li> <a href="#item1">item1</a> </li> <li> <a href="#item2">item2</a> </li> <li> <a href="#item3">item3</a> </li> </ul> <div> <p id="item1">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></p> <p id="item2">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></p> <p id="item3">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></p> </div>
Comments
Post a Comment