Corsi on-line

Menu contestuali in HTML 5.1

HTML 5.1 introduce nuove feature nel linguaggio di markup per le pagine Web. Per il momento non tutte sono sufficientemente supportate dai browser Internet più diffusi, ma è probabile che tale lacuna verrà eliminata nel corso dei prossimi mesi grazie all’operato dei vendor; con questo articolo dedicato agli elementi e ai tag per i menu contestuali inizia quindi una serie di articoli volti ad analizzare le novità più interessanti dell’aggiornamento.html51

La release 5.1 di HTML, o per meglio dire le specifiche associate ad essa, ha apportato inizialmente una distinzione tra elementi menu distinguendoli in context e toolbar; si è così cercato di incrementare le opportunità di sviluppare menu contestuali che sono classicamente quei menu che si aprono tramite il tasto destro del mouse. Nelle successive implementazioni l’idea di introdurre toolbar è stata abbandonata preferendo un ulteriore sviluppo degli elementi menu e menuitem.

E’ possibile utilizzare il tag menu per la realizzazione di menu formati da uno o da più elementi menuitem ed effettuare il binding (creando quindi un legame) con qualsiasi altro elemento tramite l’attributo denominato contextmenu. A loro volta gli elementi menuitem possono essere associati a tre tipi differenti che sono nello specifico:

  1. radio: permette di selezionare un’opzione tra quelle presenti all’interno di un gruppo;
  2. command: consente di dare vita ad un’azione attraverso un click;
  3. checkbox: permette di selezionare o deselezionare una determinata opzione.

Un semplice esempio di menu contestuale generato tramite le nuove feature di HTML 5.1 potrebbe essere il seguente:

<p contextmenu="esempio-menu">Usa il tasto destro per aprire il menu contestuale.</p>

<menu type="context" id="esempio-menu">
  <menuitem type="radio" name="radiogroup" checked="true">Primo Radio button</menuitem>
  <menuitem type="radio" name="radiogroup">Secondo Radio button</menuitem>
  <menuitem type="command" label="Command" onclick="alert('Blah! Blah! Blah!')">menuitem tipo command</menuitem>
  <menuitem type="checkbox" checked="true">Questa è una checkbox</menuitem>
  <menuitem type="checkbox" disabled>Questo è un elemento disabilitato</menuitem>
</menu>

Ora aggiungiamo qualche regola di stile CSS per rendere l’aspetto del tutto più gradevole:

body {
  font-family: 'Georgia';
  font-size: 28px;
  color: white;
  text-align: center;
}
p {
  width: 250px;
  background: green;
  padding: 8px 20px;
  color: yellow;
  display: inline-block;
  border-radius: 25px;
}
p:hover {
  background: orange;
  color: black;
}

Il risultato sarà un paragrafo che quando inattivo avrà sfondo verde con testo giallo al suo interno, lo sfondo diventerà poi arancione con testo nero al passaggio del mouse e cliccando su di esso con il tasto destro si aprirà un menù contestuale simile a quello visualizzato nella figura successiva.
menu
L’effetto ottenuto potrebbe naturalmente variare a seconda del browser utilizzato e della sua versione.

Post correlati
I più letti del mese
Tematiche