Guide: How to Design Floating Action Menu like Medium
The popularity of floating action menus is on the rise, especially since Medium.com de feature fashionable. In short, the floating action menu pops up when you select some text on a web page. The menu appears next to the selection, show different actions which allows you to quickly format, highlight, or share the selected text. In this tutorial, I’ll show you how to show one action menu for a selected text fragment on a web page. Our action menu allows users to tweet the selected text to their followers.
1. Create the HTML
The starter HTML is simple, we just need some text the user can select. For the demo I use ‘The Hart and the Hunter’ bedtime story as sample text
2. Create the action menu template
Im adding the HTML code belonging to the action menu in a Whatever in the …
Don’t leave any unnecessary space within the
3. Create the CSS
The CSS for the #shareBox inline container goes like this: #shareBox {width: 30px; height: 30px; position: absolute;} The position: absolute; rule will let us place the menu wherever we want on the page. I also have the action button within #shareBox with a background color and image and in its :: after pseudo-element I. added a triangle for a down arrow #shareBox> button {width: 100%; height: 100%; background-color: # 292A2B; border: none; border radius: 2px; outline: none; cursor: pointer; background-image: url (‘share.png’); background repeat: no repeat; background-position: center; background-size: 70%;} # shareBox> button:: after {position: absolute; content: ”; border-top: 10px solid # 292A2B; border-left: 10px solid transparent; border-right: 10px solid transparent; left: 5px; top: 30px;}
4. Add event handlers with JS
Moving on to JavaScript, we must add event handlers for the mousedown and mouseup events to record the beginning and the end of the text selection. You can also research for it other selection events like select start and use them instead of mouse events (which would be ideal, but so far their browser support is not very good). Also add a reference to the document.addEventListener (‘mousedown’, onMouseDown); document.addEventListener (‘mouseup’, onMouseUp); var temp = document.querySelector (‘# shareBoxTemplate’); function onMouseDown () {} function onMouseUp () {}
5. Clear previous selections
In the mousedown event, we will do some cleaningupie delete all previous selection and associated action menu. function onMouseDown () {document.getSelection (). removeAllRanges (); var shareBox = document.querySelector (‘# shareBox’); if (shareBox! == null) shareBox.remove ();} The getSelection () method returns a Selection object represents the text range currently selected by the user and the removeAllRange () methodremoves all ranges of the same Selection object, that is clear any previous selection
6. Display the action menu
It’s during the mouseup event when we will confirm whether a text selection has been made and take further action. function onMouseUp () {var sel = document.getSelection (), txt = sel.toString (); if (txt! == “”) {var range = sel.getRangeAt (0); if (range.startContainer.parentElement. parentElement.localName === “article” || range.startContainer.parentElement.localName === “article”) {// text in article is selected}}} Get the selected text string by calling the toString () method of the Selection object. If the selected text is not empty, then go ahead and get the first range of the Selection object. Range is the selected portion of the document. Typically, users create a single selection alone, not multiple (by pressing the ctrl / cmd key), so just get the first range object (at index 0) from selection with getRangeAt (0) Once you have the scope, see if the selection started from where that is in the articleThe startContainer property of the scope returns the DOM node from where the selection began Sometimes (when you select within a paragraph), its value is only one text node, in that case parent element shall are and the parent of it element will and the parent node is . Hence the two equations in the second if condition in the above code. Once the if state is over, it’s time to get the action menu from the template and add it to the document. Place the code below within the second if statement. document.body.insertBefore (document.importNode (temp.content, true), temp);)); The importNode () method returns nodes from external documents (in our case nodes of You can insert #shareBox anywhere in the document text, I added it before the template element.
7. Post the action menu
We want to post the action menu straight above in the center of the selected areaTo do this, get the rectangle values of the selected area with the getBoundingClientRect () method that returns the size and position of an element.
Then update the values above and to the left of #shareBox based on the rectangle valuesIn the calculations of the new top and left values I used Literal ES6 templates
var rect = range.getBoundingClientRect (); var shareBox = document.querySelector (‘# shareBox’); shareBox.style.top = calc ($ {rect.top} px – 38px); shareBox.style.left = calc ($ {rect.left} px + calc ($ {rect.width} px / 2) – 30px);
8. Add functionality
Now that we’ve added the action menu next to the selected text, it’s time to create the selected text available for the menu options so we can take some action on it.
Assign the selected text to a custom property of the stock button named ‘shareTxt’ and add a mousedown event listener to it button
var shareBtn = shareBox.querySelector (‘button’); shareBtn[‘shareTxt’] = txt; shareBtn.addEventListener (‘mousedown’, onShareClick, true);
The true parameter of addEventListener () prevents the mousedown event from bubbling
Inside the onShareClick () event handler, we put the selected text in a tweet by the shareTxt property of the button
function onShareClick () {window.open (https://twitter.com/intent/tweet?text=$ {this.shareTxt}); this.remove (); document.getSelection () .removeAllRanges ()}
Once the button is clicked, it does what it’s supposed to do and then removes itself from the page. It will too clear each selection in the document.
Source code and demo
This is possible in the Codepen demo below test how the action menu works. You can also use the full source code in our Github repository. See the pen floating action menu to tweet selected text by Compsmag (@hkdc) on CodePen.
How to Design Floating Action Menu like Medium: benefits
Faq
Final note
I hope you like the guide How to Design Floating Action Menu like Medium. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends. For our visitors: If you have any queries regards the How to Design Floating Action Menu like Medium, then please ask us through the comment section below or directly contact us. Education: This guide or tutorial is just for educational purposes. Misinformation: If you want to correct any misinformation about the guide “How to Design Floating Action Menu like Medium”, then kindly contact us. Want to add an alternate method: If anyone wants to add more methods to the guide How to Design Floating Action Menu like Medium, then kindly contact us. Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off). Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.
