A humble addition to the documentation. If you decide to use it, consider forking the codepen and changing the link so I don't accidentally change it.
Replacing the #Menu section of README.md
Basic Menu
You can add a custom menu that works to control the page, this will read every element that is in the menu element and if those elements are clicked it will redirect to the page based on the data-page
attribute.
Every selected menu both menu item and page element will be add active
class, you can change class name with pageSelectedClass
and menuSelectedClass
in options.
<ul class="side-nav">
<!-- add the `data-page` attribute that contains the selector to the page element -->
<li data-page="#page1">Page 1</li>
<li data-page="#page2">Page 2</li>
<li data-page="#page3">Page 3</li>
</ul>
const scrollPage = new ScrollPage("#main-page",{
menu:"ul.side-nav",//menu selector
});
Advanced Menu
In this example the menu will only display dots and on hover will show the page name.
Codepen
<ul class="side-nav">
<!-- add the `data-hovertext` attribute to represent the hover text -->
<li data-page="#page1" data-hovertext="Page 1"></li>
<li data-page="#page2" data-hovertext="Page 2"></li>
<li data-page="#page3" data-hovertext="Page 3"></li>
</ul>
All the functionality happens in CSS.
/* below relates to scollPage-js Advanced Menu */
:root {
--dotMenuColor: black;
--dotMenuCircleSize: 7px;
--dotMenuBWCircles: 7px;
}
ul.side-nav {
position: fixed;
top: 50%;
transform: translate(0, -50%);
right: 0;
display: flex;
flex-direction: column;
align-content: center;
justify-content: center;
width: max-content;
padding: 0;
margin: 0;
z-index: 999;
}
ul.side-nav li {
position: relative;
list-style: none;
color: var(--dotMenuColor);
border: 2px solid var(--dotMenuColor);
border-radius: 50%;
text-transform: uppercase;
margin: var(--dotMenuBWCircles);
padding: var(--dotMenuCircleSize);
}
ul.side-nav li:hover {
cursor: pointer;
background-color: var(--dotMenuColor);
}
ul:hover li:not(:hover) {
background-color: unset !important;
}
/* Careful if using some frameworks, this dynamically added style will be pruned, consider :global() */
ul.side-nav li.active {
cursor: pointer;
background-color: var(--dotMenuColor);
}
ul.side-nav li:after {
content: attr(data-hovertext);
position: absolute;
color: var(--dotMenuColor);
visibility: hidden;
width: max-content;
opacity: 0;
top: -2px;
z-index: 1;
transition: opacity .25s ease-in-out;
}
ul.side-nav li:hover:after {
visibility: visible;
right: 25px;
opacity: 1;
transition: opacity .75s ease-in-out;
}