Aggiungi menu contestuale sul tuo sito web con HTML5

Il menu contestuale è il menu elencato quando fai clic con il tasto destro sullo schermo del tuo computer. Il menu di solito comprende scorciatoie per alcune delle nostre azioni ripetute preferite, come la creazione o l'ordinamento di cartelle / file, l'apertura di una nuova finestra dell'applicazione o l'accesso alle Preferenze di Sistema per modificare un'opzione.

Per anni "menu contestuale" risiede in applicazioni native. Oggigiorno, il menu contestuale offre molti vantaggi per le app Web, ad esempio in File Manager di cPanel e Gmail . Questi menu sono costruiti con un pesante script JavaScript.

In futuro, potremmo essere in grado di creare menu contestuali da utilizzare nel nostro sito Web tramite HTML5 . Vieni a dare un'occhiata a me.

Costruire un menu contestuale

HTML5 ha introdotto due nuovi elementi, menu e menuitem, per creare un menu contestuale. Affinché il browser tratti l'elemento del menu come "menu contestuale", dobbiamo impostare il tipo di menu come context e dargli anche un ID univoco.

Di seguito è riportato un esempio in cui abbiamo creato un menu contestuale con due elementi.

 Modifica contenuto  Selezione email 

È anche possibile aggiungere un sottomenu nidificando l'elemento del menu questo modo:

 Modifica contenuto  Selezione email  Facebook  cinguettio 

Ora, per visualizzare il menu contestuale sullo schermo quando eseguiamo un clic con il tasto destro, utilizziamo un nuovo attributo HTML denominato contextmenu . Questo attributo è utilizzato per raccogliere il menu con l'ID specificato; dato il nostro esempio sopra, possiamo scegliere come target il nostro menu contestuale con contextmenu=context-menu-id .

Possiamo assegnare l'attributo in un tag body se vogliamo utilizzare il menu contestuale dell'intera pagina. Possiamo anche aggiungerlo in un elemento HTML per utilizzare il menu esclusivamente all'interno di quell'elemento.

Il nuovo menu contestuale apparirà nel menu Sistema operativo come mostrato di seguito.

Aggiungere un'icona

Sono sicuro che molti di voi hanno visto alcuni menu contestuali apparire con un'icona accanto. In alcuni casi, un'icona potrebbe essere un grande aiuto visivo che potrebbe aiutare gli utenti a relazionarsi e comprendere rapidamente lo scopo del menu . Inoltre, fornisce agli utenti un indizio su quale applicazione è associata ai nuovi menu.

Possiamo anche aggiungere un'icona al nostro menu contestuale basato su HTML5 facilmente usando l'attributo icon, ad esempio:

 Modifica contenuto  Selezione email  Facebook  cinguettio 

Ecco cosa vediamo nel browser.

Rendi funzionante il menu

A questo punto, il nostro nuovo menu contestuale non fa ancora nulla quando clicchiamo su di esso. Ma è molto facile farlo funzionare con JavaScript nullo. Nel nostro esempio, abbiamo un menu chiamato "Selezione email". Questo menu permetterà agli utenti di inviare testo evidenziato con la loro applicazione di posta elettronica .

Per rendere possibile questa idea, aggiungiamo la funzione per afferrare il testo evidenziato dell'utente.

 function getSelectedText () {var text = ""; if (window.getSelection) {text = window.getSelection (). toString (); } else if (document.selection && document.selection.type! = 'Control') {text = document.selection.createRange (). text; } restituisce il testo; }; 

Quindi creiamo un'altra funzione, ad esempio sendEmail (), che aprirà l'applicazione di posta elettronica. L'oggetto dell'e-mail sarà precompilato con il titolo del documento, mentre il contenuto dell'email verrà popolato con il testo selezionato dall'utente.

 function sendEmail () {var bodyText = getSelectedText (); window.location.href = 'mailto:? subject =' + document.title + '& body =' + bodyText + ''; }; 

Infine, lo aggiungiamo nel nostro menu con l'attributo onclick per farlo funzionare facendo clic.

 Selezione email 

In passato, abbiamo spiegato come utilizzare HTML5 EditableContent, che ci consente di modificare i contenuti web direttamente dal front-end. Possiamo utilizzare questa funzione, aggiungendola nel nostro menu chiamato "Modifica contenuto".

Nota a margine

Sono molto entusiasta di questa nuova funzionalità. Riesco a vedere molte possibilità di cose che possiamo costruire con il Menu contestuale HTML5. Sfortunatamente, al momento della stesura di questo documento, solo Firefox ha implementato questa funzione. Spero che gli altri browser si aggiorneranno presto.

Puoi vedere la demo qui sotto (Funziona solo su Firefox) .

• Visualizza la demo
• Scarica fonte

Come velocizzare il tuo browser Chrome Android [QuickTip]

Quando utilizzi la versione Android di Google Chrome, probabilmente hai riscontrato il tempo in cui Chrome impiega troppo tempo per caricarsi o si blocca di frequente o agisce lentamente durante lo scorrimento.Se sei abituato a Chrome e non vuoi optare per un altro browser per tutte le tue esigenze online, ecco una soluzione rapida per accelerare il tuo browser Chrome Android

(Consigli tecnici e di design)

Best practice per i web designer: layout responsive o app native? [Op-Ed]

Non si può negare che il cellulare sia il futuro. Con Google confermando che sono state eseguite più ricerche su dispositivi mobili che su desktop, è evidente che tutti i siti Web dovrebbero essere effettivamente mobili se non lo sono già.Ma c'è una dicotomia interessante tra contenuti del browser tramite layout reattivi e contenuti in-app tramite app native.Mi p

(Consigli tecnici e di design)