Контекстне меню для вашого сайту на html5

Відео: How To Make A Website Start To Finish - Responsive HTML5 / CSS3, Image Slider & Drop Down Menu

У цьому уроці ми розглянемо як створити контекстне меню прямо на сайті. Контекстне меню - це меню яке з`являється при натисканні правою кнопкою миші. Технологія HTML5 зробила крок далеко вперед, і крім можливості створити прогрес бар, відеоплеєр, можна створити ще й контекстне меню. У цій статті ми розглянемо як створити можливість динамічного редагування контенту і відправки виділеного текст по email, доступ до яких здійснюється через контекстне меню.

Приклад можна побачити тут:

Подивитися прімерСкачать

Як користуватися? - «Контекстне меню для вашого сайту»

HTML частина

HTML5 ввів два нові елементи

1234

type="Context" id="Context-menu-id"gt;="Img / edit.jpg" onclick="EditContent () ;"gt; Редагувати текстlt;/menuitemgt;="Img / mail.jpg" onclick="SendEmail () ;"gt; Emaillt;/menuitemgt;lt;/menugt;

В атрибуті icon пропишемо адреси до зображень, які знаходяться перед описом пункту меню. А також в атрибуті onclick розміщуються функції, які опишемо трохи нижче.

У меню можна додати підпункти наступним чином:

12345678

type="Context" id="Context-menu-id"gt;редагувати текстlt;/menuitemgt;Emaillt;/menuitemgt;label="Розповісти ..."gt;Facebooklt;/menuitemgt;Twitterlt;/menuitemgt;lt;/menugt;lt;/menugt;

javascript частина

Основа меню у нас готова, функції в атрибуті onclick прописані, можемо братися до змалювання даних функцій.

Відео: Simple Responsive Navigation Menu Bar with Logo on Left Using HTML5 and CSS3 Flexbox - Tutorial

Першою напишемо функцію відправлення виділеного тексту по email. Спочатку нам необхідно отримати виділений текст, робимо це наступною функцією:

123456789

function getSelectedText() {var text = ""-if(window.getSelection) {text = window.getSelection().toString()-} else if (document.selection  document.selection.type != "Control `) {text = document.selection.createRange().text-}return text-}-

А потім відправляємо за допомогою функції:

Відео: HTML5 and CSS3 for beginners (New & updated version)

1234

function sendEmail() {var bodyText = getSelectedText()-window.location.href = `Mailto:? Subject =`+ document.title +`Body =`+ bodyText +``-}-

Відео: Build An HTML5 Website With A Responsive Layout

А що стосується функції динамічного редагування тексту, то тут ми просто встановлюємо значення атрибута contenteditable в true:

1234

function editContent() {$ TheContent.attr(`Contenteditable`, `True`)-$ SaveButton.add($ cancelButton).show()-}-

висновок

Справді приголомшлива можливість з`явилася у HTML5, на жаль це працює тільки в браузері Firefox. Адже за допомогою цієї функції можна зробити сайт ще більш зручним для користувача, шляхом розміщення найпотрібніших функцій в контекстному меню.

Успіхів!

З повагою, Юрій Німець

джерело: https://hongkiat.com/blog/html5-contextual-menu/