My website currently features a navigation bar with 4 anchor links that direct users to different sections of the page. As you scroll down the page, the corresponding link on the nav bar lights up to signify your position on the site.
Experience it yourself...
VIEW MY WEBSITE
Observe how the navigation buttons change as you navigate through various sections.
I managed to implement this functionality, but the approach I took was clunky and not very elegant. I created 4 directives to individually handle each button's behavior as the user scrolled within specific ranges of the page.
Does anyone have suggestions for cleaner and more streamlined directives to achieve the same effect?
HTML snippet:
<div id='dots-menu-nav'>
<nav id='vertical-dots-menu'>
<ul>
<li class='nav-li'>
<a href="" ng-click='landingControl.goToAnchor("mystory")' class='dots-menu-anchor'><span about-location class='dots-menu-dot'></span><span class='dots-menu-label'>ABOUT</span></a>
</li>
<li class='nav-li'>
<a href="" ng-click='landingControl.goToAnchor("contact-tag")' class='dots-menu-anchor'><span tech-location class='dots-menu-dot'></span><span class='dots-menu-label'>TECHNOLOGIES</span></a>
</li>
<li class='nav-li'>
<a href="" ng-click='landingControl.goToAnchor("projects")' class='dots-menu-anchor'><span project-location class='dots-menu-dot'></span><span class='dots-menu-label'>PROJECTS</span></a>
</li>
<li class='nav-li'>
<a href="" ng-click='landingControl.goToAnchor("contact")' class='dots-menu-anchor'><span contact-location class='dots-menu-dot'></span><span class='dots-menu-label'>CONTACT</span></a>
</li>
</ul>
</nav>
</div>
CSS styling:
.border-black{
border: 2px solid black;
}
.dots-menu-dot{
position: relative;
display: inline-block;
top: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: white;
float: right;
}
li:hover .dots-menu-dot{
transform: scale(1.1);
transition: background 0.215s ease-in-out 0s, transform 0.215s ease-in-out 0s, border 0.215s ease-in-out 0s;
background-color: black;
border: 2px solid white;
}
li:hover .dots-menu-label{
color: white;
top: 1px;
font-family: 'WSBold'
}
Directives implementation (currently repetitive):
... Directives code here ...
Your input and guidance on this matter would be highly appreciated. Thank you in advance.