Tuesday, April 19, 2022

How to Create a Sticky Toolbar With CSS and a Bit of JavaScript

How to Create a Sticky Toolbar With CSS and a Bit of JavaScript

In this new tutorial we’ll learn how to create a sticky (or fixed) toolbaralso referred to as a vertical navigation menu—with animated tooltips that you can use on your sites for all sorts of things.

For example, if you are a store owner, you can use it to include a quick links feature for promoting products on sale, featured categories, wishlist and contact pages, etc. Similarly, if you are a theme author, your toolbar could include theme and language switchers, social media links, a search box, quick accessibility options such as increasing the site’s font size, and so on. 

We’ll build this component using straightforward HTML and CSS. We’ll only use a bit of JavaScript for toggling a CSS class to make the toolbar visible and hidden. But, if you’re feeling adventurous and would like to try building this stuff without using any JavaScript, have a look at one of my previous tutorials

Our Sticky Toolbar Demo

Check our finished component:

1. Begin With Some Icons

For the purposes of this tutorial we’ll use some SVG UI icons by TanahAirStudio taken from Envato Elements. TanahAirStudio have a huge range of icon sets, so if the one you’re looking for isn’t in the 25 you see below, you can bet you’ll find it in one of the other related sets.

UI Icon SetUI Icon SetUI Icon Set

2. Define the HTML Markup

We’ll define a wrapper element that will contain:

  • The button for opening the toolbar.
  • The toolbar itself. Inside it, we’ll place three links along with their icons and the button for closing the toolbar. Each link will have the data-tooltip attribute that will appear as we hover over the target link.

By default, the toolbar can be either visible or not. In our example, initially, it will be hidden. However, we can alter this state by appending the show-toolbar class to the outer container.

Here’s the required structure for our toolbar:

3. Specify the Main Styles

Let’s now concentrate on the core styles.

All toolbar's pieces togetherAll toolbar's pieces togetherAll toolbar's pieces together

Here are the notable things:

  • The toolbar container will be a fixed positioned element placed in the center-right position of the screen and have a fixed width of 80px.
  • The button that opens the toolbar will be absolutely positioned and placed in the middle of its parent. As we discussed earlier, the toolbar will initially be out of the screen, thanks to the transform: translateX(100%) property value.
  • The tooltips for the toolbar links will initially be hidden and appear as we hover over the associated link. To create them, we'll use their ::before and ::after pseudo-elements. Both will be absolutely positioned with proper right values and have pointer-events: none to ignore pointer events. The ::before pseudo-element will show the tooltip text as derived from the data-tooltip attribute of its parent link, while the ::after pseudo-element will function as a decorative element for creating a triangle.

The corresponding styles:

4. Add the JavaScript

Each time we click on the .toggle-toolbar buttons, we’ll toggle the visibility of the open toolbar button and the toolbar itself via the show-toolbar class.

Here’s the required JavaScript code:

And the relevant styles:

Conclusion

In this quick tutorial we created an animated sticky toolbar that aims to pique visitors’ interest and serve information that needs to be immediately accessible. Hopefully, you’ve found some interest in this implementation and you’ll include it in one of your upcoming projects.

As an exercise, you can extend this demo by isolating the toggle behavior only on desktop devices and following a different approach on mobile ones. For example, by showing all tooltips by default.

Before closing, let’s remind ourselves of what we built today:

As always, thanks a lot for reading!

Learn More Practical JavaScript with Tuts+


No comments:

Post a Comment