Mr. Webmaster Blog Menu
  • Home
  • Cerca
  • Argomenti del Blog
    • A
    • Apple
    • B
    • Browser
    • C
    • CMS
    • D
    • Database
    • E
    • Eventi & WorkShop
    • F
    • Freelance
    • G
    • Grafica
    • H
    • Hosting
    • I
    • IoT
    • L
    • Linux
    • M
    • Makers
    • Mobile
    • Mr. Webmaster
    • O
    • Online Apps
    • Open Source
    • P
    • Programmazione
    • R
    • Reti
    • S
    • Scripting
    • Senza Rete
    • Sicurezza
    • Social Network
    • Software e App
    • W
    • Web Design
    • Web e Diritto
    • Web e Lavoro
    • Web Marketing
    • Web Server
    • Web Writing
    • Windows
  • Network
  • Corsi on-line
Mr.Webmaster Blog→Scripting→Menu a scomparsa con AngularJS
  • 21
    GEN
    2016

Menu a scomparsa con AngularJS

Scritto da Claudio Garau | Scripting

Il framework JavaScript AngularJS può essere utilizzato per realizzare dei menu a comparsa/scomparsa da integrare nelle nostre Web application o nelle pagine dei nostri siti Web; in questo articolo verrà proposta una semplice procedura finalizzata ad ottenere tale risultato, nello specifico verrà creata una piccola applicazione basata sulla direttiva ng-click che fa parte dei costrutti di Angular con i quali sarà possibile definire degli event listeners, cioè componenti in grado di intercettare un evento, come per esempio un’azione effettuata da un utente.

AngularJS-largePer la precisione ng-click è una direttiva concepita per rilevare i click del mouse su un determinato elemento HTML, come per esempio un pulsante. Il codice proposto di seguito mostrerà come sia possibile associare tale event listener ad un button che, se clickato una prima volta, renderà visibile un menu di navigazione prima nascosto e, se clickato una seconda volta, nasconderà nuovamente il menu riportandolo allo stato iniziale.

La parte relativa a JavaScript servirà per la definizione di un controller, cioè di un oggetto che utilizzeremo per gestire il flusso dei dati nelle operazioni di comparsa e scomparsa della componente coinvolta.

<script>
var menu = angular.module('menuApp', []);
menu.controller('menuCtrl', function($scope) {
$scope.mostraMenu = false;
$scope.funcMenu = function() {
$scope.mostraMenu = !$scope.mostraMenu;
}
});
</script>

Fatto questo definiremo una divbox nella quale la direttiva ng-app introdurrà il nome dell’applicazione Angular e ng-controller quello del controller:

<div ng-app="menuApp" ng-controller="menuCtrl">

Il button sarà associato alla funzione tramite la già citata direttiva ng-click e rappresenterà lo strumento attraverso il quale l’utente potrà interagire con l’applicazione:

<button ng-click="funcMenu()">Accedi al menu</button>

Ora non resterà che inserire il menu, si noti l’impiego della direttiva ng-show che si occupa appunto di rendere visibile o di nascondere l’elemento delimitato dalla divbox associata ad essa:

<div ng-show="mostraMenu">
<h1>Il nostro menu:</h1>
<ul>
<li><a href="http://www.mrwebmaster.it/html/guide/guida-html5/" title="Guida HTML5">HTML5</a></li>
<li><a href="http://www.mrwebmaster.it/php/guide/guida-php/" title="Guida PHP">PHP</a></li>
<li><a href="http://www.mrwebmaster.it/programmazione/guide/guida-python/" title="Guida Python">Python</a></li>
<li><a href="http://www.mrwebmaster.it/javascript/" title="Guida JavaScript">JavaScript</a></li>
<li><a href="http://www.mrwebmaster.it/css/guide/guida-css3/" title="Guida CSS3">CSS3</a></li>
</ul>
</div>

Per comodità del lettore verrà proposto di seguito il codice della pagina Web per intero:

<!DOCTYPE html>
<html>
<head>
<title>Menu a scomparsa con AngularJS</title>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
<div ng-app="menuApp" ng-controller="menuCtrl">
<button ng-click="funcMenu()">Accedi al menu</button>
<div ng-show="mostraMenu">
<h1>Il nostro menu:</h1>
<ul>
<li><a href="http://www.mrwebmaster.it/html/guide/guida-html5/" title="Guida HTML5">HTML5</a></li>
<li><a href="http://www.mrwebmaster.it/php/guide/guida-php/" title="Guida PHP">PHP</a></li>
<li><a href="http://www.mrwebmaster.it/programmazione/guide/guida-python/" title="Guida Python">Python</a></li>
<li><a href="http://www.mrwebmaster.it/javascript/" title="Guida JavaScript">JavaScript</a></li>
<li><a href="http://www.mrwebmaster.it/css/guide/guida-css3/" title="Guida CSS3">CSS3</a></li>
</ul>
</div>
<script>
var menu = angular.module('menuApp', []);
menu.controller('menuCtrl', function($scope) {
    $scope.mostraMenu = false;
    $scope.funcMenu = function() {
        $scope.mostraMenu = !$scope.mostraMenu;
    }
});
</script>
Accedi, poi nascondi nuovamente il menu clickando sul pulsante.
</body>
</html>

Chiaramente, quello del menù rappresenta soltanto un possibile esempio dell’utilizzo di tali direttive che potranno essere impiegate per visualizzare o nascondere qualsiasi altra tipologia di contenuto.

  • AngularJS
  • Javascript

Naviga tra i post del Blog

← Definire gradienti per i bordi con CSS
→ Feature.js: cosa può fare il tuo browser e cosa no

Commenti

I commenti sono sottoposti alle linee guida di moderazione e prima di essere visibili devono essere approvati da un moderatore.
  • Facebook
  • Twitter
  • Google+
  • YouTube
  • Feed RSS
Post correlati
  • Formattazione valutaria con AngularJS 17/11/2015
  • Lettura di file JSON da AngularJS 05/11/2015
  • AngulaJS: un calcolatore avanzato 16/10/2015
  • Drop Down menu con jQuery: 5 esempi facili da usare 19/06/2010
  • jQuery: menu da tasto destro (ContextMenu) 24/06/2010
I post più letti del mese
  • Loading in attesa del caricamento della paginaLoading in attesa del caricamento della pagina22/03/2010
  • Scusi, mi sa dire il timestamp?Scusi, mi sa dire il timestamp?01/04/2010
  • Esecuzione di codice PHP da JavaScriptEsecuzione di codice PHP da JavaScript06/10/2015
  • Temporizzare il redirect con PHPTemporizzare il redirect con PHP15/06/2010
  • Redirect con jQueryRedirect con jQuery09/07/2010
Mr. Webmaster
  • RSS
  • Contattaci
  • Torna su
IKIweb
© 2003 - 2019 Mr. Webmaster
Mr. Webmaster ® è un marchio registrato.
E' vietata ogni forma di riproduzione.
IKIweb Internet Media S.r.l. - P.IVA 02848390122

Parliamo di noi: chi siamo / cronologia
Contatti: pubblicità / contattaci / segnala abusi
Note Legali: condizioni d'uso / privacy / cookie