Ho letto qualche giorno fa un articolo interessante sul blog di Joomlart che riguardava l'inserimento di un menu di navigazione progressiva in un articolo di Joomla. Per navigazione progressiva si intende che, mentre si scorre l'articolo per leggerlo, il menu si colora aprogressivamente di un colore diverso indicando il punto di lettura raggiunto. Se guardate la demo capite subito di cosa sto parlando.
Bello vero?
L'articolo spiegava come realizzarlo e mi sono messo subito all'opera per provarlo, dopodichè, siccome sul loro blog veniva spiegato in maniera molto essenziale, mi sono ripromesso di tradurlo ampliandolo un po' e creando a mia volta una demo personale.
Qui potete vedere all'opera la nostra demo.
Ecco il tutorial qui di seguito con i passi necessari a ricreare il menu.
IMPORTANTE: Il tutorial seguente si riferisce al template Purity iii di Joomlart, che è un template gratuito liberamente scaricabile a questo indirizzzo. Il menu funziona bene su qualsiasi altro template basato sul T3 framework; con Boostrap 3.
Sui template non basati su Bootstrap non funzionerà.
1) CREAZIONE DEL MENU
La prima cosa da fare è creare il codice di base del menu che useremo per la navigazione, al quale andrà poi collegato una Javascript ed uno stile css. Contrariamente a quanto si potrebbe pensare, non utilizzeremo un classico menu di Joomla, ma un modulo di tipo html personalizzato nel quale scriveremo il codice necessario.
Quindi:
- andate nella gestione moduli, cliccate sul pulsante "nuovo" e scegliete il tipo "html personalizzato";
- ora, dopo aver dato un titolo al modulo, cliccate sul pulsante "strumenti" dell'editor ed incollate questo codice nella finestra html che vi è comparsa:
<div class="doc-container row">
<div class="doc-sidebar col-md-3">
<ul class="doc-nav nav nav-list">
<li><a href="#section-1">Section 1</a></li>
<li><a href="#section-2">Section 2</a></li>
<li><a href="#section-3">Section 3</a></li>
</ul>
</div>
</div>
pulsante "codice sorgente"
finestra "codice sorgente"
- assegnategli la posizione "sidebar-2", o comunque una psizione nella colonna di destra o di sinistra.
- salvate e chiudete.
2) CREAZIONE DELL'ARTICOLO
Adesso bisogna creare l'articolo che sarà collegato al menu, cioè quell'articolo che il menu progressivo sarà in grado di analizzare e leggere, indicandovi il punto in cui siete arrivati a leggere.
- Andate quindi nella "gestione articoli" e cliccate sul pulsante "nuovo";
- dopo aver dato un titolo all'articolo, cliccate come nella fase precedente sul pulsante "strumenti" dell'editor e poi su "codice sorgente";
- nella finestra html che vi si è aperta, copiate questo codice.
<div class="doc-content col-md-9">
<section id="section-1">
<h3>Section 1</h3>
<p>Section 1 content here.</p>
...
</section>
<section id="section-2">
<h3>Section 2</h3>
<p>Section 2 content here.</p>
...
</section>
<section id="section-3">
<h3>Section 3</h3>
<p>Section 3 content here.</p>
...
</section>
</div>
N.B.
Affinchè ill menu possa leggere correttamente lo scorrimento dell'articolo ed indicare il punto in cui siete arrivati a leggere, è necessario che l'articolo stesso sia lungo. Se l'articolo è troppo corto il menu non funzionerà a dovere ed indicherà sempre la fine dell'articolo.
Quindi, nelle sezioni relative ai contenuti, <p>Section 1 content here.</p>, inserite molto testo ed immagini, guardate l'articolo demo per regolarvi sulla lunghezza da mantenere.
3) AGGIUNGERE IL CODICE JAVASCRIPT
A questo punto è necessario aggiungere un file javascript che avrà i seguenti compiti:
- mantenere il menu di navigazione sempre bloccaato al top dello schermo durante la navigazione (sticky menu);
- attivare la navigazione dell'articolo;
- aggiornare la barra del menu progressiva che indica il punto di scorrimento raggiunto.
Quindi aprite il vostro editor preferito, create un file javascript ed incollateci dentro il seguente codice:
(function($){
$(document).ready(function(){
var $window = $(window),
$body = $(document.body),
$doc = $('.doc-container'),
$nav = $doc.find ('.doc-nav');
// make the document navigation affix when scroll
$nav.affix({
offset: {
top: function () {
return 200; // replace with your top position to start affix
},
bottom: function () {
return 300; // replace your bottom position to release the affix
}
}
});
// change navigation active according to scroll
$body.scrollspy({
target: '.doc-sidebar'
});
// add progress bar for navigation
$nav.find ('a').before ($('<span class="docs-progress-bar" />'));
$nav.on ('activate activate.bs.scrollspy', function () {
$body.scrollspy("refresh");
var $active = $nav.find('li.active');
$active.prevAll().find('.docs-progress-bar').css ('width', '100%');
$active.nextAll().find('.docs-progress-bar').css ('width', '0%');
});
$window.on ('scroll', function (event) {
if (this.timeout) {
clearTimeout(this.timeout);
}
this.timeout = setTimeout (function () {
var $active = $nav.find('li.active'),
$progress = $active.find('.docs-progress-bar'),
$scrollspy = $body.data('bs.scrollspy'),
scrollTop = $scrollspy.$scrollElement.scrollTop() + $scrollspy.options.offset,
scrollHeight = $scrollspy.$scrollElement[0].scrollHeight || $scrollspy.$body[0].scrollHeight,
maxScroll = scrollHeight - $scrollspy.$scrollElement.height(),
offsets = $scrollspy.offsets,
targets = $scrollspy.targets,
activeTarget = $scrollspy.activeTarget,
i;
if (scrollTop >= maxScroll) {
$progress.css ('width', '100%');
return ;
}
if (activeTarget && scrollTop <= offsets[0]) {
$progress.css ('width', '0%');
return ;
}
for (i = offsets.length; i--;) {
if (scrollTop >= offsets[i]
&& (!offsets[i + 1] || scrollTop <= offsets[i + 1])) {
var p1 = offsets[i],
p2 = scrollTop,
p3 = !offsets[i + 1] ? maxScroll : offsets[i + 1],
p = (p2-p1)/(p3-p1)*100;
$progress.css ('width', (p < 2 ? 2 : p) + '%');
return ;
}
}
}, 100);
});
});
})(jQuery);
Salvatelo con il nome che preferite e chiudetelo, io l'ho chiamato prog-menu.js.
4) AGGIUNGERE IL JAVASCRIPT AL TEMPLATE
Adesso è necessario integrare il file prog-menu.js nel template, in modo che sia disponibile quando il template viene caricato. Per fare questo con il T3 framework dovete procedere in questa maniera.
- prima di tutto navigate nella cartella templates/nome_template/js e copiateci dentro il file prog-menu.js
- poi andate nella cartella templates/nome_template/tpls/blocks ed aprite il file head.php
- subito dopo le righe di codice che servono per caricare il file custom.css (IN NERO), inserite le righe di codice IN ROSSO:
<?php
// CODICE PER INSERIRE IL FILE CUSTOM CSS
if (is_file(T3_TEMPLATE_PATH . '/css/custom.css')) {
$this->addStyleSheet(T3_TEMPLATE_URL . '/css/custom.css');
}
?>
<?php // CODICE PER INSERIRE IL FILE PROG-MENU.JS
if(is_file(T3_TEMPLATE_PATH . '/js/prog-menu.js')) {
$this->addScript(T3_TEMPLATE_URL.'/js/prog-menu.js');
}
?>
Salvate e chiudete il file.
6) AGGIUNGERE LO STILE DEL MENU
A questo punto non vi rimane che dare uno stile al vostro menu progressivo.
Ecco lo stile di esempio che abbiamo utilizzato per questo esempio:
.doc-nav.affix {
top: 60px;
}
.doc-nav.affix-bottom {
position: relative;
}
.doc-nav > li {
background: none repeat scroll 0 0 #F6F8FA;
margin-bottom: 1px;
width: 200px;
}
.doc-nav > li.active > a {
font-weight: bold;
}
.doc-nav .docs-progress-bar {
background: none repeat scroll 0 0 #DEE4EC;
bottom: 0;
left: 0;
position: absolute;
top: 0;
}
Potete aggiungere questo codice in fondo al file custom.css, che trovate nella cartella templates/nome_templatee/css.
questo file viene sempre caricato per ultimo da tutti i template che utilizzano il T3 framework e quindi andate sul sicuro. Se per caso il file non ci fosse, non preoccupatevi, createlo voi ed inseritelo nella cartella di cui sopra.
A questo punto il menù è pronto, dovete solo pubblicarlo nella pagina dove è visibile l'articolo che avete creato in precedenza per vederlo all'opera.
Qui invece potete vedere all'opera la nostra demo.
Buon lavoro!
