Floating Share Menu

Hi, guys! This post is all about making floating share menu component via CSS and JS for your web project. Basically, floating in here means that the share menu items like social media for example, will be floating away from it’s share toggle, animated on click event either active or not. Therefore, we will use just 2 lines of vanilla JS, other than that are all css + transform and animation.

What’s this component used for? Well, all of the results are always put at the end of the article so just follow along if you want to learn step by step or scroll down to bottom if you want to have a look on what we’ll learn from this trick.

Building the Structure

So, firstly, we will have to build the html structure, it’s quite simple. All you need is just a container with class of share-link and its child elements which consist of share-link-handler and share-link-item. Note that share-link-handler will be the toggle button to toggling the hidden or displayed share-link-item.

By that concept in mind, let’s build:

html

Just for a note, handler and item are siblings so they both are direct children of share-link. Also have a lock, on each child (span) I use line-awesome icon from https://icons8.com/line-awesome.

The Styling

Now we come into the funniest part. We already build a container and child for this floating menu, what we need to do is to style them so that all of the children absolute positioned. That way, we can use z-index to make some kind of layer and also absolute positioning doesn’t care about it’s sibling bounding box so they can collide and touching each other without affecting the document flow, short story: they are floating!

CSS

.share-link {
    position: fixed;
    top: 50%;
    left: 50%;
}
.share-link > span {
    display: block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    padding: 0;
    border-radius: 50%;
    font-size: 20px;
    z-index: 1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.share-link > span::before {
    display: inline-block;
    width: auto;
    height: 30px;
    line-height: 30px;
    font-size: 10px;
    padding: 0 14px;
    border-radius: 5px;
    background-color: white;
    color: #212121;
    position: absolute;
    bottom: calc(100% + 12px);
    visibility: hidden;
    opacity: 0;
    white-space: nowrap;
    content: attr(data-title);
}
.share-link > span:hover::before {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-in;
}
.share-link > .share-link-handler {
    border: 2px solid transparent;
    background-color: white;
    color: #292f33;
    z-index: 3;
    box-shadow: 2px 2px 7px rgba(0, 0, 0, .25);
    transition: background-color 0.3s ease-in, color 0.2s ease-in;
    cursor: pointer;
}
.share-link > .share-link-handler:hover, .share-link > .share-link-handler.active {
    background-color: #55acee;
    color: white;
    border-color: white;
    transition: background-color 0.3s ease-in, color 0.2s ease-in;
}
.share-link > .share-link-handler.active:hover::before {
    opacity: 0;
    visibility: hidden;
}

The current style is for base styling, basically we are using share-link as container for it’s absolute positioned elements so that it’s child constrained inside of it. Note that I use position fixed for share-link, that’s because it’s a demo and I wanna put my container floating around the middle of the screen, on your case, you’ll tweak that as per project’s need. Also, remember that position: absolute works on non-static positioned elements. So, in order to make absolute child works, you either put it on position: relative or position: absolute or simply position: fixed. I dont know if it’s okay to put absolute positioned element inside sticky one, at least those 3 are suited perfectly. The floating menu is of course heavily on float positioning.

Now that it’s all set up, we will build the core animation after all those last css codes

CSS

.share-link > .share-link-handler.active ~ .share-link-item {
    transition: transform 0.3s ease-in;
}
.share-link > .share-link-handler.active ~ .share-link-item:nth-child(2) {
    transform: translate(-75%, -250%);
    transition-delay: 0;
}
.share-link > .share-link-handler.active ~ .share-link-item:nth-child(3) {
    transform: translate(100%, -190%);
    transition-delay: 0.3s;
}
.share-link > .share-link-handler.active ~ .share-link-item:nth-child(4) {
    transform: translate(150%, -25%);
    transition-delay: 0.6s;
}
.share-link > .share-link-item {
    height: 30px;
    width: 30px;
    line-height: 30px;
    font-size: 17px;
    cursor: pointer;
    background-color: #66757f;
    z-index: 2;
    box-shadow: 2px 2px 7px rgba(0, 0, 0, .25);
    transition: transform 0.2s ease-in;
}
.share-link > .share-link-item:hover {
    background-color: #55acee;
}

Cool! It’s all set up for HTML and CSS. If you check that on your browser, you’ll have something like this:

floating 1

When you hover on top of share-link-handler, all share-link-item elements will be shown a tooltip, and when you inspect element then add class .active on share-link-handler, there will be floating animated items toward outside of handler on the top right part. Simple huh, you can adjust each easing for more dramatic effect. Also note that we are playing with transition-delay for each share-link-item. This is for delayed effect, basically, you delay manually for each nth-child or type and use value either the same as transition duration or a little bit faster than that.

So, to make it interactive, we just need to add 2 simple lines of javascript so that it will toggle the .active class on share-link-handler and the animation will be automatically adjusted by the browser.

JS

let handler = document.querySelector('.share-link-handler')
handler.onclick = () => {
 handler.classList.toggle('active')
 }

Simple right? The script is just find an element with the class of share-link-handler and store it on handler. Then onclick event of handler will toggle it’s class of .active. Pretty much self explanatory.

Now, when you run that all, whenever you click the handler, share-link-item will popup floating outside and animated, you can click that, each item having it’s own title and also icon. When you click again, .active will be removed and all items will floating back to share-link-handler‘s position (behind it, with the help of z-index)

Demo

You can check my pen here for the demo of Floating Share Menu https://codepen.io/hernandack/pen/eYdPKyL

Closing

That’s pretty much it guys. Hope you learn something from this article. If you have ideas or something feel free to let me know. Also, hit the share button if you think it’s worth it.

Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *