menu a scomparsa

Probabilmente avrete visto anche voi in alcuni siti web un effetto particolare applicato al menu principale.
L'effetto è questo: quando l'utente scorre la pagina verso il basso, il menu scompare, quando ritorna a scorrerla verso l'alto il menu ricompare. La posizione iniziale del menu è solitamente quella Fixed-top, cioè fissa nella parte superiore della pagina.

 Cercando in rete ho trovato questo esempio su Codepen (http://codepen.io):

http://codepen.io/markmichon/pen/yicGB

Ho provato quindi ad integrare questo esempio in un template Joomla, precisamente il test è stato fatto sul template gratuito ja_purity_III, che potete scaricare da qui.

https://www.joomlart.com/joomla/templates/purity-iii

La nostra demo funzionante è invece visibile a questo indirizzo:

http://demo9.virtualproject.it/test/

Cominciamo quindi a vedere i vari passaggi per l'integrazione di questo effetto.

1) La prima cosa da fare è quella di individuare all'interno del template il codice che si occupa di visualizzare il menu. Nel template Purity questo codice è contenuto nel file header.php, che trovate seguendo questo percorso:

templates/purity_iii/tpls/blocks/header.php

Aprite il file e cercate questo pezzo di codice intorno alla riga 24:

<header id="t3-mainnav" class="wrap navbar navbar-default navbar-fixed-top t3-mainnav">

Modificatelo in questo modo, eliminando la classe "navbar-fixed-top"

<header id="t3-mainnav" class="wrap navbar navbar-default t3-mainnav">

2) adesso dobbiamo inserire il codice che si occuperà di nascondere e far riapparire il menu durante lo scroll. 

. Per funzionare questo script richiede la presenza di Jquery, quindi verificate se il vostro sito o template la integra già, altrimenti dovrete richiamarla inserendo questo codice fra i tag <head></head> del vostro file.

 <head>
<script type="text/javascript" src="/http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>;
</head>

Scorrete quindi in fondo alla pagina e dopo tutto il codice presente, alla fine del file, copiate questo script:

<!-- //Menu scroll script -->
<script type="text/javascript">
//Requires JQuery or Zepto
jQuery(document).ready(function($){ // Cache header
var $header = $('.t3-mainnav'); // Get height of t3-mainnav to use later as starting point
var $hHeight = $header.height(); // Set initial position to current position on page
var prevTop = $(window).scrollTop(); // Scroll event
$(window).on('scroll', function(e) {
st = $(this).scrollTop(); // Set scroll location
if (st > prevTop && st > $hHeight) {
$header.addClass('js-t3-mainnav-scrolling');
} else {
$header.removeClass('js-t3-mainnav-scrolling');
}
prevTop = st;
}); });
</script>

3) A questo punto è necessario scrivere alcune istruzioni css in modo da impostare la scomparsa e la ricomparsa del menu.
Aprite il file tuotemplate/css/custom.css (nel T3 questo file viene caricato per ultimo, siete così sicuri che le istruzioni funzioneranno e non saranno sovrascritte da qualche file che viene caricato dopo) e inserite questo codice:

/* menu scroll */

.t3-mainnav {
width: 100%;
position:fixed;
top:0;
left:0;
transition: top .2s ease-in;
z-index:9999;
} .js-t3-mainnav-scrolling {
top: -4em; /* Height of the header */
} @media (max-width:767px) {
.t3-mainnav {
position:fixed;
}
.js-t3-mainnav-scrolling {
top: 0px;
}
}

La classe .js-t3-mainnav-scrolling è quella che si occupa di far scomparire il menu e farlo riapparire. Provate a variare il valore di Top: -4em;

per vedere cosa succede e per impostare al meglio questo valore sul vostro template.

Buon lavoro!

Marco Bianchi.