中型のフローティングアクションメニューを作成する方法

の人気 フローティングアクションメニュー 特にMedium.comがその機能を流行させて以来、その数は増え続けています。簡単に言うと、フローティングアクションメニュー 浮き出る あなたがいるとき テキストを選択してください Webページに。選択範囲の近くにメニューが表示されます。, さまざまなアクションを表示 選択したテキストをすばやくフォーマット、強調表示、または共有できます。.

このチュートリアルでは、表示方法について説明します。 選択したテキストスニペットのアクションメニュー Webページに。私達の行動メニューはユーザーを可能にします 選択したテキストをツイートする フォロワーに.

1. HTMLを作成する

の スターターHTMLは簡単です, 必要なだけ いくつかのテキスト ユーザーが選択できます。デモには、私が使用します “ハートとハンター” 就寝時の話 サンプルテキストとして.

 
 
ハートとハンター
 
ハートはかつて… 
… 
 

2.アクションメニューテンプレートを作成する

私は HTMLコードを追加する アクションメニューに属する の中