{"id":30125,"date":"2017-06-05T23:01:45","date_gmt":"2017-06-05T15:01:45","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=30125"},"modified":"2025-04-04T00:01:03","modified_gmt":"2025-04-03T16:01:03","slug":"create-medium-floating-action-menu","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/create-medium-floating-action-menu\/","title":{"rendered":"How to Create Medium-Like Floating Action Menu"},"content":{"rendered":"

The popularity of floating action menus<\/strong> has been on the rise, especially since Medium.com brought the feature into vogue. In brief, the floating action menu pops up<\/strong> when you select some text<\/strong> on a web page. The menu appears near the selection, showing different actions<\/strong> that allow you to quickly format, highlight, or share the selected text.<\/p>\n

In this tutorial, I\u2019ll show you how to display an action menu for a selected text snippet<\/strong> on a web page. Our action menu will enable users to tweet the selected text<\/strong> to their followers.<\/p>\n

\"Final<\/figure>\n

\n\t\t\t\t\tRead Also:<\/strong>\u00a0\n\t\t\t\t\tAdd Contextual Menu on Your Website With HTML5<\/a>\n\t\t\t\t<\/p>\n

1. Create the HTML<\/h2>\n

The starter HTML is simple<\/strong>, we only need some text<\/strong> the user can select. For the demo, I\u2019ll use \u201cThe Hart and the Hunter\u201d<\/a> bedtime story as sample text<\/strong>.<\/p>\n

\r\n<article>\r\n  <h1>The Hart and the Hunter<\/h1>\r\n  <p>The Hart was once...<\/p>\r\n  ...\r\n<\/article>\r\n<\/pre>\n
2. Create the action menu template<\/h2>\n
I\u2019m adding the HTML code<\/strong> belonging to the action menu inside a <template><\/a><\/code> element<\/strong>. Whatever is inside the <template><\/code> tag, it won\u2019t be rendered<\/strong> by browsers until it is added to the document using JavaScript<\/strong>.<\/p>\n
\r\n<template id=\"shareBoxTemplate\">\r\n  <span id=\"shareBox\">\r\n    <button><\/button>\r\n  <\/span>\r\n<\/template>\r\n<\/pre>\n
Don\u2019t leave any unnecessary space<\/strong> inside the <template><\/code> tag, as that might disturb the action menu layout once it\u2019s inserted into the document. If you want, add more buttons<\/strong> inside #shareBox<\/code> for more options.<\/p>\n
3. Create the CSS<\/h2>\n
The CSS for the #shareBox<\/code> inline container<\/strong> goes like this:<\/p>\n
\r\n#shareBox {\r\n  width:    30px;\r\n  height:   30px;\r\n  position: absolute;\r\n}\r\n<\/pre>\n
The position:absolute;<\/code> rule will let us place the menu wherever we want<\/strong> on the page.<\/p>\n
I also styled the action button inside #shareBox<\/code><\/strong> with a background color and image and in its ::after<\/code> pseudo-element I added a triangle for a down arrow<\/strong>.<\/p>\n
\r\n#shareBox > button {\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: #292A2B;\r\n  border: none;\r\n  border-radius: 2px;\r\n  outline: none;\r\n  cursor: pointer;\r\n  background-image: url('share.png');\r\n  background-repeat: no-repeat;\r\n  background-position: center;\r\n  background-size: 70%;\r\n}\r\n#shareBox > button::after {\r\n  position: absolute;\r\n  content: '';\r\n  border-top: 10px solid #292A2B;\r\n  border-left:10px solid transparent;\r\n  border-right: 10px solid transparent;\r\n  left: 5px;\r\n  top: 30px;\r\n}\r\n<\/pre>\n
4. Add event handlers with JS<\/h2>\n
Moving on to JavaScript, we need to add event handlers<\/strong> for the mousedown<\/code><\/strong> and mouseup<\/code><\/strong> events to capture the beginning and the end<\/strong> of the text selection.<\/p>\n
You can also do research for other selection events<\/strong> such as selectstart<\/a><\/code><\/strong> and use them instead of mouse events<\/strong> (which would be ideal but as of yet their browser support are not very good).<\/p>\n
Also add a reference<\/strong> to the <template><\/code> element using the querySelector()<\/code><\/a> method.<\/p>\n
\r\ndocument.addEventListener('mousedown', onMouseDown);\r\ndocument.addEventListener('mouseup', onMouseUp);\r\nvar temp = document.querySelector('#shareBoxTemplate');\r\nfunction onMouseDown() {\r\n}\r\nfunction onMouseUp() {\r\n}\r\n<\/pre>\n
5. Clear previous selections<\/h2>\n
In the mousedown<\/code> event, we\u2019ll perform some clean-up<\/strong>, i.e. clear any previous selection and the belonging action menu.<\/p>\n
\r\nfunction onMouseDown() {\r\n  document.getSelection().removeAllRanges();\r\n  var shareBox = document.querySelector('#shareBox');\r\n  if (shareBox !== null)\r\n  shareBox.remove();\r\n}\r\n<\/pre>\n
The getSelection()<\/a><\/code><\/strong> method returns a Selection<\/a><\/code> object representing the ranges of text<\/strong> currently selected by the user and the removeAllRange()<\/a><\/code><\/strong> method\nremoves all ranges<\/strong> from the same Selection<\/code> object, thus clearing any previous selection<\/strong>.<\/p>\n
6. Display the action menu<\/h2>\n
It is during the mouseup<\/code> event, when we\u2019ll confirm if a text selection was made<\/strong> and take further action.<\/p>\n
\r\nfunction onMouseUp() {\r\n  var sel = document.getSelection(),\r\n  txt = sel.toString();\r\n  if (txt !== \"\") {\r\n    var range = sel.getRangeAt(0);\r\n    if (range.startContainer.parentElement.parentElement.localName\r\n    === \"article\"\r\n    || range.startContainer.parentElement.localName\r\n    === \"article\") {\r\n        \/\/ some text in the article was selected\r\n    }\r\n  }\r\n}\r\n<\/pre>\n
Get the selected text string<\/strong> by calling the toString()<\/a><\/code> method of the Selection<\/code> object. If the selected text is not empty, go ahead and get the first range<\/strong> from the Selection<\/code> object.<\/p>\n
Range<\/strong> is the selected portion<\/strong> of the document. Typically, users will make a single selection<\/strong> only, not multiple (by pressing the ctrl<\/span>\/cmd<\/span> key), so just get the first range object (at index 0) from the selection using getRangeAt(0)<\/a><\/code><\/strong>.<\/p>\n
Once you\u2019ve got the range, see if the selection started from a place that\u2019s inside the article<\/strong>. The startContainer<\/a><\/code><\/strong> property of the range returns the DOM node from where the selection began<\/strong>.<\/p>\n
Sometimes (when you select within a paragraph<\/strong>), its value is just a text node<\/strong>, in which case its parent element<\/strong> will be <p><\/code> and the parent of the <p><\/code> element will be <article><\/code> (in the sample code in this post).<\/p>\n
Other times, when you select across multiple paragraphs<\/strong>, the startContainer<\/code> will be <p><\/code> and its parent node will be <article><\/code>. Hence the two comparisons<\/strong> in the second if<\/code> condition in the above code.<\/p>\n
Once the if<\/code> condition passes, it\u2019s time to fetch the action menu<\/strong> from the template and add it to the document. Place the code below<\/strong> inside the second if<\/code> statement.<\/p>\n
\r\ndocument.body.insertBefore(document.importNode(temp.content, true), temp);\r\n<\/pre>\n
The importNode()<\/a><\/code> method returns nodes from external documents<\/strong> (in our case, nodes from <template><\/code>). When it\u2019s called with the second parameter (true<\/code>), the imported element\/node will come with its child elements<\/strong>.<\/p>\n
You can insert #shareBox<\/code> anywhere in the document body<\/strong>, I\u2019ve added it before the template element.<\/p>\n
7. Place the action menu<\/h2>\n
We want to place the action menu right above<\/strong> & at the middle of the selected area<\/strong>. To do so, get the rectangle values<\/strong> of the selected area using the getBoundingClientRect()<\/a><\/code><\/strong> method that returns the size and the position of an element.<\/p>\n
Then, update the top<\/code> and left<\/code> values of #shareBox<\/code> based on the rectangle values<\/strong>. In the calculations of the new top<\/code> and left<\/code> values, I made use of ES6 template literals<\/a><\/strong>.<\/p>\n
\r\nvar rect = range.getBoundingClientRect();\r\nvar shareBox = document.querySelector('#shareBox');\r\nshareBox.style.top = `calc(${rect.top}px - 38px)`;\r\nshareBox.style.left = `calc(${rect.left}px + calc(${rect.width}px \/ 2) - 30px)`;\r\n<\/pre>\n
8. Add functionality<\/h2>\n
Now that we added the action menu near the selected text, it\u2019s time to make the selected text available for the menu options<\/strong> so that we can perform some action on it.<\/p>\n
Assign the selected text to a custom property of the share button<\/strong> called 'shareTxt'<\/code> and add a mousedown<\/code> event listener to the button.<\/p>\n
\r\nvar shareBtn = shareBox.querySelector('button');\r\nshareBtn['shareTxt'] = txt;\r\nshareBtn.addEventListener('mousedown', onShareClick, true);\r\n<\/pre>\n
The true<\/code> parameter of addEventListener()<\/code> prevents the mousedown<\/code> event from bubbling<\/strong>.<\/p>\n
Inside the onShareClick()<\/code> event handler, we insert the selected text into a tweet<\/strong> by accessing the shareTxt<\/code> property of the button.<\/p>\n
\r\nfunction onShareClick() {\r\n  window.open(`https:\/\/twitter.com\/intent\/tweet?text=${this.shareTxt}`);\r\n  this.remove();\r\n  document.getSelection().removeAllRanges()\r\n}\r\n<\/pre>\n
Once the button is clicked<\/strong>, it does what it\u2019s supposed to do, then remove itself from the page. It\u2019ll also clear any selection<\/strong> in the document.<\/p>\n
Source code & demo<\/h2>\n
In the Codepen demo below, you can test<\/strong> how the action menu works. You can also find the full source code<\/strong> in our Github repo<\/a>.<\/p>\n