How to show some custom menu on text selection?
It would be great if selecting text on a webpage showed some options like copy, paste, or share. A selection menu accomplishes this. Basically, it is a GUI that displays in response to user activity, such as text selection. A selection menu provides a different range of options that you can access just by clicking them. Typically, the accessible options are actions associated with the selected object. You may familiar with different types of selection menus that will appear when you select some text on any website. In this article, we will create a custom/selection menu that floats right above the selected text.
<div class="menu"> <i class="fa fa-copy fa-2x"></i> <i class="fa fa-highlighter fa-2x"></i> </div>
Approach: We have created a very simple structure consisting of 2 div’s, the first one has some dummy text to select, and inside the first div second div is present. The Second div is our custom/selection menu which will appear on text selection. To create different options for the menu, we have used font-awesome icons which will also give our menu a visual pleasure. You can add as many options as you want to your selection menu. But here we have added only two options, the first is copy and the second is highlight.