{"id":6038,"date":"2021-03-25T01:00:00","date_gmt":"2021-03-25T00:00:00","guid":{"rendered":"https:\/\/alvarotrigo.com\/epa\/create-a-slidebar-bullet-navigation-to-smoothly-snap-to-sections\/"},"modified":"2024-02-08T00:29:37","modified_gmt":"2024-02-07T23:29:37","slug":"create-a-slidebar-bullet-navigation-to-smoothly-snap-to-sections","status":"publish","type":"post","link":"https:\/\/alvarotrigo.com\/blog\/create-a-slidebar-bullet-navigation-to-smoothly-snap-to-sections\/","title":{"rendered":"Create a sidebar bullet navigation to smoothly snap to sections"},"content":{"rendered":"\n

Create a sidebar bullet navigation to smoothly snap to sections<\/h2>\n\n\n\n

Navigation is a fundamental requirement in many applications, whether it’s a web or mobile app. Businesses tend to put in a lot of effort and time to be unique or to stand out from the competition and this extends to their landing pages. A bullet-based sidebar navigation is one of the few quirky methods to do so.<\/p>\n\n\n\n

Understanding the effect<\/h2>\n\n\n\n

The primary component of this effect is the sidebar that is fixed to either left or right side of the viewport, preferably towards the center to attract the most of a user’s attention. This component when interacted with must allow users to navigate the page. It is also important to make the jump, as smooth as possible, for which we will use the concept of smooth-scrolling.<\/p>\n\n\n\n

\"demonstration<\/figure>\n\n\n\n

Setting up the HTML<\/h2>\n\n\n\n

For the sake of this tutorial, we will have 3 section<\/code>s that will take up the full height of the viewport, each will of them will have an id<\/code> attribute that will help us with navigating between section<\/code>s and we will add in a few headings in the them, but you can replace the headings with what you want.<\/p>\n\n\n

<!DOCTYPE html<\/span>><\/span>\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\n  <head<\/span>><\/span>\n    <meta<\/span> charset<\/span>=\"UTF-8\"<\/span> \/><\/span>\n    <meta<\/span> name<\/span>=\"viewport\"<\/span> content<\/span>=\"width=device-width, initial-scale=1.0\"<\/span> \/><\/span>\n    <title<\/span>><\/span>Sidebar navigation<\/title<\/span>><\/span>\n  <\/head<\/span>><\/span>\n  <body<\/span>><\/span>\n    <main<\/span>><\/span>\n      <section<\/span> id<\/span>=\"first\"<\/span>><\/span>\n        <h1<\/span>><\/span>Hello<\/h1<\/span>><\/span>\n      <\/section<\/span>><\/span>\n      <section<\/span> id<\/span>=\"second\"<\/span>><\/span>\n        <h1<\/span>><\/span>How are you?<\/h1<\/span>><\/span>\n      <\/section<\/span>><\/span>\n      <section<\/span> id<\/span>=\"third\"<\/span>><\/span>\n        <h1<\/span>><\/span>Goodbye!<\/h1<\/span>><\/span>\n      <\/section<\/span>><\/span>\n    <\/main<\/span>><\/span>\n  <\/body<\/span>><\/span>\n<\/html<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Next, we will set up the sidebar, and we will use the semantic HTML tag aside<\/code> that will contain an unordered list that will contain an anchor tag in each list item. To make things simple, we will use a bunch of small circles, but you can quite literally put anything inside the a<\/code> tags, and you can style it however you want!<\/p>\n\n\n
<!DOCTYPE html<\/span>><\/span>\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\n  <!-- Collapsed --><\/span>\n  <body<\/span>><\/span>\n    <main<\/span>><\/span>\n      <aside<\/span>><\/span>\n        <ul<\/span>><\/span>\n          <li<\/span>><\/span>\n            <a<\/span> class<\/span>=\"indicator active\"<\/span> href<\/span>=\"#first\"<\/span>><\/span><\/a<\/span>><\/span>\n          <\/li<\/span>><\/span>\n          <li<\/span>><\/span>\n            <a<\/span> class<\/span>=\"indicator\"<\/span> href<\/span>=\"#second\"<\/span>><\/span><\/a<\/span>><\/span>\n          <\/li<\/span>><\/span>\n          <li<\/span>><\/span>\n            <a<\/span> class<\/span>=\"indicator\"<\/span> href<\/span>=\"#third\"<\/span>><\/span><\/a<\/span>><\/span>\n          <\/li<\/span>><\/span>\n        <\/ul<\/span>><\/span>\n      <\/aside<\/span>><\/span>\n      <!-- Collapsed --><\/span>\n    <\/main<\/span>><\/span>\n  <\/body<\/span>><\/span>\n<\/html<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Styling things up!<\/h2>\n\n\n\n
The styles will bring our markup and logic together nicely. Firstly, we enable smooth scroll using the scroll-behavior<\/code> property.<\/p>\n\n\n
html<\/span> {\n  scroll-behavior<\/span>: smooth;\n}\nbody<\/span> {\n  margin<\/span>: 0<\/span>;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Now we style the aside<\/code> element. We have to make sure that the sidebar is accessible to the user no matter which section they are in, especially if the scroll bar has been disabled. position: fixed<\/code> combined with top: 50%<\/code> can achieve a certain degree of this but we need to use transform<\/code> to make sure that the aside<\/code> is 50%<\/code> from the top of the viewport.<\/p>\n\n\n\n
The indicator<\/code> class will turn the ordinary anchor tag into a white circle with a height<\/code> and width<\/code> of 15px<\/code>. Because the active<\/code> class increases the scale<\/code> of these white dots, we make sure that the unordered list is always aligned properly using flexbox.<\/p>\n\n\n
aside<\/span> {\n  position<\/span>: fixed;\n  top<\/span>: 50%<\/span>;\n  transform<\/span>: translate<\/span>(-50%<\/span>, -50%<\/span>);\n}\naside<\/span> ul<\/span> {\n  display<\/span>: flex;\n  flex-direction<\/span>: column;\n  align-items<\/span>: center;\n  list-style-type<\/span>: none;\n  margin<\/span>: 0<\/span>;\n}\naside<\/span> ul<\/span> li<\/span> .indicator<\/span> {\n  cursor<\/span>: pointer;\n  margin-top<\/span>: 1rem<\/span>;\n  display<\/span>: block;\n  height<\/span>: 15px<\/span>;\n  width<\/span>: 15px<\/span>;\n  border-radius<\/span>: 50%<\/span>;\n  background-color<\/span>: white;\n}\naside<\/span> ul<\/span> li<\/span> .active<\/span> {\n  transform<\/span>: scale<\/span>(1.7<\/span>);\n  transition<\/span>: transform 200ms<\/span> ease-in-out;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Next, we make each section take the height of the viewport and give each odd and even section a different background-color<\/code>. Lots of potentials to do some creative styling here!<\/p>\n\n\n
section<\/span> {\n  min-height<\/span>: 100vh<\/span>;\n  display<\/span>: flex;\n  justify-content<\/span>: center;\n  align-items<\/span>: center;\n}\nsection<\/span>:nth-child(odd)<\/span> {\n  background-color<\/span>: #ffcc33<\/span>;\n}\nsection<\/span>:nth-child(even)<\/span> {\n  background-color<\/span>: #ffb347<\/span>;\n}\nsection<\/span> h1<\/span> {\n  margin<\/span>: 0<\/span>;\n  font-family<\/span>: sans-serif;\n  font-size<\/span>: 4rem<\/span>;\n  color<\/span>: white;\n}\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
Highlighting the active link<\/h2>\n\n\n\n
Remember the active<\/code> class from before? The stylistic function for it was to help users to identify which of the anchor tags is mapped to the current section. Now we have to make sure that style is applied to the correct anchor tag. To do this get a list of all the anchor tags with the indicator<\/code> class, then iterate the list each time applying a click<\/code> event listener.<\/p>\n\n\n\n
This listener will first call resetIndicators<\/code> to remove the active<\/code> class from all the anchor tags with the indicator<\/code> class and then safely add the active<\/code> class.<\/p>\n\n\n
const<\/span> indicators = document<\/span>.querySelectorAll('a.indicator'<\/span>);\nconst<\/span> resetCurrentActiveIndicator = ()<\/span> =><\/span> {\n  const<\/span> activeIndicator = document<\/span>.querySelector(\".active\"<\/span>);\n  activeIndicator.classList.remove(\"active\"<\/span>);\n};\nindicators.forEach((indicator<\/span>) =><\/span> {\n  indicator.addEventListener('click'<\/span>, function<\/span> (<\/span>) <\/span>{\n    resetCurrentActiveIndicator();\n    this<\/span>.classList.add('active'<\/span>);\n  });\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
\n
If you are also interested in menus on the side, check out these examples of great side menus<\/a> for your webpage!<\/p>\n<\/blockquote>\n\n\n\n
Activating the indicators while scrolling<\/h2>\n\n\n\n
If you just tested the code as it is right now, you might\u2019ve notice the awkwardness felt when the you scrolled using the scrollbar and the indicators didn\u2019t get activated. To do this, we can make use of the IntersectionObserver<\/code><\/a> API.  The IntersectionObserver<\/code> class accepts 2 arguments. The first is a callback, and the second is an options object which can be used to configure the behaviour of the observer. The callback will be called whenever the conditions described in the options object are met. For the sake of this tutorial, the only property of the options object that matters is threshold<\/code>.<\/p>\n\n\n\n
The threshold<\/code> property can be set to a value or an array, it describes at what percentage of the observed element\u2019s visibility in the viewport should the callback function be fire. The onSectionLeavesViewport<\/code> function creates a IntersectionObserver<\/code> instance that takes a function that contains the logic that will activate the respective indicator. This particular function receives as an input an array of objects entries<\/code>, each object contains information on things like whether or not an intersection is happening.<\/p>\n\n\n\n
Finally, to make the IntersectionObserver<\/code> target an element we will call the observe()<\/code> method on observer<\/code> which is a reference to the instance of IntersectionObserver<\/code>.<\/p>\n\n\n\n
When about 75% (0.75 threshold) of the observed element (a section) has left the viewport, the callback will be called, and this is when we will reset the active indicator and find the indicator that has to be activated and then activate it. If you want to change when the callback is called, you should alter the threshold<\/code> value.<\/p>\n\n\n
const<\/span> sections = document<\/span>.querySelectorAll(\"section\"<\/span>);\n\nconst<\/span> onSectionLeavesViewport = (section<\/span>) =><\/span> {\n  const<\/span> observer = new<\/span> IntersectionObserver(\n    (entries<\/span>) =><\/span> {\n      entries.forEach((entry<\/span>) =><\/span> {\n        if<\/span> (entry.isIntersecting) {\n          resetCurrentActiveIndicator();\n          const<\/span> element = entry.target;\n          const<\/span> indicator = document<\/span>.querySelector(`a[href='#${element.id}<\/span>']`<\/span>);\n          indicator.classList.add(\"active\"<\/span>);\n          return<\/span>;\n        }\n      });\n    },\n    {\n      root<\/span>: null<\/span>,\n      rootMargin<\/span>: \"0px\"<\/span>,\n      threshold<\/span>: 0.75<\/span>\n    }\n  );\n  observer.observe(section);\n};\n\nsections.forEach(onSectionLeavesViewport);\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Adding a fallback for old browsers<\/h2>\n\n\n\n
Unfortunately, some of the older browsers do not support the scroll-behavior<\/code><\/a> CSS property. As such, if you wish to support older browsers we can make use of the scrollIntoView<\/code> method. What happens here is we get the element with the href<\/code> attribute that the current element has (which is an id) and then call the method on it.<\/p>\n\n\n\n
This isn’t a 100% solid method to support old browsers, scrollIntoViewOptions<\/code><\/a> for example isn’t supported in old IE browsers but the only other alternatives are using an external library for smooth scroll, adding a polyfill<\/a>, or doing the smooth-scroll bit yourself.<\/p>\n\n\n
\/* Collapsed *\/<\/span>\nindicators.forEach((indicator<\/span>) =><\/span> {\n  indicator.addEventListener('click'<\/span>, function<\/span> (<\/span>) <\/span>{\n    document<\/span>\n      .querySelector(this<\/span>.getAttribute('href'<\/span>))\n      .scrollIntoView({ behavior<\/span>: 'smooth'<\/span> });\n    \/* Collapsed *\/<\/span>\n  });\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Take a look at the following codepen and see if everything works as expected! It can be a good reference link too, so you could potentially bookmark it for later.<\/p>\n\n\n\n